@czi-sds/data-viz 2.2.0 → 2.3.0

package/dist/index.esm.js

@@ -7,9 +7,8 @@ import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Legend, Theme, Tooltip, TooltipTable, defaultTheme, fontBodyXs, fontBodyXxxs, fontCodeXs, fontHeaderM, fontHeaderS, fontTabularSemiboldXxxxs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
 import { ThemeProvider, useTheme } from "@mui/material/styles";
 import { ApertureIcon, ArrowCounterClockwiseIcon, CheckIcon, CopyIcon, EyeIcon, EyeSlashIcon, QuestionIcon } from "@phosphor-icons/react";
-import { Color } from "molstar/lib/mol-util/color";
-import { OrderedSet } from "molstar/lib/mol-data/int";
 import { Structure, StructureElement, StructureProperties, Unit } from "molstar/lib/mol-model/structure";
+import { clearStructureTransparency, setStructureTransparency } from "molstar/lib/mol-plugin-state/helpers/structure-transparency";
 import { createPluginUI } from "molstar/lib/mol-plugin-ui";
 import { renderReact18 } from "molstar/lib/mol-plugin-ui/react18";
 import { DefaultPluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
@@ -22,6 +21,7 @@ import { EveryLoci, Loci } from "molstar/lib/mol-model/loci";
 import { PluginReactContext } from "molstar/lib/mol-plugin-ui/base";
 import { ButtonsType, getButton, getButtons, getModifiers } from "molstar/lib/mol-util/input/input-observer";
 import { throttleTime } from "rxjs/operators";
+import { OrderedSet } from "molstar/lib/mol-data/int";
 import { useTheme as useTheme$1 } from "@mui/material";
 import { PluginStateObject } from "molstar/lib/mol-plugin-state/objects";
 import { getChainOptions, getModelEntityOptions, getOperatorOptions, getSequenceWrapper, getStructureOptions } from "molstar/lib/mol-plugin-ui/sequence";
@@ -30,6 +30,7 @@ import { arrayEqual } from "molstar/lib/mol-util";
 import { ParamDefinition } from "molstar/lib/mol-util/param-definition";
 import { Toasts } from "molstar/lib/mol-plugin-ui/toast";
 import { Viewport } from "molstar/lib/mol-plugin-ui/viewport";
+import { Color } from "molstar/lib/mol-util/color";
 import { PluginCommands } from "molstar/lib/mol-plugin/commands";
 import { Vec3 } from "molstar/lib/mol-math/linear-algebra";
 import { BondType } from "molstar/lib/mol-model/structure/model/types";
@@ -1206,249 +1207,183 @@ function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChai
 	});
 }
 //#endregion
-//#region src/core/ProteinStructureViewer/utils/selection.ts
-/**
-* A stable string for a selection, for comparing one against another.
-*
-* A consumer holding the selection in state hands back a new object on every
-* render, so identity says nothing about whether the selection changed. Order
-* is normalized too: `{ residues: [2, 1] }` and `{ residues: [1, 2] }` select
-* the same residues and must not read as a change.
-*/
-function selectionKey(selection) {
-	var _selection$residues, _selection$chains;
-	const residues = [...new Set((_selection$residues = selection.residues) !== null && _selection$residues !== void 0 ? _selection$residues : [])].sort((a, b) => a - b);
-	return `${[...new Set((_selection$chains = selection.chains) !== null && _selection$chains !== void 0 ? _selection$chains : [])].sort().join(",")}|${residues.join(",")}`;
+//#region \0@oxc-project+runtime@0.134.0/helpers/esm/asyncToGenerator.js
+function asyncGeneratorStep(n, t, e, r, o, a, c) {
+	try {
+		var i = n[a](c), u = i.value;
+	} catch (n) {
+		e(n);
+		return;
+	}
+	i.done ? t(u) : Promise.resolve(u).then(r, o);
 }
-/** True when the selection names nothing at all. */
-function isEmptySelection(selection) {
-	var _selection$residues2, _selection$chains2;
-	if (!selection) return true;
-	return !((_selection$residues2 = selection.residues) === null || _selection$residues2 === void 0 ? void 0 : _selection$residues2.length) && !((_selection$chains2 = selection.chains) === null || _selection$chains2 === void 0 ? void 0 : _selection$chains2.length);
+function _asyncToGenerator(n) {
+	return function() {
+		var t = this, e = arguments;
+		return new Promise(function(r, o) {
+			var a = n.apply(t, e);
+			function _next(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
+			}
+			function _throw(n) {
+				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
+			}
+			_next(void 0);
+		});
+	};
 }
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useChainHighlight.ts
 /**
-* The residues a selection covers, ascending and without repeats.
+* How transparent the other chains go while one is pointed at.
 *
-* Chains are expanded through `residuesByChain`, which was read off the loaded
-* structure, so a chain contributes exactly the residues it holds rather than
-* the span between its ends. A residue named directly and also carried by a
-* selected chain is counted once.
+* Enough that the chain under the pointer is the one being read, not enough
+* that the rest of the complex stops being context for it. 0 is opaque, 1 is
+* invisible.
 */
-function selectionResidues(selection, residuesByChain) {
-	var _selection$residues3, _selection$chains3;
-	const residues = new Set((_selection$residues3 = selection.residues) !== null && _selection$residues3 !== void 0 ? _selection$residues3 : []);
-	for (const chainId of (_selection$chains3 = selection.chains) !== null && _selection$chains3 !== void 0 ? _selection$chains3 : []) {
-		var _residuesByChain$get;
-		for (const index of (_residuesByChain$get = residuesByChain.get(chainId)) !== null && _residuesByChain$get !== void 0 ? _residuesByChain$get : []) residues.add(index);
-	}
-	return [...residues].sort((a, b) => a - b);
-}
+const CHAIN_DIM_TRANSPARENCY = .65;
 /**
-* Names a selection for the legend's readout.
+* The chain id in a component key.
 *
-* A single chain is named as one, since "Chain A" says more than the number of
-* residues it happens to hold. Anything else is reported as a count, which is
-* the only thing true of every shape a selection can take. A lone residue is
-* named by the caller instead, which reads it back off the structure to get its
-* three-letter code and the number the file gives it.
+* Chain components are tagged `structure-component-<part>-<chainId>`, and a
+* key is the component's tags sorted and joined with commas. Anchoring on the
+* part name and stopping at the comma is what keeps `A` from also matching the
+* chain named `AA`.
 */
-function selectionLabel(selection, residueCount) {
-	var _selection$chains4, _selection$residues4;
-	const chains = (_selection$chains4 = selection.chains) !== null && _selection$chains4 !== void 0 ? _selection$chains4 : [];
-	if (chains.length === 1 && !((_selection$residues4 = selection.residues) === null || _selection$residues4 === void 0 ? void 0 : _selection$residues4.length)) return `Chain ${chains[0]}`;
-	return `${residueCount} residues`;
+const COMPONENT_CHAIN_ID = /structure-component-(?:polymer|ligand)-([^,]+)/;
+/** The chain a component was built for, or undefined if it is not a chain's. */
+function componentChainId(component) {
+	var _component$key, _COMPONENT_CHAIN_ID$e;
+	const key = (_component$key = component.key) !== null && _component$key !== void 0 ? _component$key : component.cell.transform.ref;
+	return (_COMPONENT_CHAIN_ID$e = COMPONENT_CHAIN_ID.exec(key)) === null || _COMPONENT_CHAIN_ID$e === void 0 ? void 0 : _COMPONENT_CHAIN_ID$e[1];
 }
-/** The mean of the values `read` returns, ignoring residues without one. */
-function meanOverResidues(residues, read) {
-	let sum = 0;
-	let count = 0;
-	for (const index of residues) {
-		const value = read(index);
-		if (value === null || value === void 0) continue;
-		sum += value;
-		count++;
-	}
-	return count === 0 ? null : sum / count;
+/** Every chain component of every loaded structure, polymers and ligands. */
+function structureComponents(plugin) {
+	return plugin.managers.structure.hierarchy.current.structures.flatMap((entry) => entry.components);
 }
-//#endregion
-//#region src/core/ProteinStructureViewer/utils/residueLoci.ts
-/**
-* Every atom the predicate accepts, as geometry Mol* can focus, frame and mark,
-* or undefined when it accepts none.
-*
-* One pass over the structure rather than a pass per residue: a whole-chain
-* selection names hundreds of residues, and resolving them one at a time would
-* walk the structure once for each.
-*
-* Atoms are bucketed by the unit they belong to because element indices are
-* unit-local. That bucketing is also what lets a result span a chain break: it
-* carries an entry per unit, which is what a range across two chains needs and
-* what a single unit-local entry cannot express.
-*
-* Whole residues are collected rather than one atom each, since the caller
-* frames the camera on the loci's bounding sphere and a lone atom would zoom
-* far closer than the residue warrants.
-*/
-function lociMatching(structure, matches) {
-	const location = StructureElement.Location.create(structure);
-	const elements = [];
-	for (const unit of structure.units) {
-		location.unit = unit;
-		const indices = [];
-		for (let i = 0; i < unit.elements.length; i++) {
-			location.element = unit.elements[i];
-			if (matches(location)) indices.push(i);
-		}
-		if (indices.length > 0) elements.push({
-			indices,
-			unit
-		});
-	}
-	if (elements.length === 0) return void 0;
-	return StructureElement.Loci(structure, elements.map(({ indices, unit }) => ({
-		indices: OrderedSet.ofSortedArray(indices),
-		unit
-	})));
+/** A set of chain ids as one comparable string. */
+function chainsKey(chains) {
+	return [...chains].sort().join("\0");
 }
 /**
-* Every atom of the residues a selection covers, within one structure.
+* Makes every chain outside `lit` transparent, or all of them opaque again when
+* nothing is lit.
 *
-* `hiddenChains` is subtracted from the result. A hidden chain is not drawn, so
-* geometry built from it would have nothing to sit on: Mol*'s focus
-* representation draws its own ball-and-stick from whatever is focused, in a
-* part of the state tree the chain's own visibility does not reach, and a
-* hidden chain left in the loci would keep showing up there after its cartoon
-* had gone.
-*/
-function lociForSelectionInStructure(structure, selection, hiddenChains) {
-	var _selection$residues, _selection$chains;
-	if (isEmptySelection(selection)) return void 0;
-	const residues = new Set((_selection$residues = selection.residues) !== null && _selection$residues !== void 0 ? _selection$residues : []);
-	const chains = new Set((_selection$chains = selection.chains) !== null && _selection$chains !== void 0 ? _selection$chains : []);
-	return lociMatching(structure, (location) => {
-		const chainId = StructureProperties.chain.auth_asym_id(location);
-		if (hiddenChains === null || hiddenChains === void 0 ? void 0 : hiddenChains.has(chainId)) return false;
-		return residues.has(StructureProperties.residue.key(location)) || chains.has(chainId);
-	});
-}
-/**
-* Every atom of one chain's polymer, in the first structure that has one.
+* Transparency layers accumulate, so what is already there is cleared before
+* the next chain is dimmed rather than added to - otherwise moving along the
+* list would leave every chain it passed dimmed behind it.
 *
-* The polymer alone, so pointing at a chain's name lights up the cartoon the
-* name is captioning. The ligands sitting on the chain belong to it but are
-* not what it is named for, and they are drawn by a representation of their
-* own.
+* False when there is no structure to write to yet, which is what a selection
+* arriving before the first load looks like. It is applied again after the load
+* rather than being taken as done.
 */
-function lociForChainPolymer(plugin, chainId) {
-	for (const entry of plugin.managers.structure.hierarchy.current.structures) {
-		var _entry$cell$obj;
-		const structure = (_entry$cell$obj = entry.cell.obj) === null || _entry$cell$obj === void 0 ? void 0 : _entry$cell$obj.data;
-		if (!structure) continue;
-		const loci = lociMatching(structure, (location) => StructureProperties.chain.auth_asym_id(location) === chainId && StructureProperties.entity.type(location) === "polymer");
-		if (loci) return loci;
-	}
+function dimChainsOutside(_x2, _x3) {
+	return _dimChainsOutside.apply(this, arguments);
 }
-/**
-* Every atom of the residues between two 0-based indices, inclusive.
-*
-* A contiguous span is tested by comparison rather than by expanding it into a
-* set of indices: this runs on every residue a drag crosses, and a drag can
-* span the whole structure.
-*/
-function lociForResidueRange(structure, min, max) {
-	return lociMatching(structure, (location) => {
-		const index = StructureProperties.residue.key(location);
-		return index >= min && index <= max;
+function _dimChainsOutside() {
+	_dimChainsOutside = _asyncToGenerator(function* (plugin, lit) {
+		const components = structureComponents(plugin);
+		if (components.length === 0) return false;
+		yield clearStructureTransparency(plugin, components);
+		if (lit.size === 0) return true;
+		const dimmed = components.filter((component) => {
+			const chainId = componentChainId(component);
+			return chainId !== void 0 && !lit.has(chainId);
+		});
+		if (dimmed.length === 0) return true;
+		yield setStructureTransparency(plugin, dimmed, CHAIN_DIM_TRANSPARENCY, function() {
+			var _ref = _asyncToGenerator(function* (structure) {
+				return Structure.toStructureElementLoci(structure);
+			});
+			return function(_x) {
+				return _ref.apply(this, arguments);
+			};
+		}());
+		return true;
 	});
+	return _dimChainsOutside.apply(this, arguments);
 }
 /**
-* The same, across every structure loaded into a plugin. Results are merged
-* into the first structure that matched: a loci belongs to one structure, and
-* the residue index space already spans them as though they were one.
-*/
-function lociForSelection(plugin, selection, hiddenChains) {
-	for (const entry of plugin.managers.structure.hierarchy.current.structures) {
-		var _entry$cell$obj2;
-		const structure = (_entry$cell$obj2 = entry.cell.obj) === null || _entry$cell$obj2 === void 0 ? void 0 : _entry$cell$obj2.data;
-		if (!structure) continue;
-		const loci = lociForSelectionInStructure(structure, selection, hiddenChains);
-		if (loci) return loci;
-	}
-}
-//#endregion
-//#region src/core/ProteinStructureViewer/hooks/useChainHighlight.ts
-/**
-* What a chain lights up in while its name is under the pointer.
+* Leaves one chain lit and dims the rest: the chain whose name is pointed at,
+* in the sequence panel's captions or the chain legend's rows, or the chain the
+* selection covers once the pointer has gone.
 *
-* Its own color rather than the theme's hover tint, because it answers a
-* different question. Hovering a residue asks "what is this?" and a tint is
-* enough; pointing at a chain's name asks "where is this chain?" of a
-* structure where the answer may be half the screen, and has to carry across
-* a cartoon already painted in the chain palette, in pLDDT bands, or in an
-* overlay. A saturated pink is in none of those, so it cannot be mistaken for
-* the structure's own coloring.
-*/
-const CHAIN_HIGHLIGHT_COLOR = Color.fromRgb(200, 45, 149);
-/**
-* Stronger than the residue hover's tint, for the same reason. A whole chain
-* washed in 20% pink reads as a rendering artifact; at this strength it reads
-* as deliberate.
-*/
-const CHAIN_HIGHLIGHT_STRENGTH = .7;
-/**
-* Lights up a whole chain in the 3D view while its name is pointed at, in the
-* sequence panel's captions or the chain legend's rows.
+* The chain left lit is exactly as it was - in the chain palette, in pLDDT
+* bands, or in an overlay - and the others recede around it. Nothing is painted
+* over the top, so what the reader is being pointed at is still the color the
+* legend beside it is describing, and a selected chain reads the same as a
+* hovered one rather than sprouting a highlight of its own.
 *
-* Mol*'s marking system is what draws it, so the chain is tinted and outlined
-* exactly as a hovered residue is, with no geometry added to the state tree
-* and nothing to tear down. Marking colors are a property of the renderer
-* rather than of the loci, though, so the pink is swapped in for the length of
-* the hover and the theme's own colors handed back on the way out.
+* A hover outranks the selection while it lasts, since pointing at a chain is a
+* question about that chain, and hands it back on the way out.
 *
-* Those colors are read off the canvas at that moment rather than passed in.
-* They are already derived from the theme in two places, and a third copy kept
-* in step by hand would be the one to drift.
-*/
-function useChainHighlight({ disabled, pluginRef }) {
-	const borrowedRef = useRef(null);
-	const highlightChain = useCallback((name) => {
-		var _borrowedRef$current;
-		const plugin = pluginRef.current;
-		const canvas3d = plugin === null || plugin === void 0 ? void 0 : plugin.canvas3d;
-		if (!plugin || !canvas3d) return;
-		const chainId = disabled ? null : name;
-		if (chainId === null) {
-			plugin.managers.interactivity.lociHighlights.clearHighlights();
-			const borrowed = borrowedRef.current;
-			if (borrowed) {
-				canvas3d.setProps({
-					marking: { highlightEdgeColor: borrowed.highlightEdgeColor },
-					renderer: {
-						highlightColor: borrowed.highlightColor,
-						highlightStrength: borrowed.highlightStrength
-					}
-				});
-				borrowedRef.current = null;
+* Dimming is a state-tree commit rather than a renderer setting, so it is
+* applied one at a time and coalesced: a pointer crossing the list faster than
+* a commit finishes skips the chains it passed over and settles on the one it
+* came to rest on, instead of working through a queue of hovers that have
+* already been left.
+*/
+function useChainHighlight({ disabled, hiddenChains, loadCount, pluginRef, selectedChains }) {
+	const hoveredRef = useRef(null);
+	/**
+	* The chains left lit on the canvas as it stands. A freshly loaded structure
+	* carries no dimming at all, which is what the empty key means.
+	*/
+	const shownRef = useRef(chainsKey(/* @__PURE__ */ new Set()));
+	const committingRef = useRef(false);
+	/**
+	* Read when a commit comes round rather than closed over, so one already in
+	* flight settles on the current props instead of the ones it started under.
+	*/
+	const propsRef = useRef({
+		disabled,
+		hiddenChains,
+		selectedChains
+	});
+	propsRef.current = {
+		disabled,
+		hiddenChains,
+		selectedChains
+	};
+	const litChains = useCallback(() => {
+		const { disabled: hoverOff, hiddenChains: hidden, selectedChains: selected } = propsRef.current;
+		const hovered = hoveredRef.current;
+		if (!hoverOff && hovered !== null && !hidden.has(hovered)) return new Set([hovered]);
+		return new Set([...selected].filter((chainId) => !hidden.has(chainId)));
+	}, []);
+	const settle = useCallback(_asyncToGenerator(function* () {
+		if (committingRef.current) return;
+		committingRef.current = true;
+		try {
+			while (pluginRef.current) {
+				const lit = litChains();
+				const key = chainsKey(lit);
+				if (key === shownRef.current) break;
+				if (!(yield dimChainsOutside(pluginRef.current, lit))) break;
+				shownRef.current = key;
 			}
-			return;
+		} catch (error) {
+			console.error("Failed to dim chains:", error);
+		} finally {
+			committingRef.current = false;
 		}
-		const loci = lociForChainPolymer(plugin, chainId);
-		if (!loci) return;
-		(_borrowedRef$current = borrowedRef.current) !== null && _borrowedRef$current !== void 0 || (borrowedRef.current = {
-			highlightColor: canvas3d.props.renderer.highlightColor,
-			highlightEdgeColor: canvas3d.props.marking.highlightEdgeColor,
-			highlightStrength: canvas3d.props.renderer.highlightStrength
-		});
-		canvas3d.setProps({
-			marking: { highlightEdgeColor: CHAIN_HIGHLIGHT_COLOR },
-			renderer: {
-				highlightColor: CHAIN_HIGHLIGHT_COLOR,
-				highlightStrength: CHAIN_HIGHLIGHT_STRENGTH
-			}
-		});
-		plugin.managers.interactivity.lociHighlights.highlightOnly({ loci });
-	}, [disabled, pluginRef]);
-	useEffect(() => () => void (borrowedRef.current = null), []);
+	}), [litChains, pluginRef]);
+	const highlightChain = useCallback((chainId) => {
+		hoveredRef.current = chainId;
+		settle();
+	}, [settle]);
+	useEffect(() => {
+		settle();
+	}, [
+		disabled,
+		hiddenChains,
+		selectedChains,
+		settle
+	]);
+	useEffect(() => {
+		shownRef.current = chainsKey(/* @__PURE__ */ new Set());
+		settle();
+	}, [loadCount, settle]);
 	return highlightChain;
 }
 //#endregion
@@ -2149,13 +2084,166 @@ function useResidueMarkers({ containerRef, residueColors, sequenceWrapper }) {
 	});
 }
 //#endregion
+//#region src/core/ProteinStructureViewer/utils/selection.ts
+/**
+* A stable string for a selection, for comparing one against another.
+*
+* A consumer holding the selection in state hands back a new object on every
+* render, so identity says nothing about whether the selection changed. Order
+* is normalized too: `{ residues: [2, 1] }` and `{ residues: [1, 2] }` select
+* the same residues and must not read as a change.
+*/
+function selectionKey(selection) {
+	var _selection$residues, _selection$chains;
+	const residues = [...new Set((_selection$residues = selection.residues) !== null && _selection$residues !== void 0 ? _selection$residues : [])].sort((a, b) => a - b);
+	return `${[...new Set((_selection$chains = selection.chains) !== null && _selection$chains !== void 0 ? _selection$chains : [])].sort().join(",")}|${residues.join(",")}`;
+}
+/** True when the selection names nothing at all. */
+function isEmptySelection(selection) {
+	var _selection$residues2, _selection$chains2;
+	if (!selection) return true;
+	return !((_selection$residues2 = selection.residues) === null || _selection$residues2 === void 0 ? void 0 : _selection$residues2.length) && !((_selection$chains2 = selection.chains) === null || _selection$chains2 === void 0 ? void 0 : _selection$chains2.length);
+}
+/**
+* The residues a selection covers, ascending and without repeats.
+*
+* Chains are expanded through `residuesByChain`, which was read off the loaded
+* structure, so a chain contributes exactly the residues it holds rather than
+* the span between its ends. A residue named directly and also carried by a
+* selected chain is counted once.
+*/
+function selectionResidues(selection, residuesByChain) {
+	var _selection$residues3, _selection$chains3;
+	const residues = new Set((_selection$residues3 = selection.residues) !== null && _selection$residues3 !== void 0 ? _selection$residues3 : []);
+	for (const chainId of (_selection$chains3 = selection.chains) !== null && _selection$chains3 !== void 0 ? _selection$chains3 : []) {
+		var _residuesByChain$get;
+		for (const index of (_residuesByChain$get = residuesByChain.get(chainId)) !== null && _residuesByChain$get !== void 0 ? _residuesByChain$get : []) residues.add(index);
+	}
+	return [...residues].sort((a, b) => a - b);
+}
+/**
+* Names a selection for the legend's readout.
+*
+* A single chain is named as one, since "Chain A" says more than the number of
+* residues it happens to hold. Anything else is reported as a count, which is
+* the only thing true of every shape a selection can take. A lone residue is
+* named by the caller instead, which reads it back off the structure to get its
+* three-letter code and the number the file gives it.
+*/
+function selectionLabel(selection, residueCount) {
+	var _selection$chains4, _selection$residues4;
+	const chains = (_selection$chains4 = selection.chains) !== null && _selection$chains4 !== void 0 ? _selection$chains4 : [];
+	if (chains.length === 1 && !((_selection$residues4 = selection.residues) === null || _selection$residues4 === void 0 ? void 0 : _selection$residues4.length)) return `Chain ${chains[0]}`;
+	return `${residueCount} residues`;
+}
+/** The mean of the values `read` returns, ignoring residues without one. */
+function meanOverResidues(residues, read) {
+	let sum = 0;
+	let count = 0;
+	for (const index of residues) {
+		const value = read(index);
+		if (value === null || value === void 0) continue;
+		sum += value;
+		count++;
+	}
+	return count === 0 ? null : sum / count;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/residueLoci.ts
+/**
+* Every atom the predicate accepts, as geometry Mol* can focus, frame and mark,
+* or undefined when it accepts none.
+*
+* One pass over the structure rather than a pass per residue: a whole-chain
+* selection names hundreds of residues, and resolving them one at a time would
+* walk the structure once for each.
+*
+* Atoms are bucketed by the unit they belong to because element indices are
+* unit-local. That bucketing is also what lets a result span a chain break: it
+* carries an entry per unit, which is what a range across two chains needs and
+* what a single unit-local entry cannot express.
+*
+* Whole residues are collected rather than one atom each, since the caller
+* frames the camera on the loci's bounding sphere and a lone atom would zoom
+* far closer than the residue warrants.
+*/
+function lociMatching(structure, matches) {
+	const location = StructureElement.Location.create(structure);
+	const elements = [];
+	for (const unit of structure.units) {
+		location.unit = unit;
+		const indices = [];
+		for (let i = 0; i < unit.elements.length; i++) {
+			location.element = unit.elements[i];
+			if (matches(location)) indices.push(i);
+		}
+		if (indices.length > 0) elements.push({
+			indices,
+			unit
+		});
+	}
+	if (elements.length === 0) return void 0;
+	return StructureElement.Loci(structure, elements.map(({ indices, unit }) => ({
+		indices: OrderedSet.ofSortedArray(indices),
+		unit
+	})));
+}
+/**
+* Every atom of the residues a selection covers, within one structure.
+*
+* `hiddenChains` is subtracted from the result. A hidden chain is not drawn, so
+* geometry built from it would have nothing to sit on: Mol*'s focus
+* representation draws its own ball-and-stick from whatever is focused, in a
+* part of the state tree the chain's own visibility does not reach, and a
+* hidden chain left in the loci would keep showing up there after its cartoon
+* had gone.
+*/
+function lociForSelectionInStructure(structure, selection, hiddenChains) {
+	var _selection$residues, _selection$chains;
+	if (isEmptySelection(selection)) return void 0;
+	const residues = new Set((_selection$residues = selection.residues) !== null && _selection$residues !== void 0 ? _selection$residues : []);
+	const chains = new Set((_selection$chains = selection.chains) !== null && _selection$chains !== void 0 ? _selection$chains : []);
+	return lociMatching(structure, (location) => {
+		const chainId = StructureProperties.chain.auth_asym_id(location);
+		if (hiddenChains === null || hiddenChains === void 0 ? void 0 : hiddenChains.has(chainId)) return false;
+		return residues.has(StructureProperties.residue.key(location)) || chains.has(chainId);
+	});
+}
+/**
+* Every atom of the residues between two 0-based indices, inclusive.
+*
+* A contiguous span is tested by comparison rather than by expanding it into a
+* set of indices: this runs on every residue a drag crosses, and a drag can
+* span the whole structure.
+*/
+function lociForResidueRange(structure, min, max) {
+	return lociMatching(structure, (location) => {
+		const index = StructureProperties.residue.key(location);
+		return index >= min && index <= max;
+	});
+}
+/**
+* The same, across every structure loaded into a plugin. Results are merged
+* into the first structure that matched: a loci belongs to one structure, and
+* the residue index space already spans them as though they were one.
+*/
+function lociForSelection(plugin, selection, hiddenChains) {
+	for (const entry of plugin.managers.structure.hierarchy.current.structures) {
+		var _entry$cell$obj;
+		const structure = (_entry$cell$obj = entry.cell.obj) === null || _entry$cell$obj === void 0 ? void 0 : _entry$cell$obj.data;
+		if (!structure) continue;
+		const loci = lociForSelectionInStructure(structure, selection, hiddenChains);
+		if (loci) return loci;
+	}
+}
+//#endregion
 //#region src/core/ProteinStructureViewer/utils/residueRef.ts
 /**
 * Reads the residue a loci points at, or null when it points at nothing the
 * viewer can address.
 *
 * `index` comes from Mol*'s residue key, which counts residues in file order
-* from zero and is the same counter `injectPlddtIntoPdb` walks. Deriving it
+* from zero and is the same counter `injectPlddt` walks. Deriving it
 * from the residue's *number* instead would tie it to how the file happens to
 * be numbered: a crop beginning at residue 200 would index `plddt` at 199, and
 * a file numbering each chain from 1 would give two residues the same index.
@@ -2939,32 +3027,6 @@ function neutralResidueColor(mode) {
 	return Color.fromRgb(g, g, g);
 }
 //#endregion
-//#region \0@oxc-project+runtime@0.134.0/helpers/esm/asyncToGenerator.js
-function asyncGeneratorStep(n, t, e, r, o, a, c) {
-	try {
-		var i = n[a](c), u = i.value;
-	} catch (n) {
-		e(n);
-		return;
-	}
-	i.done ? t(u) : Promise.resolve(u).then(r, o);
-}
-function _asyncToGenerator(n) {
-	return function() {
-		var t = this, e = arguments;
-		return new Promise(function(r, o) {
-			var a = n.apply(t, e);
-			function _next(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "next", n);
-			}
-			function _throw(n) {
-				asyncGeneratorStep(a, r, o, _next, _throw, "throw", n);
-			}
-			_next(void 0);
-		});
-	};
-}
-//#endregion
 //#region src/core/ProteinStructureViewer/utils/screenshot.ts
 /**
 * Each resolution as the Mol* preset that produces it: 1280x720, 1920x1080,
@@ -3303,6 +3365,25 @@ function focusResidue(plugin, loci) {
 	return clipRatio;
 }
 /**
+* Frames the camera on a loci without cropping anything around it.
+*
+* The counterpart to `focusResidue` for something meant to be read in context
+* rather than peeled down to: the camera fits what was selected, and the depth
+* clip is left open to the whole scene, so the rest of the structure stays on
+* screen. A selected chain is shown by dimming the chains around it, and they
+* have to be there to be dimmed.
+*/
+function frameLoci(plugin, loci) {
+	var _plugin$canvas3d2;
+	const camera = (_plugin$canvas3d2 = plugin.canvas3d) === null || _plugin$canvas3d2 === void 0 ? void 0 : _plugin$canvas3d2.camera;
+	if (!camera) return;
+	const sphere = Loci.getBoundingSphere(loci);
+	if (!sphere) return;
+	const framingRadius = Math.max(sphere.radius + FOCUS_EXTRA_RADIUS, FOCUS_MIN_RADIUS);
+	const snapshot = camera.getFocus(sphere.center, framingRadius);
+	camera.setState(_objectSpread2(_objectSpread2({}, snapshot), {}, { radius: camera.state.radiusMax }), FOCUS_DURATION_MS);
+}
+/**
 * Keeps the depth clip in sync with the zoom while a residue is focused.
 *
 * Mol*'s trackball zoom moves the camera without touching the clip radius, so
@@ -3312,15 +3393,15 @@ function focusResidue(plugin, loci) {
 * camera is mid-transition, so it does not fight the focus animation.
 */
 function syncClipToZoom(plugin, getClipRatio) {
-	var _plugin$canvas3d2;
-	const camera = (_plugin$canvas3d2 = plugin.canvas3d) === null || _plugin$canvas3d2 === void 0 ? void 0 : _plugin$canvas3d2.camera;
+	var _plugin$canvas3d3;
+	const camera = (_plugin$canvas3d3 = plugin.canvas3d) === null || _plugin$canvas3d3 === void 0 ? void 0 : _plugin$canvas3d3.camera;
 	const clipRatio = getClipRatio();
 	if (!camera || clipRatio === null || camera.transition.inTransition) return;
 	const radius = clipRadiusForDistance(Vec3.distance(camera.state.position, camera.state.target), clipRatio, camera.state.radiusMax);
 	if (Math.abs(camera.state.radius - radius) > CLIP_EPSILON) {
-		var _plugin$canvas3d3;
+		var _plugin$canvas3d4;
 		camera.setState({ radius });
-		(_plugin$canvas3d3 = plugin.canvas3d) === null || _plugin$canvas3d3 === void 0 || _plugin$canvas3d3.requestDraw();
+		(_plugin$canvas3d4 = plugin.canvas3d) === null || _plugin$canvas3d4 === void 0 || _plugin$canvas3d4.requestDraw();
 	}
 }
 //#endregion
@@ -3535,6 +3616,22 @@ function mergeMolstarSpec(base, override) {
 	return merged;
 }
 //#endregion
+//#region src/core/ProteinStructureViewer/utils/structureFormat.ts
+/** How much of the file to inspect when guessing the format. */
+const DETECT_SAMPLE = 16384;
+/**
+* Infers whether `text` is PDB or mmCIF (PDBx).
+*
+* mmCIF documents start with a `data_` block and name their coordinates
+* `_atom_site.`. PDB never does either, so either marker is enough. A leading
+* comment (`# ...`) before `data_` is still mmCIF.
+*/
+function detectStructureFormat(text) {
+	const sample = text.slice(0, DETECT_SAMPLE);
+	if (/(?:^|\n)\s*data_/.test(sample) || /_atom_site\./.test(sample)) return "mmcif";
+	return "pdb";
+}
+//#endregion
 //#region src/core/ProteinStructureViewer/utils/chainColorTheme.ts
 /** Mol* color theme name under which per-chain coloring is registered. */
 const CHAIN_COLOR_THEME_NAME = "chain-color";
@@ -3673,9 +3770,183 @@ function injectPlddtIntoPdb(pdbData, plddtValues) {
 		return paddedLine.substring(0, 60) + bfactorStr + paddedLine.substring(66);
 	}).join("\n");
 }
+const ATOM_SITE_PREFIX = "_atom_site.";
+const B_FACTOR_COLUMN = "B_iso_or_equiv";
+function skipCifWhitespace(line, index) {
+	let i = index;
+	while (i < line.length && /\s/.test(line.charAt(i))) i += 1;
+	return i;
+}
+function readCifToken(line, start) {
+	const quote = line.charAt(start);
+	if (quote === "'" || quote === "\"") {
+		const end = line.indexOf(quote, start + 1);
+		if (end < 0) return {
+			next: line.length,
+			token: line.slice(start + 1)
+		};
+		return {
+			next: end + 1,
+			token: line.slice(start + 1, end)
+		};
+	}
+	let i = start;
+	while (i < line.length && !/\s/.test(line.charAt(i))) i += 1;
+	return {
+		next: i,
+		token: line.slice(start, i)
+	};
+}
+/**
+* Splits one CIF line into tokens, honouring `'quoted'` and `"quoted"` values.
+* Atom-site rows are one line each in practice; multiline `;text;` fields are
+* not used there and are not handled.
+*/
+function tokenizeCifLine(line) {
+	const tokens = [];
+	let i = skipCifWhitespace(line, 0);
+	while (i < line.length) {
+		const { next, token } = readCifToken(line, i);
+		tokens.push(token);
+		i = skipCifWhitespace(line, next);
+	}
+	return tokens;
+}
+function isCifNull(value) {
+	return value === void 0 || value === "." || value === "?";
+}
+function columnIndex(columns, name) {
+	return columns.indexOf(name);
+}
+/**
+* Residue identity matching `injectPlddtIntoPdb`: chain + sequence number +
+* insertion code. Prefers the `auth_*` columns Mol* reports on the parsed
+* model, falling back to `label_*` when a file omitted them. `.` / `?`
+* insertion codes count as empty, the way a blank PDB column 27 does.
+*/
+function mmcifResidueKey(tokens, columns) {
+	var _ref, _ref2, _ref3, _ref4;
+	const authAsym = columnIndex(columns, "auth_asym_id");
+	const labelAsym = columnIndex(columns, "label_asym_id");
+	const authSeq = columnIndex(columns, "auth_seq_id");
+	const labelSeq = columnIndex(columns, "label_seq_id");
+	const ins = columnIndex(columns, "pdbx_PDB_ins_code");
+	return `${(_ref = (_ref2 = authAsym >= 0 ? tokens[authAsym] : void 0) !== null && _ref2 !== void 0 ? _ref2 : labelAsym >= 0 ? tokens[labelAsym] : void 0) !== null && _ref !== void 0 ? _ref : ""}|${(_ref3 = (_ref4 = authSeq >= 0 ? tokens[authSeq] : void 0) !== null && _ref4 !== void 0 ? _ref4 : labelSeq >= 0 ? tokens[labelSeq] : void 0) !== null && _ref3 !== void 0 ? _ref3 : ""}|${isCifNull(ins >= 0 ? tokens[ins] : void 0) ? "" : tokens[ins]}`;
+}
+function isAtomSiteRow(tokens, columns) {
+	const group = columnIndex(columns, "group_PDB");
+	if (group < 0) return true;
+	const value = tokens[group];
+	return value === "ATOM" || value === "HETATM";
+}
+function plddtBFactor(residueIndex, plddtValues) {
+	var _plddtValues$residueI2;
+	return (residueIndex < plddtValues.length ? ((_plddtValues$residueI2 = plddtValues[residueIndex]) !== null && _plddtValues$residueI2 !== void 0 ? _plddtValues$residueI2 : 0) * 100 : 50).toFixed(2);
+}
+function isLoopStart(line) {
+	return line.trim() === "loop_" || line.trim().startsWith("loop_");
+}
+function isAtomSiteColumn(line) {
+	return line.trim().startsWith(ATOM_SITE_PREFIX);
+}
+function endsAtomSiteLoop(line) {
+	const trimmed = line.trim();
+	if (trimmed === "") return false;
+	if (trimmed.startsWith("#")) return true;
+	if (isLoopStart(trimmed)) return true;
+	if (trimmed.startsWith("data_") || trimmed.startsWith("save_")) return true;
+	return trimmed.startsWith("_") && !trimmed.startsWith(ATOM_SITE_PREFIX);
+}
+function isAtomSiteLoop(lines, loopIndex) {
+	let peek = loopIndex + 1;
+	while (peek < lines.length && lines[peek].trim() === "") peek += 1;
+	return peek < lines.length && isAtomSiteColumn(lines[peek]);
+}
+function ensureBFactorColumn(columns, headerLines) {
+	const existing = columnIndex(columns, B_FACTOR_COLUMN);
+	if (existing >= 0) return existing;
+	columns.push(B_FACTOR_COLUMN);
+	headerLines.push(`${ATOM_SITE_PREFIX}${B_FACTOR_COLUMN}`);
+	return columns.length - 1;
+}
+function rewriteAtomSiteRow(dataLine, columns, bIndex, plddtValues, walk) {
+	if (dataLine.trim() === "") return dataLine;
+	const tokens = tokenizeCifLine(dataLine);
+	if (tokens.length === 0) return dataLine;
+	while (tokens.length < columns.length) tokens.push(".");
+	if (isAtomSiteRow(tokens, columns)) {
+		const residue = mmcifResidueKey(tokens, columns);
+		if (residue !== walk.lastResidue) {
+			walk.residueIndex += 1;
+			walk.lastResidue = residue;
+		}
+		tokens[bIndex] = plddtBFactor(walk.residueIndex, plddtValues);
+	}
+	return tokens.join(" ");
+}
+function rewriteAtomSiteLoop(lines, loopIndex, plddtValues, walk) {
+	const rows = [lines[loopIndex]];
+	let i = loopIndex + 1;
+	const columns = [];
+	while (i < lines.length && isAtomSiteColumn(lines[i])) {
+		columns.push(lines[i].trim().slice(11));
+		rows.push(lines[i]);
+		i += 1;
+	}
+	const bIndex = ensureBFactorColumn(columns, rows);
+	while (i < lines.length && !endsAtomSiteLoop(lines[i])) {
+		rows.push(rewriteAtomSiteRow(lines[i], columns, bIndex, plddtValues, walk));
+		i += 1;
+	}
+	return {
+		next: i,
+		rows
+	};
+}
+/**
+* Rewrites an mmCIF (PDBx) file's `_atom_site.B_iso_or_equiv` column with
+* pLDDT scores so Mol* can read them off the parsed model, the same way
+* `injectPlddtIntoPdb` rewrites the PDB B-factor column. Scores arrive on a
+* 0-1 scale and are stored on the conventional 0-100 one. Residues past the
+* end of `plddtValues` fall back to a mid-confidence 50.
+*
+* If the file has no B-factor column, one is appended to the atom-site loop
+* rather than leaving the scores behind.
+*/
+function injectPlddtIntoMmcif(mmcifData, plddtValues) {
+	const lines = mmcifData.split("\n");
+	const result = [];
+	const walk = {
+		lastResidue: "",
+		residueIndex: -1
+	};
+	let i = 0;
+	let rewrittenLoop = false;
+	while (i < lines.length) {
+		const line = lines[i];
+		if (!rewrittenLoop && isLoopStart(line) && isAtomSiteLoop(lines, i)) {
+			const rewritten = rewriteAtomSiteLoop(lines, i, plddtValues, walk);
+			result.push(...rewritten.rows);
+			i = rewritten.next;
+			rewrittenLoop = true;
+			continue;
+		}
+		result.push(line);
+		i += 1;
+	}
+	return result.join("\n");
+}
+/**
+* Rewrites a structure file's B-factors with pLDDT scores. Dispatches to
+* `injectPlddtIntoPdb` or `injectPlddtIntoMmcif` from `format`, or from
+* detecting the format of `data` when `format` is omitted.
+*/
+function injectPlddt(data, plddtValues, format = detectStructureFormat(data)) {
+	return format === "mmcif" ? injectPlddtIntoMmcif(data, plddtValues) : injectPlddtIntoPdb(data, plddtValues);
+}
 /**
 * Mol* color theme that reads pLDDT scores out of the B-factor column, paired
-* with `injectPlddtIntoPdb`. Registered per plugin instance.
+* with `injectPlddt`. Registered per plugin instance.
 */
 const PlddtColoring = CustomElementProperty.create({
 	coloring: {
@@ -3985,27 +4256,30 @@ const NOTHING_LOADED = {
 	residuesByChain: /* @__PURE__ */ new Map()
 };
 /**
-* Parses the PDB and draws each chain: a cartoon over its polymer, and
+* Parses the structure and draws each chain: a cartoon over its polymer, and
 * ball-and-stick over its ligands and ions.
 *
 * Mol*'s `default` hierarchy preset would be shorter, but it groups every
 * polymer chain into a single component, and a component is the unit Mol* can
 * hide. Building them per chain is what makes a chain individually hideable;
 * the refs handed back are what `setSubtreeVisibility` is later pointed at.
+*
+* The wrapper detects PDB vs mmCIF from the text; this just forwards that
+* guess to Mol*.
 */
 function loadStructure(_x9, _x10, _x11, _x12) {
 	return _loadStructure.apply(this, arguments);
 }
 function _loadStructure() {
-	_loadStructure = _asyncToGenerator(function* (plugin, pdbData, usePlddtColoring, showAxes) {
+	_loadStructure = _asyncToGenerator(function* (plugin, structureText, usePlddtColoring, showAxes) {
 		try {
 			var _plugin$canvas3d;
 			yield plugin.clear();
 			const data = yield plugin.builders.data.rawData({
-				data: pdbData,
+				data: structureText,
 				label: "Structure"
 			});
-			const trajectory = yield plugin.builders.structure.parseTrajectory(data, "pdb");
+			const trajectory = yield plugin.builders.structure.parseTrajectory(data, detectStructureFormat(structureText));
 			const model = yield plugin.builders.structure.createModel(trajectory);
 			const structure = yield plugin.builders.structure.createStructure(model, {
 				name: "model",
@@ -4079,16 +4353,17 @@ function _applyColorTheme() {
 *
 * The plugin is built once and then mutated in place. Creating it is expensive
 * and destroys the camera, so prop changes that Mol* can absorb (background,
-* axes, coloring, new PDB) are pushed in through the effects below and in the
-* sibling hooks rather than by rebuilding.
+* axes, coloring, new structure) are pushed in through the effects below and in
+* the sibling hooks rather than by rebuilding.
 */
-function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download, edgeColor, hasPlddt, hiddenChains, highlightColor, mode, molstarSpec, onChainHover, onChainSelect, onChainToggle, onResidueClick, onResidueHover, onSelectionChange, onSelectionClear, pdb, selectedChains, sequenceViewerBackgroundColor, showAxes, showSequenceViewer }) {
+function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download, edgeColor, hasPlddt, hiddenChains, highlightColor, mode, molstarSpec, onChainHover, onChainSelect, onChainToggle, onResidueClick, onResidueHover, onSelectionChange, onSelectionClear, selectedChains, sequenceViewerBackgroundColor, showAxes, showSequenceViewer, structure }) {
 	const pluginRef = useRef(null);
 	const residueValueThemeRef = useRef(null);
 	const chainColorThemeRef = useRef(null);
-	const currentPdbRef = useRef(null);
+	const currentStructureRef = useRef(null);
 	const [isReady, setIsReady] = useState(false);
 	const [chains, setChains] = useState([]);
+	const [loadCount, setLoadCount] = useState(0);
 	/**
 	* Where each chain's components live in the state tree, which is what the
 	* visibility effect points `setSubtreeVisibility` at. Rewritten by every
@@ -4145,6 +4420,7 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 		residuesByChainRef.current = loaded.residuesByChain;
 		applyChainVisibility(plugin, loaded.componentRefs, hiddenChainsRef.current);
 		setChains((prev) => chainsEqual(prev, loaded.chains) ? prev : loaded.chains);
+		setLoadCount((count) => count + 1);
 	}, []);
 	const onResidueClickRef = useRef(onResidueClick);
 	onResidueClickRef.current = onResidueClick;
@@ -4163,9 +4439,9 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 		highlightColor,
 		mode,
 		molstarSpec,
-		pdb,
 		showAxes,
-		showSequenceViewer
+		showSequenceViewer,
+		structure
 	});
 	initialPropsRef.current = {
 		backgroundColor,
@@ -4174,9 +4450,9 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 		highlightColor,
 		mode,
 		molstarSpec,
-		pdb,
 		showAxes,
-		showSequenceViewer
+		showSequenceViewer,
+		structure
 	};
 	/**
 	* The consumer's `canvas3d` overrides, keyed by content. Unlike the rest of
@@ -4231,8 +4507,8 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 					residueValueThemeRef.current = residueValueTheme;
 					chainColorThemeRef.current = chainColorTheme;
 					const latest = initialPropsRef.current;
-					const loaded = yield loadStructure(plugin, latest.pdb, latest.hasPlddt, latest.showAxes);
-					currentPdbRef.current = latest.pdb;
+					const loaded = yield loadStructure(plugin, latest.structure, latest.hasPlddt, latest.showAxes);
+					currentStructureRef.current = latest.structure;
 					adoptLoadedStructure(plugin, loaded);
 					/**
 					* Mol*'s click behavior is a BehaviorSubject, so subscribing replays
@@ -4294,7 +4570,7 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 			chainColorThemeRef.current = null;
 			componentRefsRef.current = /* @__PURE__ */ new Map();
 			residuesByChainRef.current = /* @__PURE__ */ new Map();
-			currentPdbRef.current = null;
+			currentStructureRef.current = null;
 			clipRatioRef.current = null;
 			setIsReady(false);
 		};
@@ -4353,16 +4629,16 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 	useEffect(() => {
 		const plugin = pluginRef.current;
 		if (!plugin || !isReady) return;
-		if (pdb === currentPdbRef.current) return;
-		currentPdbRef.current = pdb;
+		if (structure === currentStructureRef.current) return;
+		currentStructureRef.current = structure;
 		clipRatioRef.current = null;
 		lastHoverRef.current = null;
-		loadStructure(plugin, pdb, hasPlddt, showAxes).then((loaded) => {
+		loadStructure(plugin, structure, hasPlddt, showAxes).then((loaded) => {
 			if (pluginRef.current !== plugin) return;
 			adoptLoadedStructure(plugin, loaded);
 		});
 	}, [
-		pdb,
+		structure,
 		hasPlddt,
 		isReady,
 		adoptLoadedStructure
@@ -4376,6 +4652,7 @@ function useMolstarPlugin({ backgroundColor, chainColors, containerRef, download
 		chainColorThemeRef,
 		chains,
 		isReady,
+		loadCount,
 		pluginRef,
 		residuesByChainRef,
 		residueValueThemeRef,
@@ -4491,10 +4768,14 @@ function focusWithShell(plugin, loci, includeNeighbours, currentShell, pluginRef
 /**
 * Makes `selection` the one thing that decides where the camera sits.
 *
-* Setting the prop frames whatever it covers and marks it; clearing it drops
-* the focus and zooms back out. The camera frames the selection's bounding
-* sphere, so a range or a whole chain is fitted rather than approached as a
-* point - one residue is just the smallest case of that.
+* Setting the prop frames whatever it covers; clearing it drops the focus and
+* zooms back out. The camera frames the selection's bounding sphere, so a range
+* or a whole chain is fitted rather than approached as a point - one residue is
+* just the smallest case of that.
+*
+* Residues are also marked, which is what draws Mol*'s ball-and-stick and
+* outline over them. Whole chains are not: those are shown by dimming the
+* chains around them instead, in `useChainHighlight`.
 *
 * The click subscription only reports the selection it was given, so a click
 * moves the camera only once the consumer accepts it and echoes it back -
@@ -4503,6 +4784,7 @@ function focusWithShell(plugin, loci, includeNeighbours, currentShell, pluginRef
 * responds to a click whether or not the consumer wires the prop up.
 */
 function useSelectionFocus({ hiddenChains, isReady, pluginRef, selection, setClipRatio }) {
+	var _selection$chains, _selection$residues;
 	/**
 	* What this hook last pointed the camera at, as a key rather than the object
 	* itself: a consumer echoing a selection back builds a new object each time,
@@ -4527,6 +4809,11 @@ function useSelectionFocus({ hiddenChains, isReady, pluginRef, selection, setCli
 	* echoing an equal selection back from refocusing on every render.
 	*/
 	const focusKey = selection ? `${selectionKey(selection)}#${[...hiddenChains].sort().join(",")}` : null;
+	/**
+	* Whether the selection names chains and nothing else, which is the shape
+	* shown by dimming the chains around it rather than by focusing it.
+	*/
+	const chainsOnly = Boolean((selection === null || selection === void 0 || (_selection$chains = selection.chains) === null || _selection$chains === void 0 ? void 0 : _selection$chains.length) && !((_selection$residues = selection.residues) === null || _selection$residues === void 0 ? void 0 : _selection$residues.length));
 	useEffect(() => {
 		var _chosen$chains;
 		const plugin = pluginRef.current;
@@ -4547,6 +4834,12 @@ function useSelectionFocus({ hiddenChains, isReady, pluginRef, selection, setCli
 			clearFocus(plugin, setClipRatio, false);
 			return;
 		}
+		if (chainsOnly) {
+			plugin.managers.structure.focus.clear();
+			frameLoci(plugin, loci);
+			setClipRatio(null);
+			return;
+		}
 		return focusWithShell(plugin, loci, !((_chosen$chains = chosen.chains) === null || _chosen$chains === void 0 ? void 0 : _chosen$chains.length), neighbourhoodRef, pluginRef, setClipRatio);
 	}, [
 		focusKey,
@@ -4708,7 +5001,7 @@ const _excluded$1 = [
 	"onResidueClick",
 	"onResidueHover",
 	"onSelectionChange",
-	"pdb",
+	"structure",
 	"plddt",
 	"residueOverlay",
 	"selection",
@@ -4776,14 +5069,14 @@ function resolveScaleProps(overlay, hasPlddt) {
 }
 var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 	var _selection$chains;
-	const { backgroundColor, chainColors: chainColorOverrides, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, onChainVisibilityChange, onChainsChange, molstarSpec, onResidueClick, onResidueHover, onSelectionChange, pdb, plddt, residueOverlay, selection = null, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded$1);
+	const { backgroundColor, chainColors: chainColorOverrides, disableChainHighlightOnHover = false, download, hiddenChains: hiddenChainsProp, onChainVisibilityChange, onChainsChange, molstarSpec, onResidueClick, onResidueHover, onSelectionChange, structure, plddt, residueOverlay, selection = null, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded$1);
 	const theme = useTheme();
 	const mode = getMode({ theme });
 	const semanticColors = getSemanticColors({ theme });
 	const pluginMountRef = useRef(null);
 	const hasPlddt = Boolean(plddt && plddt.length > 0);
-	const processedPdb = useMemo(() => hasPlddt ? injectPlddtIntoPdb(pdb, plddt) : pdb, [
-		pdb,
+	const processedStructure = useMemo(() => hasPlddt ? injectPlddt(structure, plddt) : structure, [
+		structure,
 		plddt,
 		hasPlddt
 	]);
@@ -4830,13 +5123,14 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 		onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(isOnlyThisChain ? null : { chains: [chainId] });
 	}, [onSelectionChange, selection]);
 	/**
-	* Lights a chain up while its name is pointed at, in the legend or in the
-	* sequence panel's captions.
+	* Dims every other chain while a chain's name is pointed at, in the legend
+	* or in the sequence panel's captions, and leaves the selected chain lit
+	* once the pointer has gone.
 	*
-	* Reached through a ref because the two ends need each other: lighting a
-	* chain up takes the plugin, which the hook below creates, and that hook
-	* has to be handed the callback to give the captions it renders. This one
-	* is stable and forwards to whatever the highlight hook installs once
+	* Reached through a ref because the two ends need each other: dimming
+	* other chains takes the plugin, which the hook below creates, and that
+	* hook has to be handed the callback to give the captions it renders. This
+	* one is stable and forwards to whatever the highlight hook installs once
 	* there is a plugin for it to talk to.
 	*/
 	const highlightChainRef = useRef(() => void 0);
@@ -4850,7 +5144,7 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 		hiddenChains: hiddenChainsProp,
 		onChainVisibilityChange
 	});
-	const { chainColorThemeRef, chains: loadedChains, isReady, pluginRef, residuesByChainRef, residueValueThemeRef, setClipRatio } = useMolstarPlugin({
+	const { chainColorThemeRef, chains: loadedChains, isReady, loadCount, pluginRef, residuesByChainRef, residueValueThemeRef, setClipRatio } = useMolstarPlugin({
 		backgroundColor: bgColor,
 		chainColors,
 		containerRef: pluginMountRef,
@@ -4868,15 +5162,18 @@ var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
 		onResidueHover: handleResidueHover,
 		onSelectionChange,
 		onSelectionClear: handleSelectionClear,
-		pdb: processedPdb,
 		selectedChains,
 		sequenceViewerBackgroundColor,
 		showAxes,
-		showSequenceViewer
+		showSequenceViewer,
+		structure: processedStructure
 	});
 	highlightChainRef.current = useChainHighlight({
 		disabled: disableChainHighlightOnHover,
-		pluginRef
+		hiddenChains,
+		loadCount,
+		pluginRef,
+		selectedChains
 	});
 	useEffect(() => {
 		setChains(loadedChains);
@@ -5421,4 +5718,4 @@ const StackedBarChart = (props) => {
 	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(StyledBadge, { children: displayBadge })] }), chartContent] }));
 };
 //#endregion
-export { DOWNLOAD_RESOLUTIONS, HeatmapChart_default as HeatmapChart, PLASMA_COLOR_SCALE, PLDDT_COLOR_SCALE, ProteinStructureViewer_default as ProteinStructureViewer, StackedBarChart, injectPlddtIntoPdb, sampleColorScale, toCssGradient };
+export { DOWNLOAD_RESOLUTIONS, HeatmapChart_default as HeatmapChart, PLASMA_COLOR_SCALE, PLDDT_COLOR_SCALE, ProteinStructureViewer_default as ProteinStructureViewer, StackedBarChart, detectStructureFormat, injectPlddt, injectPlddtIntoMmcif, injectPlddtIntoPdb, sampleColorScale, toCssGradient };