@czi-sds/data-viz 2.3.0 → 2.4.0

package/dist/shared/ProteinStructureViewer.esm.js

@@ -0,0 +1,4728 @@
+"use client";
+import { n as _objectWithoutProperties, t as _objectSpread2 } from "./objectSpread2.esm.js";
+import { i as toCssGradient, n as sampleColorScale, r as sampleSteppedScale, t as PLASMA_COLOR_SCALE } from "./colorScales.esm.js";
+import { Fragment, createContext, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
+import styled from "@emotion/styled";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Theme, Tooltip, defaultTheme, fontBodyXs, fontBodyXxxs, fontCodeXs, fontHeaderM, 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 { 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";
+import { PluginBehaviors } from "molstar/lib/mol-plugin/behavior";
+import { setSubtreeVisibility } from "molstar/lib/mol-plugin/behavior/static/state";
+import { PluginConfig } from "molstar/lib/mol-plugin/config";
+import { Representation } from "molstar/lib/mol-repr/representation";
+import { BehaviorSubject, Subject } from "rxjs";
+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";
+import { StateSelection } from "molstar/lib/mol-state/state/selection";
+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";
+import { elementLabel } from "molstar/lib/mol-theme/label";
+import { MolScriptBuilder } from "molstar/lib/mol-script/language/builder";
+import { CustomElementProperty } from "molstar/lib/mol-model-props/common/custom-element-property";
+import { StructureFocusRepresentation } from "molstar/lib/mol-plugin/behavior/dynamic/selection/structure-focus-representation";
+//#region src/core/ProteinStructureViewer/components/ChainLegend/style.ts
+/** Opacity applied to a hidden chain's row, so it reads as off but reachable. */
+const HIDDEN_OPACITY = .4;
+/** Side of the color swatch. */
+const SWATCH_SIZE = 8;
+/**
+* The rows, stacked and right-aligned against the color key beside them.
+*
+* Pointer events are switched back on here: the legend overlay turns them off
+* so drags meant for the structure are not intercepted, and this is one of the
+* two places in it that has to be clickable.
+*/
+const ChainRowList = styled("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  pointer-events: auto;
+  max-height: 80px;
+  overflow-y: auto;
+`;
+const ChainRow = styled("div")`
+  display: flex;
+  align-items: center;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
+    `;
+}}
+`;
+const ChainSwatch = styled("div")`
+  flex: none;
+  width: ${SWATCH_SIZE}px;
+  height: ${SWATCH_SIZE}px;
+  border-radius: 1px;
+
+  ${(props) => `
+    background-color: ${props.swatchColor};
+    opacity: ${props.isHidden ? HIDDEN_OPACITY : 1};
+  `}
+`;
+/**
+* A swatch quartered into a grid, for a coloring no single color stands for.
+*
+* Occupies the same box as the solid swatch so the rows stay aligned whichever
+* one a chain gets, with a hairline gap between the quadrants to read as four
+* colors rather than one blurred square.
+*/
+const ChainSwatchGrid = styled("div")`
+  flex: none;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-template-rows: repeat(2, 1fr);
+  gap: 0px;
+  width: ${SWATCH_SIZE}px;
+  height: ${SWATCH_SIZE}px;
+  border-radius: 1px;
+  overflow: hidden;
+
+  ${(props) => `
+    opacity: ${props.isHidden ? HIDDEN_OPACITY : 1};
+  `}
+`;
+const ChainSwatchQuadrant = styled("div")`
+  ${(props) => `
+    background-color: ${props.swatchColor};
+  `}
+`;
+/**
+* Selects the whole chain, or clears it when it is already the selection. A
+* button so it is reachable from the keyboard.
+*/
+const ChainLabel$1 = styled("button")`
+  ${fontBodyXxxs}
+
+  padding: 0;
+  border: none;
+  background: none;
+
+  ${(props) => {
+	var _semanticColors$base, _semanticColors$base2, _semanticColors$base3;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textSecondary};
+      cursor: ${props.isHidden ? "default" : "pointer"};
+      font-weight: ${props.isSelected ? 600 : "inherit"};
+      opacity: ${props.isHidden ? HIDDEN_OPACITY : 1};
+
+      &:hover {
+        color: ${props.isHidden ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textSecondary : semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textPrimary};
+      }
+    `;
+}}
+`;
+const VisibilityToggle = styled("button")`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+  margin-top: 1px;
+
+  ${(props) => {
+	var _semanticColors$base4, _semanticColors$base5;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.textTertiaryOnDark};
+
+      &:hover {
+        color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.textPrimary};
+      }
+
+      svg {
+        display: block;
+      }
+    `;
+}}
+`;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/ChainLegend/index.tsx
+/**
+* Lists the structure's chains, each with its color and a visibility toggle.
+*
+* Only drawn for a complex: one chain needs no key to tell it from anything,
+* and hiding it would leave an empty canvas with no way back. Its home is the
+* legend rather than the sequence panel so that it survives
+* `showSequenceViewer={false}`, where the chains would otherwise have nowhere
+* to be listed.
+*/
+function ChainLegend({ bandColors, chainColors, chains, hiddenChains, onChainHover, onChainSelect, onChainToggle, selectedChains }) {
+	if (chains.length < 2) return null;
+	return /* @__PURE__ */ jsx(ChainRowList, { children: chains.map((chain) => {
+		var _selectedChains$has;
+		const hidden = hiddenChains.has(chain.chainId);
+		const selected = (_selectedChains$has = selectedChains === null || selectedChains === void 0 ? void 0 : selectedChains.has(chain.chainId)) !== null && _selectedChains$has !== void 0 ? _selectedChains$has : false;
+		const color = chainColors === null || chainColors === void 0 ? void 0 : chainColors.get(chain.chainId);
+		return /* @__PURE__ */ jsxs(ChainRow, {
+			onBlur: () => onChainHover === null || onChainHover === void 0 ? void 0 : onChainHover(null),
+			onFocus: () => onChainHover === null || onChainHover === void 0 ? void 0 : onChainHover(chain.chainId),
+			onMouseEnter: () => onChainHover === null || onChainHover === void 0 ? void 0 : onChainHover(chain.chainId),
+			onMouseLeave: () => onChainHover === null || onChainHover === void 0 ? void 0 : onChainHover(null),
+			children: [
+				/* @__PURE__ */ jsx(Tooltip, {
+					arrow: true,
+					placement: "top",
+					disableInteractive: true,
+					title: hidden ? `Chain ${chain.label} is hidden` : `Click to ${selected ? "deselect" : "select"} Chain ${chain.label}`,
+					children: /* @__PURE__ */ jsxs(ChainLabel$1, {
+						"aria-pressed": selected,
+						disabled: hidden,
+						isHidden: hidden,
+						isSelected: selected,
+						onClick: () => onChainSelect(chain.chainId),
+						type: "button",
+						children: ["Chain ", chain.label]
+					})
+				}),
+				color !== void 0 && /* @__PURE__ */ jsx(ChainSwatch, {
+					isHidden: hidden,
+					swatchColor: color
+				}),
+				color === void 0 && bandColors !== void 0 && /* @__PURE__ */ jsx(ChainSwatchGrid, {
+					isHidden: hidden,
+					children: bandColors.map((band) => /* @__PURE__ */ jsx(ChainSwatchQuadrant, { swatchColor: band }, band))
+				}),
+				/* @__PURE__ */ jsx(Tooltip, {
+					arrow: true,
+					placement: "top",
+					disableInteractive: true,
+					title: hidden ? `Show Chain ${chain.label}` : `Hide Chain ${chain.label}`,
+					children: /* @__PURE__ */ jsx(VisibilityToggle, {
+						"aria-label": `${hidden ? "Show" : "Hide"} chain ${chain.label}`,
+						"aria-pressed": hidden,
+						onClick: () => onChainToggle(chain.chainId),
+						type: "button",
+						children: hidden ? /* @__PURE__ */ jsx(EyeSlashIcon, { size: 12 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 12 })
+					})
+				})
+			]
+		}, chain.chainId);
+	}) });
+}
+/** Height of the color bar itself. */
+const BAR_HEIGHT = 8;
+/**
+* Inset applied to the outer tick labels on a stepped scale. Labels sit on the
+* boundaries *between* bands, so the row is padded by half a band to line each
+* label up with its boundary rather than with a band's center.
+*/
+const STEPPED_LABEL_INSET = 5;
+const LegendWrapper = styled("div")`
+  width: ${142}px;
+`;
+const LegendLabels = styled("div")`
+  ${fontBodyXxxs}
+
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+
+  ${(props) => {
+	var _semanticColors$base;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textTertiaryOnDark};
+    `;
+}}
+`;
+const SteppedLabels = styled(LegendLabels)`
+  &::before,
+  &::after {
+    content: "";
+    width: ${STEPPED_LABEL_INSET}px;
+  }
+`;
+const LegendBar = styled("div")`
+  display: flex;
+  height: ${BAR_HEIGHT}px;
+  width: 100%;
+`;
+const LegendBand = styled("div")`
+  flex: 1;
+  background-color: ${(props) => props.color};
+`;
+const LegendGradient = styled("div")`
+  height: ${BAR_HEIGHT}px;
+  width: 100%;
+  background: ${(props) => props.gradient};
+`;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/ColorScaleLegend/index.tsx
+/** Decimal places used for the ticks on a continuous scale. */
+const TICK_PRECISION = 2;
+/**
+* The color key beneath the structure viewer. A stepped scale renders as
+* discrete bands with a tick at each boundary; a continuous scale renders as a
+* gradient running from `min` to `max`, the range its values are normalized
+* into before they are sampled.
+*/
+function ColorScaleLegend({ max = null, min = 0, scale }) {
+	if (scale.kind === "stepped") return /* @__PURE__ */ jsxs(LegendWrapper, { children: [/* @__PURE__ */ jsx(SteppedLabels, { children: scale.stops.slice(0, -1).map((stop) => /* @__PURE__ */ jsx("div", { children: stop.label }, stop.label)) }), /* @__PURE__ */ jsx(LegendBar, { children: scale.stops.map((stop) => /* @__PURE__ */ jsx(LegendBand, { color: stop.color }, stop.label)) })] });
+	return /* @__PURE__ */ jsxs(LegendWrapper, { children: [/* @__PURE__ */ jsxs(LegendLabels, { children: [/* @__PURE__ */ jsx("div", { children: min.toFixed(TICK_PRECISION) }), /* @__PURE__ */ jsx("div", { children: max !== null ? max.toFixed(TICK_PRECISION) : "" })] }), /* @__PURE__ */ jsx(LegendGradient, { gradient: toCssGradient(scale.stops) })] });
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/style.ts
+/** Smallest box in which Mol* can still lay out a usable viewport. */
+const MIN_HEIGHT = 190;
+const MIN_WIDTH = 200;
+/**
+* Name of the size container the root declares below, which is what lets the
+* sequence panel and the legend reflow to the viewer's own width rather than
+* the page's.
+*/
+const VIEWER_CONTAINER_NAME = "sds-structure-viewer";
+/**
+* Height reserved for the sequence panel along the bottom, and the viewer
+* width above which it grows. Measured against the container above rather than
+* the page, so a viewer embedded in a wider page sizes to the room it has.
+*
+* The legend sits directly on top of the panel and offsets itself by these
+* same three values, so it reads them from here rather than restating them.
+* Copies that drifted would leave the legend floating off the panel.
+*/
+const SEQUENCE_HEIGHT = "max(104px, 30%)";
+const SEQUENCE_HEIGHT_WIDE = "max(134px, 32%)";
+/**
+* The element Mol* mounts into.
+*
+* This has to be its own node rather than the root: Mol* takes ownership of its
+* target and replaces whatever is in it, so anything the viewer renders
+* alongside the plugin (the legend) has to be a sibling of this, not a child.
+*/
+const PluginMount = styled("div")`
+  position: absolute;
+  inset: 0;
+`;
+/**
+* Root container for the viewer.
+*
+* Mol* ships no stylesheet of its own here: the viewport and sequence panel are
+* replaced with custom components and the remaining chrome is hidden, so all
+* that is left to style is the layout scaffolding. Those overrides are nested
+* below rather than declared globally, so consumers do not have to import
+* anything extra and two viewers on a page cannot fight over the same
+* selectors.
+*
+* The element also declares itself a size container, which is what lets the
+* legend reflow to the viewer's own width instead of the page's.
+*/
+const ViewerRoot = styled("div")`
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+  min-width: ${MIN_WIDTH}px;
+  min-height: ${MIN_HEIGHT}px;
+  container-type: inline-size;
+  container-name: ${VIEWER_CONTAINER_NAME};
+
+  .msp-plugin {
+    position: absolute !important;
+    inset: 0 !important;
+    width: 100% !important;
+    height: 100% !important;
+  }
+
+  /*
+   * The expanded layout is kept hidden because it is the one piece of Mol*
+   * chrome that would escape this container: it takes the plugin out of the
+   * box it was given and over the page.
+   *
+   * Its neighbours used to be here too - the viewport's icon column, and the
+   * left, right and bottom regions. They are not any more, because hiding them
+   * from here made them unreachable: Mol* already gates each of them behind a
+   * PluginConfig.Viewport flag and behind layout.initial.regionState, both of
+   * which a consumer can set through molstarSpec, and a display:none on top of
+   * that overrode the answer. None of them shows by default - the viewer's own
+   * flags and region state are what keep them away - so this only has to stay
+   * out of their way.
+   *
+   * No backticks in here: this is inside a template literal, and one would end
+   * it.
+   */
+  .msp-plugin .msp-layout-expanded {
+    display: none !important;
+  }
+
+  .msp-plugin canvas {
+    display: block !important;
+  }
+
+  .msp-plugin .msp-layout-static {
+    height: 100%;
+  }
+
+  .msp-plugin .msp-sequence-wrapper-non-empty {
+    overflow-y: auto;
+  }
+
+  /*
+   * Mol* puts the sequence panel in its "top" region; move it to the bottom and
+   * shrink the main viewport region to match, so the structure sits above the
+   * sequence rather than behind it. The panel grows on wider viewers, and the
+   * viewport region's offset follows it.
+   */
+  ${(props) => {
+	const { showSequenceViewer } = props;
+	return `
+      .msp-plugin .msp-layout-region.msp-layout-top {
+        display: ${showSequenceViewer ? "block" : "none"} !important;
+        position: absolute !important;
+        inset: auto 0 0 0 !important;
+        height: ${SEQUENCE_HEIGHT} !important;
+      }
+
+      .msp-plugin .msp-layout-region.msp-layout-main {
+        position: absolute !important;
+        top: 0 !important;
+        left: 0 !important;
+        right: 0 !important;
+        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"} !important;
+      }
+
+      @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
+        .msp-plugin .msp-layout-region.msp-layout-top {
+          height: ${SEQUENCE_HEIGHT_WIDE} !important;
+        }
+
+        .msp-plugin .msp-layout-region.msp-layout-main {
+          bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"} !important;
+        }
+      }
+    `;
+}}
+
+  /*
+   * Toast slot rendered by the custom viewport. No loci label providers are
+   * registered (residue info goes to the legend instead), so this only carries
+   * Mol*'s own transient messages.
+   */
+  .msp-plugin .msp-highlight-toast-wrapper {
+    position: absolute !important;
+    left: 10px !important;
+    max-width: 95% !important;
+    z-index: 10000 !important;
+    pointer-events: none;
+  }
+`;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/StructureLegend/style.ts
+/** Width below which the legend switches to its stacked layout. */
+const NARROW_BREAKPOINT = 480;
+/** Fixed stat column width, so labels swapping on hover never shift the grid. */
+const STAT_COLUMN_WIDTH = "4.5rem";
+/**
+* Overlaid along the bottom of the viewer, above the sequence panel. Its bottom
+* offset is the panel's own height, taken from the root style so the two cannot
+* disagree; with no panel it drops to the bottom edge, where its own padding
+* provides the gap. Pointer events are off so the legend never intercepts drags
+* meant for the structure; the help tooltip re-enables them on itself.
+*/
+const LegendOverlay = styled("div")`
+  position: absolute;
+  z-index: 1;
+  display: flex;
+  align-items: flex-end;
+  width: 100%;
+  pointer-events: none;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	const { showSequenceViewer } = props;
+	return `
+      right: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
+      padding-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT : "0"};
+
+      /*
+       * Track the sequence panel as it grows on wider viewers. The panel is
+       * sized against this same container, so answering to the page instead
+       * would part the legend from it on a viewer narrower than its page.
+       */
+      @container ${VIEWER_CONTAINER_NAME} (min-width: 880px) {
+        bottom: ${showSequenceViewer ? SEQUENCE_HEIGHT_WIDE : "0"};
+      }
+
+      /* Spacer balancing the axes widget pinned in the opposite corner. */
+      &::before {
+        content: "";
+        display: block;
+        width: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxl}px;
+      }
+
+      @container ${VIEWER_CONTAINER_NAME} (max-width: ${NARROW_BREAKPOINT}px) {
+        width: auto;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+
+        /* The horizontal spacer only makes sense in the bottom-bar layout. */
+        &::before {
+          display: none;
+        }
+      }
+    `;
+}}
+`;
+/**
+* Fills the space between the axes widget on the left and the color legend on
+* the right. Three fixed-width columns distributed with space-evenly, so the
+* side padding equals the inter-column gap and both flex with the viewer width.
+*/
+const StatsGrid = styled("div")`
+  display: grid;
+  flex: 1;
+  grid-template-columns: repeat(3, ${STAT_COLUMN_WIDTH});
+  align-items: end;
+  justify-content: space-evenly;
+  white-space: nowrap;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      @container ${VIEWER_CONTAINER_NAME} (max-width: ${NARROW_BREAKPOINT}px) {
+        flex: none;
+        grid-template-columns: minmax(0, 1fr);
+        justify-items: end;
+        text-align: right;
+        row-gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xl}px;
+      }
+    `;
+}}
+`;
+const ChainScaleColumn = styled("div")`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+    `;
+}}
+`;
+const StatColumnWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+const StatValue = styled("span")`
+  ${fontBodyXxxs}
+
+  ${(props) => {
+	var _semanticColors$base;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.textPrimary};
+    `;
+}}
+`;
+const StatLabel = styled("span")`
+  ${fontBodyXxxs}
+
+  ${(props) => {
+	var _semanticColors$base2;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textTertiaryOnDark};
+    `;
+}}
+`;
+const ScaleColumn = styled("div")`
+  display: flex;
+  flex-direction: column;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
+    `;
+}}
+`;
+/**
+* A wrapping text line, not a flex row: the help icon has to sit at the end of
+* the last line of the caption rather than beside the whole wrapped block.
+*/
+const ScaleCaption = styled("span")`
+  ${fontBodyXxxs}
+
+  display: block;
+  text-align: left;
+
+  ${(props) => {
+	var _semanticColors$base3;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textTertiaryOnDark};
+      max-width: 142px;
+    `;
+}}
+`;
+/** Re-enables pointer events for the one interactive element in the overlay. */
+const TooltipAnchor = styled("span")`
+  pointer-events: auto;
+
+  ${(props) => {
+	var _semanticColors$base4;
+	const spaces = getSpaces(props);
+	const semanticColors = getSemanticColors(props);
+	return `
+      display: inline-block;
+      padding-left: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+      margin-bottom: 1px;
+      vertical-align: text-bottom;
+
+      &:hover {
+        color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentSecondary};
+      }
+
+      svg {
+        display: block;
+      }
+    `;
+}}
+`;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/StructureLegend/index.tsx
+/** Number of stat columns, fixed so the grid tracks never move. */
+const SLOT_COUNT = 3;
+/** Decimal places for stat and readout values. */
+const VALUE_PRECISION = 3;
+/** Shown in place of a number the residue has none of. */
+const MISSING_VALUE = "–";
+function StatColumn({ label, value }) {
+	return /* @__PURE__ */ jsxs(StatColumnWrapper, { children: [/* @__PURE__ */ jsx(StatValue, { children: value }), /* @__PURE__ */ jsx(StatLabel, { children: label })] });
+}
+/**
+* Builds one readout slot.
+*
+* A readout covering several residues reports a mean, and the label says so:
+* calling it "pLDDT" while it averages ninety of them would read as a single
+* residue's score.
+*/
+function readoutSlot(label, value, residueCount) {
+	return {
+		label: residueCount > 1 ? `Mean ${label}` : label,
+		value: value !== null ? value.toFixed(VALUE_PRECISION) : MISSING_VALUE
+	};
+}
+/**
+* Stats and color key overlaid on the structure viewer.
+*
+* When a residue is selected or hovered, the whole-structure stats are replaced
+* in place by that residue's readout: slot 0 becomes the residue label, slot 1
+* the overlay value (only when an overlay is active, otherwise the stat stays),
+* and slot 2 the residue pLDDT. A selection pins the readout; hovering another
+* residue takes priority so the user can inspect others without losing their
+* selection.
+*/
+function StructureLegend({ chainBandColors, chainColors, chains = [], hiddenChains, hoveredResidue = null, onChainHover, onChainSelect, onChainToggle, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, scaleTooltipProps, selectedChains, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+	var _activeResidue$residu, _stats$, _stats$2, _stats$3;
+	const activeResidue = hoveredResidue !== null && hoveredResidue !== void 0 ? hoveredResidue : selectedResidue;
+	const showResidue = activeResidue !== null;
+	const showValue = showResidue && valueLabel !== void 0;
+	const residueCount = (_activeResidue$residu = activeResidue === null || activeResidue === void 0 ? void 0 : activeResidue.residueCount) !== null && _activeResidue$residu !== void 0 ? _activeResidue$residu : 1;
+	const slots = [
+		showResidue ? {
+			label: residueCount > 1 ? "Selection" : "Residue",
+			value: activeResidue.label
+		} : (_stats$ = stats[0]) !== null && _stats$ !== void 0 ? _stats$ : null,
+		showValue ? readoutSlot(valueLabel, activeResidue.value, residueCount) : (_stats$2 = stats[1]) !== null && _stats$2 !== void 0 ? _stats$2 : null,
+		showResidue ? readoutSlot("pLDDT", activeResidue.plddt, residueCount) : (_stats$3 = stats[2]) !== null && _stats$3 !== void 0 ? _stats$3 : null
+	];
+	return /* @__PURE__ */ jsxs(LegendOverlay, {
+		showSequenceViewer,
+		children: [/* @__PURE__ */ jsx(StatsGrid, { children: Array.from({ length: SLOT_COUNT }, (_, i) => {
+			var _slots$i;
+			const slot = (_slots$i = slots[i]) !== null && _slots$i !== void 0 ? _slots$i : null;
+			return slot ? /* @__PURE__ */ jsx(StatColumn, {
+				label: slot.label,
+				value: slot.value
+			}, i) : /* @__PURE__ */ jsx("div", {}, i);
+		}) }), /* @__PURE__ */ jsxs(ChainScaleColumn, { children: [onChainToggle && onChainSelect && /* @__PURE__ */ jsx(ChainLegend, {
+			bandColors: chainBandColors,
+			chainColors,
+			chains,
+			hiddenChains: hiddenChains !== null && hiddenChains !== void 0 ? hiddenChains : /* @__PURE__ */ new Set(),
+			onChainHover,
+			onChainSelect,
+			onChainToggle,
+			selectedChains
+		}), scale && /* @__PURE__ */ jsxs(ScaleColumn, { children: [/* @__PURE__ */ jsx(ColorScaleLegend, {
+			max: scaleMax,
+			min: scaleMin,
+			scale
+		}), /* @__PURE__ */ jsxs(ScaleCaption, { children: [scaleLabel, (scaleTooltip !== void 0 || scaleTooltipProps !== void 0) && /* @__PURE__ */ jsx(Tooltip, _objectSpread2(_objectSpread2({
+			arrow: true,
+			placement: "bottom"
+		}, scaleTooltipProps), {}, {
+			title: scaleTooltip !== null && scaleTooltip !== void 0 ? scaleTooltip : scaleTooltipProps === null || scaleTooltipProps === void 0 ? void 0 : scaleTooltipProps.title,
+			children: /* @__PURE__ */ jsx(TooltipAnchor, { children: /* @__PURE__ */ jsx(QuestionIcon, {
+				size: 10,
+				weight: "bold"
+			}) })
+		}))] })] })] })]
+	});
+}
+//#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/hooks/useChainHighlight.ts
+/**
+* How transparent the other chains go while one is pointed at.
+*
+* 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.
+*/
+const CHAIN_DIM_TRANSPARENCY = .65;
+/**
+* The chain id in a component key.
+*
+* 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`.
+*/
+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];
+}
+/** Every chain component of every loaded structure, polymers and ligands. */
+function structureComponents(plugin) {
+	return plugin.managers.structure.hierarchy.current.structures.flatMap((entry) => entry.components);
+}
+/** A set of chain ids as one comparable string. */
+function chainsKey(chains) {
+	return [...chains].sort().join("\0");
+}
+/**
+* Makes every chain outside `lit` transparent, or all of them opaque again when
+* nothing is lit.
+*
+* 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.
+*
+* 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 dimChainsOutside(_x2, _x3) {
+	return _dimChainsOutside.apply(this, arguments);
+}
+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);
+}
+/**
+* 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.
+*
+* 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.
+*
+* 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.
+*
+* 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;
+			}
+		} catch (error) {
+			console.error("Failed to dim chains:", error);
+		} finally {
+			committingRef.current = false;
+		}
+	}), [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
+//#region src/common/chainColors.ts
+/**
+* Default colors for telling chains apart, in assignment order.
+*
+* The Okabe-Ito qualitative palette, which is built to stay distinguishable
+* under every common form of color blindness - the reason to prefer it over a
+* hand-picked set, since a complex is read by which chain is which and a
+* viewer that collapses two of them into one color stops answering that.
+*
+* Its black is left out: the canvas inverts with the theme, so a chain painted
+* black would vanish against the dark background. The rest carry enough
+* lightness to hold up against both.
+*
+* Chains past the end of the palette wrap around to the start.
+*/
+const CHAIN_COLOR_PALETTE = [
+	"#009E73",
+	"#0072B2",
+	"#E69F00",
+	"#CC79A7",
+	"#56B4E9",
+	"#D55E00",
+	"#F0E442"
+];
+/**
+* Assigns each chain a color, in the order given, with `overrides` taking
+* precedence by `chainId`.
+*
+* Palette positions are spent on every chain whether or not it is overridden,
+* so overriding one chain does not shift the colors of the others.
+*/
+function chainColorMap(chainIds, overrides) {
+	const colors = /* @__PURE__ */ new Map();
+	chainIds.forEach((chainId, i) => {
+		var _overrides$chainId;
+		const fallback = CHAIN_COLOR_PALETTE[i % CHAIN_COLOR_PALETTE.length];
+		colors.set(chainId, (_overrides$chainId = overrides === null || overrides === void 0 ? void 0 : overrides[chainId]) !== null && _overrides$chainId !== void 0 ? _overrides$chainId : fallback);
+	});
+	return colors;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useChains.ts
+/**
+* Reconciles the chains found in the structure with the visibility and coloring
+* the consumer asked for.
+*
+* Visibility is controlled when `hiddenChains` is passed and owned here when it
+* is not, so the legend's toggles work out of the box without taking the
+* decision away from a consumer that wants it. `onChainVisibilityChange` fires
+* either way: a consumer that only wants to follow along should not have to
+* take ownership to hear about it.
+*/
+function useChains({ chainColors, chains, hiddenChains, onChainVisibilityChange }) {
+	const isControlled = hiddenChains !== void 0;
+	const [ownHidden, setOwnHidden] = useState([]);
+	const onChainVisibilityChangeRef = useRef(onChainVisibilityChange);
+	onChainVisibilityChangeRef.current = onChainVisibilityChange;
+	const chainIds = useMemo(() => chains.map((c) => c.chainId), [chains]);
+	/**
+	* Chains the structure no longer has cannot be unhidden through the legend,
+	* since it has no row for them, so a stale id would hide a chain that shares
+	* its name in the next structure. Only the uncontrolled side is pruned; a
+	* controlled consumer owns its own list.
+	*/
+	useEffect(() => {
+		if (isControlled) return;
+		setOwnHidden((prev) => {
+			const kept = prev.filter((id) => chainIds.includes(id));
+			return kept.length === prev.length ? prev : kept;
+		});
+	}, [chainIds, isControlled]);
+	const hiddenKey = [...isControlled ? hiddenChains : ownHidden].sort().join("\0");
+	const hidden = useMemo(() => new Set(hiddenKey === "" ? [] : hiddenKey.split("\0")), [hiddenKey]);
+	return {
+		colors: useMemo(() => chainColorMap(chainIds, chainColors), [chainIds.map((id) => {
+			var _chainColors$id;
+			return `${id}:${(_chainColors$id = chainColors === null || chainColors === void 0 ? void 0 : chainColors[id]) !== null && _chainColors$id !== void 0 ? _chainColors$id : ""}`;
+		}).join("\0")]),
+		hidden,
+		toggleChain: useCallback((chainId) => {
+			var _onChainVisibilityCha;
+			const next = hidden.has(chainId) ? [...hidden].filter((id) => id !== chainId) : [...hidden, chainId];
+			const ordered = chainIds.filter((id) => next.includes(id));
+			if (!isControlled) setOwnHidden(ordered);
+			(_onChainVisibilityCha = onChainVisibilityChangeRef.current) === null || _onChainVisibilityCha === void 0 || _onChainVisibilityCha.call(onChainVisibilityChangeRef, ordered);
+		}, [
+			chainIds,
+			hidden,
+			isControlled
+		])
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/theme.ts
+const themeCache = /* @__PURE__ */ new Map();
+/**
+* The MUI theme for a mode, built at most once. Mol*'s view components rebuild
+* their `ThemeProvider` on every render, and `Theme()` is not cheap.
+*/
+function themeForMode(mode) {
+	const cached = themeCache.get(mode);
+	if (cached) return cached;
+	const theme = Theme(mode);
+	themeCache.set(mode, theme);
+	return theme;
+}
+const residueColorCache = /* @__PURE__ */ new Map();
+function residueColorsForMode(mode) {
+	var _getSemanticColors, _base$fillSecondaryIn, _base$textPrimary, _base$textSecondary, _base$textTertiary;
+	const cached = residueColorCache.get(mode);
+	if (cached) return cached;
+	const base = (_getSemanticColors = getSemanticColors({ theme: themeForMode(mode) })) === null || _getSemanticColors === void 0 ? void 0 : _getSemanticColors.base;
+	const colors = {
+		activeBackground: (_base$fillSecondaryIn = base === null || base === void 0 ? void 0 : base.fillSecondaryInteraction) !== null && _base$fillSecondaryIn !== void 0 ? _base$fillSecondaryIn : "transparent",
+		activeText: (_base$textPrimary = base === null || base === void 0 ? void 0 : base.textPrimary) !== null && _base$textPrimary !== void 0 ? _base$textPrimary : "inherit",
+		defaultText: (_base$textSecondary = base === null || base === void 0 ? void 0 : base.textSecondary) !== null && _base$textSecondary !== void 0 ? _base$textSecondary : "inherit",
+		inactiveText: (_base$textTertiary = base === null || base === void 0 ? void 0 : base.textTertiary) !== null && _base$textTertiary !== void 0 ? _base$textTertiary : "inherit"
+	};
+	residueColorCache.set(mode, colors);
+	return colors;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useSubscribe.ts
+/**
+* Subscribes to an observable for as long as the component is mounted, the
+* hook equivalent of `PluginUIComponent`'s `subscribe`.
+*
+* The handler is read through a ref so that passing a fresh closure on every
+* render - which is the normal case, since these handlers read props and state
+* - does not tear down and rebuild the subscription.
+*/
+function useSubscribe(observable, handler) {
+	const handlerRef = useRef(handler);
+	handlerRef.current = handler;
+	useEffect(() => {
+		if (!observable) return;
+		const subscription = observable.subscribe((value) => handlerRef.current(value));
+		return () => subscription.unsubscribe();
+	}, [observable]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useViewSetting.ts
+/**
+* One field of the settings Mol*'s own React root cannot read from context.
+*
+* The subject emits a whole new settings object on every push, so each field is
+* selected out separately: React's equality bailout then absorbs the pushes
+* that left this particular value alone, and a component only re-renders for
+* the settings it actually reads.
+*/
+function useViewSetting(settings, select) {
+	const [value, setValue] = useState(() => select(settings.value));
+	useSubscribe(settings, (next) => setValue(() => select(next)));
+	return value;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useMolstarTheme.ts
+/**
+* The active theme for a component Mol* renders in its own React root.
+*
+* Those components sit outside the consumer's provider tree, so they cannot
+* read the theme from context; the mode reaches them through the settings
+* subject instead. Callers re-supply the theme to their subtree via a local
+* `ThemeProvider` so Emotion styles resolve SDS tokens correctly.
+*/
+function useMolstarTheme(settings) {
+	const mode = useViewSetting(settings, (s) => s.mode);
+	return {
+		mode,
+		theme: themeForMode(mode)
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/constants.ts
+/** Attribute carrying a residue's sequence index, used for hit testing. */
+const SEQ_ID_ATTR = "data-seqid";
+/** Hover updates are coalesced to roughly one every three frames. */
+const HOVER_THROTTLE_MS = 3 * 16.666;
+/** How long the copy button shows its confirmation state. */
+const COPIED_FEEDBACK_MS = 2e3;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/style.ts
+/** Height of the fade that masks residues scrolling under the panel header. */
+const SCROLL_FADE_HEIGHT = 8;
+const SequencePanel = styled("div")`
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+  ${(props) => {
+	var _semanticColors$base, _props$backgroundColo, _semanticColors$base2;
+	const spaces = getSpaces(props);
+	const semanticColors = getSemanticColors(props);
+	return `
+      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px 0;
+      border-top: 1px solid ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.divider};
+      background-color: ${(_props$backgroundColo = props.backgroundColor) !== null && _props$backgroundColo !== void 0 ? _props$backgroundColo : semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.surfacePrimary};
+    `;
+}}
+`;
+const EmptyState = styled("div")`
+  ${fontBodyXs}
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  ${(props) => {
+	var _props$backgroundColo2, _semanticColors$base3, _semanticColors$base4;
+	const spaces = getSpaces(props);
+	const semanticColors = getSemanticColors(props);
+	return `
+      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      background-color: ${(_props$backgroundColo2 = props.backgroundColor) !== null && _props$backgroundColo2 !== void 0 ? _props$backgroundColo2 : semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.surfaceSecondary};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.textTertiaryOnDark};
+    `;
+}}
+`;
+const PanelHeader = styled("div")`
+  display: flex;
+  align-items: center;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
+    `;
+}}
+`;
+const PanelTitle = styled("span")`
+  ${fontHeaderM}
+
+  ${(props) => {
+	var _semanticColors$base5;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base5 = semanticColors.base) === null || _semanticColors$base5 === void 0 ? void 0 : _semanticColors$base5.textPrimary};
+    `;
+}}
+`;
+const CopyButton = styled("button")`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: default;
+
+  ${(props) => {
+	var _semanticColors$base6, _semanticColors$base7;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base6 = semanticColors.base) === null || _semanticColors$base6 === void 0 ? void 0 : _semanticColors$base6.ornamentSecondary};
+
+      &:hover {
+        color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base7 = semanticColors.base) === null || _semanticColors$base7 === void 0 ? void 0 : _semanticColors$base7.textPrimary};
+      }
+    `;
+}}
+`;
+const ResidueCount = styled("div")`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
+    `;
+}}
+`;
+const ResidueCountLabel = styled("span")`
+  ${fontBodyXs}
+
+  ${(props) => {
+	var _semanticColors$base8;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base8 = semanticColors.base) === null || _semanticColors$base8 === void 0 ? void 0 : _semanticColors$base8.textTertiary};
+    `;
+}}
+`;
+const ResidueCountValue = styled("span")`
+  ${fontBodyXs}
+
+  ${(props) => {
+	var _semanticColors$base9;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base9 = semanticColors.base) === null || _semanticColors$base9 === void 0 ? void 0 : _semanticColors$base9.textPrimary};
+    `;
+}}
+`;
+/**
+* Scroll region for the residue grid. The `::before` fade masks residues as
+* they scroll up under the header, so it has to start from whatever the panel
+* is painted with or it leaves a mismatched strip.
+*/
+const SequenceScroller = styled("div")`
+  position: relative;
+  flex: 1;
+  min-height: 0;
+
+  ${(props) => {
+	var _props$backgroundColo3, _semanticColors$base10;
+	const semanticColors = getSemanticColors(props);
+	return `
+      &::before {
+        content: "";
+        position: absolute;
+        inset-inline: 0;
+        top: 0;
+        z-index: 10;
+        height: ${SCROLL_FADE_HEIGHT}px;
+        pointer-events: none;
+        background: linear-gradient(to bottom, ${(_props$backgroundColo3 = props.backgroundColor) !== null && _props$backgroundColo3 !== void 0 ? _props$backgroundColo3 : semanticColors === null || semanticColors === void 0 || (_semanticColors$base10 = semanticColors.base) === null || _semanticColors$base10 === void 0 ? void 0 : _semanticColors$base10.surfacePrimary}, transparent);
+      }
+    `;
+}}
+`;
+/**
+* Residue spans are written to directly by `useResidueMarkers` rather than
+* re-rendered, so their hover and selection colors are set inline. Everything
+* here is the static styling underneath that: the monospace type, the pointer
+* affordance, and the superscript sequence numbers (which need their own color
+* rule, since they are nested inside residue spans and would otherwise inherit
+* the inline color).
+*/
+const SequenceScrollArea = styled("div")`
+  height: 100%;
+  overflow-y: auto;
+
+  .msp-sequence-wrapper {
+    ${fontCodeXs};
+    font-size: 11px;
+    line-height: 1.2;
+  }
+
+  .msp-sequence-present {
+    cursor: pointer;
+  }
+
+  ${(props) => {
+	var _semanticColors$base11;
+	const semanticColors = getSemanticColors(props);
+	return `
+      .msp-sequence-number {
+        font-size: 8px;
+        color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base11 = semanticColors.base) === null || _semanticColors$base11 === void 0 ? void 0 : _semanticColors$base11.textTertiaryOnDark};
+      }
+    `;
+}}
+`;
+/**
+* Layout for one chain's residues.
+*
+* Residues are grouped into fixed-size sections, each one grid cell. The
+* equal-width auto-fill tracks and uniform gap keep the spacing between
+* sections identical on every row - including a partial last row, which keeps
+* the same column width (rather than stretching) and stacks from the leading
+* edge.
+*/
+const ResidueGrid = styled("div")`
+  user-select: none;
+  display: grid;
+  grid-template-columns: repeat(
+    auto-fill,
+    minmax(${10}ch, 1fr)
+  );
+  gap: 8px;
+  justify-items: start;
+  padding-top: 6px;
+
+  /* Section wrappers, so a section's letters never split across lines. */
+  & > span {
+    white-space: nowrap;
+  }
+
+  .msp-sequence-present {
+    position: relative;
+    display: inline-block;
+    width: 1ch;
+    /*
+     * Reserves room above the letter for its superscript sequence number.
+     * content-box clipping keeps the active fill off that gutter, so a
+     * highlighted residue does not tint the number.
+     */
+    padding-top: 8px;
+    background-clip: content-box;
+    text-align: center;
+  }
+
+  .msp-sequence-number {
+    position: absolute;
+    top: 0;
+    line-height: 1.2;
+    white-space: nowrap;
+    pointer-events: none;
+  }
+`;
+/**
+* The row above each chain's grid: a visibility toggle and the chain's name.
+*
+* A structure with more than one chain renders one grid per chain, and without
+* a caption between them the grids read as a single continuous protein. The
+* controls sit here rather than only in the legend because this is where a
+* reader is already looking at one chain at a time.
+*/
+const ChainHeaderRow = styled("div")`
+  display: flex;
+  align-items: center;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
+      margin-top: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+    `;
+}}
+`;
+/**
+* Shows or hides the chain's cartoon in the 3D view. Full strength even while
+* the chain is hidden, since it is the way back.
+*/
+const ChainVisibilityToggle = styled("button")`
+  display: flex;
+  align-items: center;
+  padding: 0;
+  border: none;
+  background: none;
+  cursor: pointer;
+
+  ${(props) => {
+	var _semanticColors$base12, _semanticColors$base13;
+	const semanticColors = getSemanticColors(props);
+	return `
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base12 = semanticColors.base) === null || _semanticColors$base12 === void 0 ? void 0 : _semanticColors$base12.textTertiaryOnDark};
+
+      &:hover {
+        color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base13 = semanticColors.base) === null || _semanticColors$base13 === void 0 ? void 0 : _semanticColors$base13.textPrimary};
+      }
+
+      svg {
+        display: block;
+      }
+    `;
+}}
+`;
+/**
+* The chain's name, and a button because it also selects the chain: the caption
+* is already the one thing on screen that stands for a whole chain, so clicking
+* it is where a reader looks to select one. Clicking it again clears it.
+*/
+const ChainLabel = styled("button")`
+  ${fontBodyXs}
+
+  padding: 0;
+  border: none;
+  background: none;
+  text-align: left;
+
+  ${(props) => {
+	var _semanticColors$base14, _semanticColors$base15, _semanticColors$base16;
+	const semanticColors = getSemanticColors(props);
+	const resting = props.isSelected ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base14 = semanticColors.base) === null || _semanticColors$base14 === void 0 ? void 0 : _semanticColors$base14.textPrimary : semanticColors === null || semanticColors === void 0 || (_semanticColors$base15 = semanticColors.base) === null || _semanticColors$base15 === void 0 ? void 0 : _semanticColors$base15.textSecondary;
+	return `
+      color: ${resting};
+      cursor: ${props.isHidden ? "default" : "pointer"};
+      font-weight: ${props.isSelected ? 600 : 500};
+      opacity: ${props.isHidden ? .4 : 1};
+
+      &:hover {
+        color: ${props.isHidden ? resting : semanticColors === null || semanticColors === void 0 || (_semanticColors$base16 = semanticColors.base) === null || _semanticColors$base16 === void 0 ? void 0 : _semanticColors$base16.textPrimary};
+      }
+    `;
+}}
+`;
+/**
+* Wraps a chain whose 3D cartoon is hidden. The grid stays in place and stays
+* interactive - the sequence is still the sequence - but is dimmed to match the
+* chain being absent from the structure beside it. Dimmed rather than removed
+* so the panel does not reflow every time a chain is toggled.
+*/
+const HiddenChainGroup = styled("div")`
+  opacity: 0.4;
+`;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/components/ChainHeader/index.tsx
+/**
+* The row above one chain's residue grid: a visibility toggle and the chain's
+* name, which selects it.
+*
+* The name is a toggle rather than a one-way switch, so the tooltip says which
+* way the next click goes - offering to select a chain that is already selected
+* would be telling the reader the wrong thing. A hidden chain cannot be
+* selected at all, so the name stops being a button then: there is no geometry
+* to focus, and the toggle beside it is what the reader wants instead.
+*/
+function ChainHeader({ chainId, isHidden, isSelected, label, onHover, onSelect, onToggle }) {
+	return /* @__PURE__ */ jsxs(ChainHeaderRow, {
+		onBlur: () => onHover === null || onHover === void 0 ? void 0 : onHover(null),
+		onFocus: () => onHover === null || onHover === void 0 ? void 0 : onHover(chainId),
+		onMouseEnter: () => onHover === null || onHover === void 0 ? void 0 : onHover(chainId),
+		onMouseLeave: () => onHover === null || onHover === void 0 ? void 0 : onHover(null),
+		children: [/* @__PURE__ */ jsx(Tooltip, {
+			arrow: true,
+			placement: "top",
+			title: isHidden ? `Chain ${label} is hidden` : `Click to ${isSelected ? "deselect" : "select"} Chain ${label}`,
+			textAlign: "left",
+			children: /* @__PURE__ */ jsxs(ChainLabel, {
+				"aria-pressed": isSelected,
+				disabled: isHidden,
+				isHidden,
+				isSelected,
+				onClick: () => onSelect === null || onSelect === void 0 ? void 0 : onSelect(chainId),
+				type: "button",
+				children: ["Chain ", label]
+			})
+		}), onToggle && /* @__PURE__ */ jsx(Tooltip, {
+			arrow: true,
+			placement: "top",
+			title: `${isHidden ? "Show" : "Hide"} Chain ${label}`,
+			children: /* @__PURE__ */ jsx(ChainVisibilityToggle, {
+				"aria-label": `${isHidden ? "Show" : "Hide"} chain ${label}`,
+				"aria-pressed": isHidden,
+				onClick: () => onToggle(chainId),
+				type: "button",
+				children: isHidden ? /* @__PURE__ */ jsx(EyeSlashIcon, { size: 12 }) : /* @__PURE__ */ jsx(EyeIcon, { size: 12 })
+			})
+		})]
+	});
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/usePlugin.ts
+/**
+* The plugin owning the React root this component renders in.
+*
+* Mol* renders its view components inside its own root and provides the plugin
+* through this context, which is what `PluginUIComponent` reads to populate
+* `this.plugin`.
+*/
+function usePlugin() {
+	return useContext(PluginReactContext);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/utils/residue.ts
+/** Reads the sequence index off a residue span, or undefined if it is not one. */
+function readSeqIdx(el) {
+	if (!el || !el.getAttribute) return void 0;
+	return el.hasAttribute("data-seqid") ? +el.getAttribute(SEQ_ID_ATTR) : void 0;
+}
+/**
+* Nearest ancestor that scrolls vertically, or null if none. Used to scope the
+* residue tooltip's hide-on-scroll listener to the sequence's own overflow
+* container instead of a global window listener.
+*/
+function getScrollParent(node) {
+	var _node$parentElement;
+	let el = (_node$parentElement = node === null || node === void 0 ? void 0 : node.parentElement) !== null && _node$parentElement !== void 0 ? _node$parentElement : null;
+	while (el) {
+		const overflowY = getComputedStyle(el).overflowY;
+		if (overflowY === "auto" || overflowY === "scroll") return el;
+		el = el.parentElement;
+	}
+	return null;
+}
+function getResidueClass(sequenceWrapper, seqIdx) {
+	return sequenceWrapper.isHighlighted(seqIdx) || sequenceWrapper.isSelected(seqIdx) || sequenceWrapper.isFocused(seqIdx) ? "msp-sequence-present msp-sequence-residue-active" : "msp-sequence-present msp-sequence-residue";
+}
+/**
+* The label shown above a residue: its author sequence id for atomic units,
+* or a 1-based position for coarse ones.
+*
+* `location` is a scratch object the caller reuses across residues, since this
+* runs once per numbered residue on every render.
+*/
+function getSequenceNumber(sequenceWrapper, seqIdx, location) {
+	let seqNum = "";
+	const loci = sequenceWrapper.getLoci(seqIdx);
+	const l = StructureElement.Loci.getFirstLocation(loci, location);
+	if (l) {
+		if (Unit.isAtomic(l.unit)) {
+			const seqId = StructureProperties.residue.auth_seq_id(l);
+			const insCode = StructureProperties.residue.pdbx_PDB_ins_code(l);
+			seqNum = `${seqId}${insCode ? insCode : ""}`;
+		} else if (Unit.isCoarse(l.unit)) seqNum = `${seqIdx + 1}`;
+	}
+	return seqNum;
+}
+/**
+* How often a sequence number is drawn above the residues.
+*
+* Long sequences get one every ten residues. Short ones number every residue,
+* unless their numbers run to more than one digit, which would crowd them.
+*/
+function resolveSequenceNumberPeriod(sequenceWrapper, location, sequenceNumberPeriod) {
+	if (sequenceNumberPeriod !== void 0) return sequenceNumberPeriod;
+	if (sequenceWrapper.length > 10) return 10;
+	if (getSequenceNumber(sequenceWrapper, sequenceWrapper.length - 1, location).length > 1) return 5;
+	return 1;
+}
+/**
+* The grid's accessible name.
+*
+* The grid is a rendering of the structure rather than a control of its own,
+* so it is exposed as an image; that makes this label the only thing an
+* assistive technology gets, which is why it carries the residues themselves
+* rather than just how many there are. They are spaced apart so they are read
+* as individual letters instead of running together into a word.
+*
+* A complex draws one grid per chain, and the caption naming each is a visual
+* sibling rather than a label, so the chain is named here too. Without it every
+* grid announces the same name and which chain a reader is on is apparent only
+* by sight.
+*/
+function buildSequenceLabel(sequenceWrapper, chainLabel) {
+	const letters = [];
+	for (let i = 0; i < sequenceWrapper.length; i++) letters.push(sequenceWrapper.residueLabel(i));
+	const name = chainLabel ? `Chain ${chainLabel}, residue sequence, ${sequenceWrapper.length} residues` : `Residue sequence, ${sequenceWrapper.length} residues`;
+	return letters.length > 0 ? `${name}: ${letters.join(" ")}` : name;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useResidueMarkers.ts
+/**
+* Keeps the residue grid's hover and selection colors in sync with the 3D
+* view.
+*
+* The colors are written straight to the residue spans rather than rendered,
+* because a marker change would otherwise re-render a grid that can hold
+* thousands of nodes.
+*/
+function useResidueMarkers({ containerRef, residueColors, sequenceWrapper }) {
+	const plugin = usePlugin();
+	/**
+	* Residues sit at the default color until something is active. A hovered,
+	* selected, or focused residue brightens and takes a translucent fill; while
+	* any residue is selected, the rest dim to draw attention to the selection.
+	*/
+	const paintMarkers = useCallback(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		const { activeBackground, activeText, defaultText, inactiveText } = residueColors;
+		const spans = container.querySelectorAll(`[${SEQ_ID_ATTR}]`);
+		let anySelected = false;
+		for (let i = 0; i < sequenceWrapper.length; i++) if (sequenceWrapper.isSelected(i)) {
+			anySelected = true;
+			break;
+		}
+		const inactiveColor = anySelected ? inactiveText : defaultText;
+		for (let i = 0; i < sequenceWrapper.length; i++) {
+			const span = spans[i];
+			if (!span) return;
+			const className = getResidueClass(sequenceWrapper, i);
+			if (span.className !== className) span.className = className;
+			const active = sequenceWrapper.isSelected(i) || sequenceWrapper.isFocused(i) || sequenceWrapper.isHighlighted(i);
+			span.style.color = active ? activeText : inactiveColor;
+			span.style.backgroundColor = active ? activeBackground : "";
+		}
+	}, [
+		containerRef,
+		residueColors,
+		sequenceWrapper
+	]);
+	const markFocus = useCallback((loci) => {
+		sequenceWrapper.markResidue(EveryLoci, "unfocus");
+		if (loci) sequenceWrapper.markResidue(loci, "focus");
+	}, [sequenceWrapper]);
+	const paintMarkersRef = useRef(paintMarkers);
+	paintMarkersRef.current = paintMarkers;
+	const sequenceWrapperRef = useRef(sequenceWrapper);
+	sequenceWrapperRef.current = sequenceWrapper;
+	useEffect(() => {
+		const markProvider = (loci, action) => {
+			if (sequenceWrapperRef.current.markResidue(loci.loci, action)) paintMarkersRef.current();
+		};
+		const { lociHighlights, lociSelects } = plugin.managers.interactivity;
+		lociHighlights.addProvider(markProvider);
+		lociSelects.addProvider(markProvider);
+		return () => {
+			lociHighlights.removeProvider(markProvider);
+			lociSelects.removeProvider(markProvider);
+		};
+	}, [plugin]);
+	useSubscribe(plugin.managers.structure.focus.behaviors.current, (focus) => {
+		markFocus(focus === null || focus === void 0 ? void 0 : focus.loci);
+		paintMarkers();
+	});
+	useLayoutEffect(() => {
+		var _plugin$managers$stru;
+		markFocus((_plugin$managers$stru = plugin.managers.structure.focus.behaviors.current.value) === null || _plugin$managers$stru === void 0 ? void 0 : _plugin$managers$stru.loci);
+		paintMarkers();
+	});
+}
+//#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 `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.
+*/
+function residueRefFromLoci(loci) {
+	var _StructureProperties$;
+	const location = StructureElement.Location.create(void 0);
+	const firstLoc = StructureElement.Loci.getFirstLocation(loci, location);
+	if (!firstLoc) return null;
+	return {
+		chainId: StructureProperties.chain.auth_asym_id(firstLoc),
+		compId: StructureProperties.atom.label_comp_id(firstLoc),
+		insCode: (_StructureProperties$ = StructureProperties.residue.pdbx_PDB_ins_code(firstLoc)) !== null && _StructureProperties$ !== void 0 ? _StructureProperties$ : "",
+		index: StructureProperties.residue.key(firstLoc),
+		seqId: StructureProperties.residue.auth_seq_id(firstLoc)
+	};
+}
+/**
+* Every residue a loci covers, as a selection the consumer can echo back.
+*
+* The counterpart to `residueRefFromLoci`, which names only the first: a drag
+* across the sequence hands Mol* a range, and reporting its first residue
+* alone would turn a range the user drew into a single-residue selection.
+*
+* Reported as residues rather than as chains even when a whole chain is
+* covered. What the user drew is a span of residues, and calling it a chain
+* because it happens to end where one does would change the selection's meaning
+* on a structure where the two coincide.
+*/
+function selectionFromLoci(loci) {
+	const location = StructureElement.Location.create(loci.structure);
+	const residues = /* @__PURE__ */ new Set();
+	for (const element of loci.elements) {
+		location.unit = element.unit;
+		OrderedSet.forEach(element.indices, (i) => {
+			location.element = element.unit.elements[i];
+			residues.add(StructureProperties.residue.key(location));
+		});
+	}
+	return { residues: [...residues].sort((a, b) => a - b) };
+}
+/**
+* How a residue is named in the readout, e.g. `"LYS 111"`. Takes the number and
+* the insertion code from the file so that the readout and the sequence panel
+* beneath it agree on what to call a residue.
+*/
+function residueLabel(residue) {
+	return `${residue.compId} ${residue.seqId}${residue.insCode}`;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/utils/loci.ts
+/** The loci for a residue, or undefined when there is no residue there. */
+function getLoci(sequenceWrapper, seqIdx) {
+	if (seqIdx !== void 0) {
+		const loci = sequenceWrapper.getLoci(seqIdx);
+		if (!StructureElement.Loci.isEmpty(loci)) return loci;
+	}
+}
+/**
+* Extends a loci to the range between the mouse-down anchor and the current
+* residue, so dragging across the sequence selects a contiguous span.
+*
+* The span is measured in the viewer's own residue index - position in file
+* order across the whole structure - rather than in element indices, which are
+* unit-local and so cannot describe a range reaching from one chain into the
+* next. Measuring it the way every other residue-keyed API measures it is what
+* lets a drag cross a chain break, and it means a range covers exactly the
+* residues whose indices lie between its ends.
+*
+* An endpoint that names no residue leaves the drag unextended rather than
+* guessing at where it was. An endpoint spanning several units - a chain with
+* more than one symmetry operator - is fine: each copy of a residue carries the
+* same index, so the span is the same either way and resolves back across all
+* of them.
+*/
+function extendToRange(loci, anchor) {
+	var _lociForResidueRange;
+	const from = residueRefFromLoci(anchor);
+	const to = residueRefFromLoci(loci);
+	if (!from || !to) return loci;
+	if (from.index === to.index) return loci;
+	const min = Math.min(from.index, to.index);
+	const max = Math.max(from.index, to.index);
+	return (_lociForResidueRange = lociForResidueRange(loci.structure, min, max)) !== null && _lociForResidueRange !== void 0 ? _lociForResidueRange : loci;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useHoveredResidue.ts
+/**
+* Tracks which residue the pointer is over and keeps the tooltip pinned to it.
+*
+* The tracked index also deduplicates pointer moves: the grid sees a move for
+* every pixel, but only the ones that cross into a different residue matter.
+*/
+function useHoveredResidue({ containerRef, sequenceWrapper }) {
+	const tooltipRef = useRef(null);
+	/** Index of the tracked residue, or -1 when the pointer is off the grid. */
+	const seqIdxRef = useRef(-1);
+	const hide = useCallback(() => {
+		var _tooltipRef$current;
+		return (_tooltipRef$current = tooltipRef.current) === null || _tooltipRef$current === void 0 ? void 0 : _tooltipRef$current.hide();
+	}, []);
+	const clear = useCallback(() => {
+		var _tooltipRef$current2;
+		if (seqIdxRef.current === -1) return false;
+		seqIdxRef.current = -1;
+		(_tooltipRef$current2 = tooltipRef.current) === null || _tooltipRef$current2 === void 0 || _tooltipRef$current2.hide();
+		return true;
+	}, []);
+	const moveTo = useCallback((seqIdx, el) => {
+		var _tooltipRef$current3, _tooltipRef$current4;
+		if (seqIdxRef.current === seqIdx) return false;
+		seqIdxRef.current = seqIdx;
+		if (seqIdx < 0) (_tooltipRef$current3 = tooltipRef.current) === null || _tooltipRef$current3 === void 0 || _tooltipRef$current3.hide();
+		else (_tooltipRef$current4 = tooltipRef.current) === null || _tooltipRef$current4 === void 0 || _tooltipRef$current4.show(el, sequenceWrapper.residueLabel(seqIdx));
+		return true;
+	}, [sequenceWrapper]);
+	useEffect(() => {
+		const scrollTarget = getScrollParent(containerRef.current);
+		if (!scrollTarget) return;
+		const handleScroll = () => clear();
+		scrollTarget.addEventListener("scroll", handleScroll, { passive: true });
+		return () => scrollTarget.removeEventListener("scroll", handleScroll);
+	}, [clear, containerRef]);
+	return useMemo(() => ({
+		clear,
+		hide,
+		moveTo,
+		tooltipRef
+	}), [
+		clear,
+		hide,
+		moveTo
+	]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useLociDispatch.ts
+/**
+* Wraps a residue loci and the mouse state into a Mol* interaction event. An
+* `anchor` extends the loci to the range between it and `loci`, which is how a
+* drag across the sequence comes out as a contiguous span.
+*/
+function buildEvent(loci, buttons, button, modifiers, anchor) {
+	const ev = {
+		button,
+		buttons,
+		current: Representation.Loci.Empty,
+		modifiers
+	};
+	if (loci === void 0 || StructureElement.Loci.isEmpty(loci)) return ev;
+	ev.current = { loci: anchor ? extendToRange(loci, anchor) : loci };
+	return ev;
+}
+/**
+* Reports the grid's hover and click to Mol*, on the same behaviors the 3D
+* view publishes to, so an interaction in either surface reaches the other.
+*/
+function useLociDispatch() {
+	const plugin = usePlugin();
+	const hover = useCallback((loci, buttons, button, modifiers, anchor) => {
+		plugin.behaviors.interaction.hover.next(buildEvent(loci, buttons, button, modifiers, anchor));
+	}, [plugin]);
+	const click = useCallback((loci, buttons, button, modifiers, anchor) => {
+		plugin.behaviors.interaction.click.next(buildEvent(loci, buttons, button, modifiers, anchor));
+	}, [plugin]);
+	return useMemo(() => ({
+		click,
+		hover
+	}), [click, hover]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useSequenceDrag.ts
+const SequenceDragContext = createContext({
+	clearAnchor: () => void 0,
+	getAnchor: () => void 0,
+	setAnchor: () => void 0
+});
+const SequenceDragProvider = SequenceDragContext.Provider;
+/**
+* The anchor a drag across the sequence started from, shared by every chain's
+* grid.
+*
+* It has to live above the grids rather than inside one. A complex renders one
+* grid per chain, so a drag that begins on the target and ends on the binder
+* starts in one component and finishes in another; an anchor held by the grid
+* it started in is not there to be read by the grid it ends in, and the drag
+* would be reported as a plain click on whatever it landed on.
+*
+* Held in a ref rather than state: it changes on mouse-down and mouse-up, and
+* nothing renders from it, so re-rendering every residue in the panel twice per
+* drag would buy nothing.
+*/
+function useCreateSequenceDrag() {
+	const anchorRef = useRef(void 0);
+	const getAnchor = useCallback(() => anchorRef.current, []);
+	const setAnchor = useCallback((anchor) => {
+		anchorRef.current = anchor;
+	}, []);
+	const clearAnchor = useCallback(() => {
+		anchorRef.current = void 0;
+	}, []);
+	return useMemo(() => ({
+		clearAnchor,
+		getAnchor,
+		setAnchor
+	}), [
+		clearAnchor,
+		getAnchor,
+		setAnchor
+	]);
+}
+function useSequenceDrag() {
+	return useContext(SequenceDragContext);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useResidueSelection.ts
+/**
+* Turns a press and release on the grid into a selection: one residue when
+* both land on the same one, otherwise the contiguous range dragged across -
+* which the panel-level anchor lets reach into another chain's grid.
+*/
+function useResidueSelection({ sequenceWrapper }) {
+	const { clearAnchor, getAnchor, setAnchor } = useSequenceDrag();
+	const { click } = useLociDispatch();
+	const onMouseDown = (e) => {
+		e.stopPropagation();
+		setAnchor(getLoci(sequenceWrapper, readSeqIdx(e.target)));
+	};
+	const onMouseUp = (e) => {
+		e.stopPropagation();
+		const anchor = getAnchor();
+		if (anchor === void 0) return;
+		const loci = getLoci(sequenceWrapper, readSeqIdx(e.target));
+		if (loci) {
+			const dragged = !StructureElement.Loci.areEqual(anchor, loci);
+			click(loci, getButtons(e.nativeEvent), getButton(e.nativeEvent), getModifiers(e.nativeEvent), dragged ? anchor : void 0);
+		}
+		clearAnchor();
+	};
+	return {
+		onMouseDown,
+		onMouseUp
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useResiduePointer.ts
+/**
+* Everything the grid does with a pointer: hover on move, and the drag-to-range
+* selection delegated to `useResidueSelection`.
+*
+* Hover reaches the 3D view through a throttled queue, so that sweeping the
+* pointer across the grid does not ask Mol* to re-mark on every residue
+* crossed. A drag is exempt: its hover carries the growing range, so it goes
+* out immediately to keep the preview under the pointer.
+*/
+function useResiduePointer({ containerRef, sequenceWrapper }) {
+	const { hover } = useLociDispatch();
+	const { clear, hide, moveTo, tooltipRef } = useHoveredResidue({
+		containerRef,
+		sequenceWrapper
+	});
+	const { getAnchor } = useSequenceDrag();
+	const { onMouseDown, onMouseUp } = useResidueSelection({ sequenceWrapper });
+	const queueRef = useRef(null);
+	if (queueRef.current === null) queueRef.current = new Subject();
+	const queue = queueRef.current;
+	useSubscribe(useMemo(() => queue.pipe(throttleTime(HOVER_THROTTLE_MS, void 0, {
+		leading: true,
+		trailing: true
+	})), [queue]), (e) => {
+		hover(getLoci(sequenceWrapper, e.seqIdx < 0 ? void 0 : e.seqIdx), e.buttons, e.button, e.modifiers, getAnchor());
+	});
+	const queueHover = (e, seqIdx) => queue.next({
+		button: getButton(e.nativeEvent),
+		buttons: getButtons(e.nativeEvent),
+		modifiers: getModifiers(e.nativeEvent),
+		seqIdx
+	});
+	/** Asks the 3D view to drop its hover, once, if the grid still holds one. */
+	const releaseHover = (e) => {
+		if (clear()) queueHover(e, -1);
+	};
+	const onContextMenu = (e) => {
+		e.preventDefault();
+	};
+	const onMouseMove = (e) => {
+		var _readSeqIdx;
+		e.stopPropagation();
+		const el = e.target;
+		if (!el || !el.getAttribute) {
+			releaseHover(e);
+			return;
+		}
+		const seqIdx = (_readSeqIdx = readSeqIdx(el)) !== null && _readSeqIdx !== void 0 ? _readSeqIdx : -1;
+		if (!moveTo(seqIdx, el)) return;
+		const anchor = getAnchor();
+		if (anchor === void 0) {
+			queueHover(e, seqIdx);
+			return;
+		}
+		hover(getLoci(sequenceWrapper, seqIdx), ButtonsType.Flag.None, ButtonsType.Flag.None, getModifiers(e.nativeEvent), anchor);
+	};
+	/**
+	* Leaving one grid is not the end of a drag: on a complex the next chain's
+	* grid is a separate element, so a drag from the target into the binder
+	* leaves this one on its way. The anchor is therefore left alone here and
+	* dropped by the release, or by the pointer leaving the panel altogether.
+	*/
+	const onMouseLeave = (e) => {
+		e.stopPropagation();
+		hide();
+		releaseHover(e);
+	};
+	return {
+		handlers: {
+			onContextMenu,
+			onMouseDown,
+			onMouseLeave,
+			onMouseMove,
+			onMouseUp
+		},
+		tooltipRef
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/components/ResidueTooltip/index.tsx
+var _getSpaces$m, _getSpaces;
+/**
+* Pull the tooltip toward the residue by the SDS `m` spacing token. Spacing
+* tokens are theme-invariant, so reading from the light theme is fine; popper's
+* offset modifier needs a number, hence deriving it from the token.
+*/
+const MAIN_AXIS_OFFSET = -((_getSpaces$m = (_getSpaces = getSpaces({ theme: defaultTheme })) === null || _getSpaces === void 0 ? void 0 : _getSpaces.m) !== null && _getSpaces$m !== void 0 ? _getSpaces$m : 12);
+/**
+* A single controlled tooltip anchored to the residue span currently under the
+* cursor. Driven imperatively through its ref so that hover updates re-render
+* only the tooltip, not the residue grid.
+*/
+const ResidueTooltip = forwardRef((_props, ref) => {
+	var _getSemanticColors;
+	const [{ anchorEl, label }, setState] = useState({
+		anchorEl: null,
+		label: ""
+	});
+	const residueTooltipBackgroundColor = (_getSemanticColors = getSemanticColors({ theme: useTheme$1() })) === null || _getSemanticColors === void 0 || (_getSemanticColors = _getSemanticColors.base) === null || _getSemanticColors === void 0 ? void 0 : _getSemanticColors.backgroundPrimary;
+	useImperativeHandle(ref, () => ({
+		hide: () => setState((prev) => prev.anchorEl === null ? prev : _objectSpread2(_objectSpread2({}, prev), {}, { anchorEl: null })),
+		show: (nextAnchorEl, nextLabel) => setState({
+			anchorEl: nextAnchorEl,
+			label: nextLabel
+		})
+	}), []);
+	return /* @__PURE__ */ jsx(Tooltip, {
+		arrow: true,
+		disableInteractive: true,
+		open: anchorEl !== null,
+		placement: "top",
+		slotProps: {
+			popper: {
+				anchorEl,
+				modifiers: [{
+					name: "offset",
+					options: { offset: [0, MAIN_AXIS_OFFSET] }
+				}]
+			},
+			tooltip: { style: { backgroundColor: residueTooltipBackgroundColor } },
+			arrow: { style: { color: residueTooltipBackgroundColor } }
+		},
+		title: label,
+		children: /* @__PURE__ */ jsx("span", { style: {
+			height: 0,
+			position: "fixed",
+			width: 0
+		} })
+	});
+});
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/components/Sequence/index.tsx
+/**
+* One residue. Not a component: the grid can hold thousands of these, and
+* giving each its own fiber costs more than it saves, since the markers that
+* actually change bypass React anyway.
+*/
+function renderResidue(sequenceWrapper, seqIdx, seqNum) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: getResidueClass(sequenceWrapper, seqIdx),
+		"data-seqid": seqIdx,
+		children: [seqNum && /* @__PURE__ */ jsx("span", {
+			className: "msp-sequence-number",
+			children: seqNum
+		}), sequenceWrapper.residueLabel(seqIdx)]
+	}, seqIdx);
+}
+/** Interactive residue grid, kept in sync with the 3D view's hover and selection. */
+const Sequence = ({ chainLabel, hideSequenceNumbers, residueColors, sequenceNumberPeriod, sequenceWrapper }) => {
+	const containerRef = useRef(null);
+	/** Scratch location reused by every sequence-number lookup below. */
+	const locationRef = useRef(StructureElement.Location.create(void 0));
+	useResidueMarkers({
+		containerRef,
+		residueColors,
+		sequenceWrapper
+	});
+	const { handlers, tooltipRef } = useResiduePointer({
+		containerRef,
+		sequenceWrapper
+	});
+	const period = resolveSequenceNumberPeriod(sequenceWrapper, locationRef.current, sequenceNumberPeriod);
+	const groups = [];
+	for (let start = 0; start < sequenceWrapper.length; start += 10) {
+		const end = Math.min(start + 10, sequenceWrapper.length);
+		const residues = [];
+		for (let i = start; i < end; i++) {
+			const showNum = !hideSequenceNumbers && i % period === 0;
+			residues.push(renderResidue(sequenceWrapper, i, showNum ? getSequenceNumber(sequenceWrapper, i, locationRef.current) : null));
+		}
+		groups.push(/* @__PURE__ */ jsx("span", { children: residues }, `group-${start}`));
+	}
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(ResidueGrid, _objectSpread2(_objectSpread2({
+		"aria-label": buildSequenceLabel(sequenceWrapper, chainLabel),
+		className: "msp-sequence-wrapper",
+		ref: containerRef,
+		role: "img"
+	}, handlers), {}, { children: groups })), /* @__PURE__ */ jsx(ResidueTooltip, { ref: tooltipRef })] });
+};
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/utils/copyText.ts
+/**
+* Writes `text` to the clipboard.
+*
+* The async Clipboard API is preferred, but nested srcdoc sandboxes — MCP
+* inspectors, Claude Desktop, and similar hosts — often omit `clipboard-write`
+* from their Permissions Policy, so `navigator.clipboard.writeText` rejects
+* even on a user click. `document.execCommand("copy")` only needs that click, so
+* it covers those hosts without the consumer having to patch the bundle.
+*/
+function copyText(text) {
+	var _navigator$clipboard;
+	if (!((_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText)) return copyWithSelection(text);
+	return navigator.clipboard.writeText(text).catch(() => copyWithSelection(text));
+}
+/**
+* Copies by selecting a transient textarea. Must run under user activation,
+* which a click still has after the Clipboard API has been refused.
+*/
+function copyWithSelection(text) {
+	return new Promise((resolve, reject) => {
+		const area = document.createElement("textarea");
+		area.value = text;
+		area.setAttribute("readonly", "");
+		area.setAttribute("aria-hidden", "true");
+		area.style.position = "fixed";
+		area.style.top = "-1000px";
+		document.body.appendChild(area);
+		area.select();
+		area.setSelectionRange(0, text.length);
+		let copied = false;
+		try {
+			copied = document.execCommand("copy");
+		} catch (_unused) {
+			copied = false;
+		}
+		area.remove();
+		if (copied) resolve();
+		else reject(/* @__PURE__ */ new Error("The host blocked clipboard access."));
+	});
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/utils/sequenceText.ts
+/**
+* The structure's residues as text, one section per chain separated by
+* `CHAIN_SEPARATOR`. Placeholder entries contribute nothing, since they have no
+* residues to write.
+*/
+function sequenceTextFromEntries(entries) {
+	return entries.filter((entry) => typeof entry.wrapper !== "string").map((entry) => {
+		const wrapper = entry.wrapper;
+		return Array.from({ length: wrapper.length }, (_, i) => wrapper.residueLabel(i)).join("");
+	}).join("|");
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useCopySequence.ts
+/**
+* Copies the structure's residues to the clipboard, chains separated so a
+* complex does not paste as one sequence, and holds a confirmation flag for a
+* moment afterwards.
+*/
+function useCopySequence(entries) {
+	const [copied, setCopied] = useState(false);
+	const timeoutRef = useRef(null);
+	useEffect(() => () => {
+		if (timeoutRef.current) clearTimeout(timeoutRef.current);
+	}, []);
+	return {
+		copied,
+		copySequence: useCallback(() => {
+			copyText(sequenceTextFromEntries(entries)).then(() => {
+				setCopied(true);
+				if (timeoutRef.current) clearTimeout(timeoutRef.current);
+				timeoutRef.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+			}).catch(() => {});
+		}, [entries])
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/hooks/useSequenceWrappers.ts
+const EMPTY_STATE = {
+	chainGroupId: -1,
+	modelEntityId: "",
+	operatorKey: "",
+	structure: Structure.Empty,
+	structureOptions: {
+		all: [],
+		options: []
+	},
+	structureRef: ""
+};
+function readStructure(plugin, ref) {
+	const cell = plugin.state.data.select(ref)[0];
+	if (!ref || !cell || !cell.obj) return Structure.Empty;
+	return cell.obj.data;
+}
+/** Picks the first structure, entity, chain, and operator Mol* offers. */
+function readInitialState(plugin) {
+	const structureOptions = getStructureOptions(plugin.state.data);
+	const structureRef = structureOptions.options[0][0];
+	const structure = readStructure(plugin, structureRef);
+	const modelEntityId = getModelEntityOptions(structure)[0][0];
+	const chainGroupId = getChainOptions(structure, modelEntityId)[0][0];
+	return {
+		chainGroupId,
+		modelEntityId,
+		operatorKey: getOperatorOptions(structure, modelEntityId, chainGroupId)[0][0],
+		structure,
+		structureOptions,
+		structureRef
+	};
+}
+function buildParams(state) {
+	const { modelEntityId, structure, structureOptions } = state;
+	const chainOptions = getChainOptions(structure, modelEntityId);
+	return {
+		chain: ParamDefinition.Select(chainOptions[0][0], chainOptions, { shortLabel: true }),
+		structure: ParamDefinition.Select(structureOptions.options[0][0], structureOptions.options, { shortLabel: true })
+	};
+}
+/**
+* The file's own name for a chain group, or `""` when the structure holds no
+* unit for it. Mol* groups its sequence panel by `chainGroupId`, but every
+* chain-level prop on the viewer is keyed by `auth_asym_id`, so the two have
+* to be bridged through the structure itself.
+*/
+function authAsymIdFor(structure, chainGroupId) {
+	const location = StructureElement.Location.create(structure);
+	for (const unit of structure.units) {
+		if (unit.chainGroupId !== chainGroupId) continue;
+		const element = unit.elements[0];
+		if (element === void 0) continue;
+		StructureElement.Location.set(location, structure, unit, element);
+		return StructureProperties.chain.auth_asym_id(location);
+	}
+	return "";
+}
+/**
+* One entry per polymer chain, in Mol*'s entity / chain / operator order.
+*
+* Polymer entities only. The heteroatoms on a chain are separate entities, and
+* Mol* would hand back a caption and a grid for each - a myoglobin listing
+* "Chain A" and then two more headers, both reading "Chain A_1 [auth A]", one
+* holding the heme and one the hydroxide. They are drawn in the 3D view and
+* they are not sequence, and a caption per ligand offers a chain toggle for
+* something that is not a chain.
+*/
+function buildEntries(structure, selection, _params) {
+	const entries = [];
+	for (const [modelEntityId] of getModelEntityOptions(structure, true)) for (const [chainGroupId, cLabel] of getChainOptions(structure, modelEntityId)) for (const [operatorKey] of getOperatorOptions(structure, modelEntityId, chainGroupId)) entries.push({
+		chainId: authAsymIdFor(structure, chainGroupId),
+		id: `${modelEntityId}:${chainGroupId}:${operatorKey}`,
+		label: cLabel,
+		wrapper: getSequenceWrapper({
+			chainGroupId,
+			modelEntityId,
+			operatorKey,
+			structure
+		}, selection)
+	});
+	return entries;
+}
+function countResidues(entries) {
+	return entries.reduce((sum, entry) => sum + (typeof entry.wrapper === "string" ? 0 : entry.wrapper.length), 0);
+}
+/**
+* The residue wrappers for every chain of the loaded structure, resynced
+* whenever Mol* creates, updates, or removes a structure object.
+*
+* The wrappers read the live selection, so they are rebuilt on each render
+* rather than memoized; that is what keeps the grid's dimming in step with a
+* selection made in the 3D view.
+*/
+function useSequenceWrappers() {
+	const plugin = usePlugin();
+	const [state, setState] = useState(EMPTY_STATE);
+	const sync = useCallback(() => {
+		if (arrayEqual(getStructureOptions(plugin.state.data).all, state.structureOptions.all)) return;
+		setState(readInitialState(plugin));
+	}, [plugin, state.structureOptions.all]);
+	useEffect(() => {
+		if (plugin.state.data.select(StateSelection.Generators.rootsOfType(PluginStateObject.Molecule.Structure)).length > 0) setState(readInitialState(plugin));
+	}, []);
+	useSubscribe(plugin.state.events.object.updated, ({ ref, obj }) => {
+		if (ref === state.structureRef && obj && obj.type === PluginStateObject.Molecule.Structure.type && obj.data !== state.structure) sync();
+	});
+	useSubscribe(plugin.state.events.object.created, ({ obj }) => {
+		if (obj && obj.type === PluginStateObject.Molecule.Structure.type) sync();
+	});
+	useSubscribe(plugin.state.events.object.removed, ({ obj }) => {
+		if (obj && obj.type === PluginStateObject.Molecule.Structure.type) sync();
+	});
+	const structure = readStructure(plugin, state.structureRef);
+	if (structure === Structure.Empty) return {
+		entries: [],
+		isEmpty: true,
+		residueCount: 0
+	};
+	const entries = buildEntries(structure, plugin.managers.structure.selection, buildParams(state));
+	return {
+		entries,
+		isEmpty: false,
+		residueCount: countResidues(entries)
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/SequenceView/index.tsx
+/**
+* Builds the Mol* sequence panel view.
+*
+* Like the viewport, Mol* renders this inside its own React root, so the theme
+* mode and the panel's background arrive through `viewSettings` and are watched
+* for changes rather than read once. The theme is re-supplied through a local
+* `ThemeProvider` for the Emotion styles and the SDS `Tooltip` below.
+*/
+function createSequenceView(viewSettings) {
+	return function SequenceView() {
+		const { mode, theme } = useMolstarTheme(viewSettings);
+		const backgroundColor = useViewSetting(viewSettings, (s) => s.sequenceViewerBackgroundColor);
+		const hiddenChains = useViewSetting(viewSettings, (s) => s.hiddenChains);
+		const onChainHover = useViewSetting(viewSettings, (s) => s.onChainHover);
+		const onChainSelect = useViewSetting(viewSettings, (s) => s.onChainSelect);
+		const onChainToggle = useViewSetting(viewSettings, (s) => s.onChainToggle);
+		const selectedChains = useViewSetting(viewSettings, (s) => s.selectedChains);
+		const { entries, isEmpty, residueCount } = useSequenceWrappers();
+		const { copied, copySequence } = useCopySequence(entries);
+		const drag = useCreateSequenceDrag();
+		if (isEmpty) return /* @__PURE__ */ jsx(ThemeProvider, {
+			theme,
+			children: /* @__PURE__ */ jsx(EmptyState, {
+				backgroundColor,
+				className: "msp-sequence",
+				children: "No structure available"
+			})
+		});
+		const residueColors = residueColorsForMode(mode);
+		const showChainLabels = entries.length > 1;
+		return /* @__PURE__ */ jsx(ThemeProvider, {
+			theme,
+			children: /* @__PURE__ */ jsxs(SequencePanel, {
+				backgroundColor,
+				children: [/* @__PURE__ */ jsxs(PanelHeader, { children: [
+					/* @__PURE__ */ jsx(PanelTitle, { children: "Sequence" }),
+					/* @__PURE__ */ jsx(Tooltip, {
+						arrow: true,
+						placement: "top",
+						title: copied ? "Copied!" : "Copy",
+						children: /* @__PURE__ */ jsx(CopyButton, {
+							"aria-label": "Copy sequence to clipboard",
+							onClick: copySequence,
+							type: "button",
+							children: copied ? /* @__PURE__ */ jsx(CheckIcon, { size: 16 }) : /* @__PURE__ */ jsx(CopyIcon, { size: 16 })
+						})
+					}),
+					/* @__PURE__ */ jsxs(ResidueCount, { children: [/* @__PURE__ */ jsx(ResidueCountLabel, { children: "Residues" }), /* @__PURE__ */ jsx(ResidueCountValue, { children: residueCount })] })
+				] }), /* @__PURE__ */ jsx(SequenceScroller, {
+					backgroundColor,
+					children: /* @__PURE__ */ jsx(SequenceDragProvider, {
+						value: drag,
+						children: /* @__PURE__ */ jsx(SequenceScrollArea, {
+							className: "msp-sequence msp-sequence-wrapper-non-empty",
+							onMouseLeave: drag.clearAnchor,
+							children: entries.map((s) => {
+								var _hiddenChains$has, _selectedChains$has;
+								const hidden = (_hiddenChains$has = hiddenChains === null || hiddenChains === void 0 ? void 0 : hiddenChains.has(s.chainId)) !== null && _hiddenChains$has !== void 0 ? _hiddenChains$has : false;
+								const grid = typeof s.wrapper === "string" ? /* @__PURE__ */ jsx("div", {
+									className: "msp-sequence-wrapper",
+									children: s.wrapper
+								}) : /* @__PURE__ */ jsx(Sequence, {
+									chainLabel: showChainLabels ? s.label : void 0,
+									residueColors,
+									sequenceWrapper: s.wrapper
+								});
+								return /* @__PURE__ */ jsxs(Fragment, { children: [showChainLabels && /* @__PURE__ */ jsx(ChainHeader, {
+									chainId: s.chainId,
+									isHidden: hidden,
+									isSelected: (_selectedChains$has = selectedChains === null || selectedChains === void 0 ? void 0 : selectedChains.has(s.chainId)) !== null && _selectedChains$has !== void 0 ? _selectedChains$has : false,
+									label: s.label,
+									onHover: onChainHover,
+									onSelect: onChainSelect,
+									onToggle: onChainToggle
+								}), hidden ? /* @__PURE__ */ jsx(HiddenChainGroup, { children: grid }) : grid] }, s.id);
+							})
+						})
+					})
+				})]
+			})
+		});
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/axes.ts
+/**
+* The orientation axes widget, as Mol* parameterizes it.
+*
+* Shared rather than declared where it is used, because two different parts of
+* Mol* take the same shape: the live canvas takes it as
+* `camera.helper.axes`, and the screenshot helper takes it as its own `axes`,
+* so an image can carry the widget or leave it out independently of the view
+* it was captured from.
+*/
+const AXES_ON = {
+	name: "on",
+	params: {
+		alpha: .51,
+		colorX: 16711680,
+		colorY: 32768,
+		colorZ: 255,
+		labelColorX: 8421504,
+		labelColorY: 8421504,
+		labelColorZ: 8421504,
+		labelOpacity: 1,
+		labelScale: .25,
+		labelX: "X",
+		labelY: "Y",
+		labelZ: "Z",
+		location: "bottom-left",
+		locationOffsetX: 0,
+		locationOffsetY: 0,
+		originColor: 8421504,
+		planeColorXY: 8421504,
+		planeColorXZ: 8421504,
+		planeColorYZ: 8421504,
+		radiusScale: .075,
+		scale: .15,
+		showLabels: false,
+		showPlanes: true
+	}
+};
+const AXES_OFF = {
+	name: "off",
+	params: {}
+};
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/color.ts
+/** Parses `#RRGGBB` (or `RRGGBB`) into a Mol* `Color`. */
+function parseHexColor(hex) {
+	const h = hex.replace("#", "");
+	return Color.fromRgb(parseInt(h.substring(0, 2), 16), parseInt(h.substring(2, 4), 16), parseInt(h.substring(4, 6), 16));
+}
+/**
+* Parses a theme color into a Mol* `Color`, falling back when the token is
+* missing or is a format Mol* cannot consume (theme values are hex in practice,
+* but the palette types allow any CSS color string).
+*/
+function themeColor(value, fallback) {
+	const candidate = value === null || value === void 0 ? void 0 : value.trim();
+	return parseHexColor(candidate !== void 0 && /^#?[0-9a-f]{6}$/i.test(candidate) ? candidate : fallback);
+}
+/**
+* Neutral fill for residues with no overlay value. Sits between the light and
+* dark backgrounds so unhighlighted geometry stays legible in both modes.
+*/
+function neutralResidueColor(mode) {
+	const g = mode === "dark" ? 100 : 180;
+	return Color.fromRgb(g, g, g);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/screenshot.ts
+/**
+* Each resolution as the Mol* preset that produces it: 1280x720, 1920x1080,
+* 3840x2160, 7680x4320. Named here rather than given as dimensions so the
+* aspect stays Mol*'s to choose.
+*
+* Mol*'s own `viewport` preset - the canvas at its current size - is left out
+* deliberately: it makes the image depend on how big the viewer happens to be
+* on screen, which is not something a caller asking for "high" is asking for.
+*/
+const RESOLUTION_PRESETS = {
+	high: "ultra-hd",
+	low: "hd",
+	maximum: "8k-ultra-hd",
+	medium: "full-hd"
+};
+/** Painted behind the structure when a background is asked for but unreadable. */
+const FALLBACK_BACKGROUND = "#ffffff";
+/**
+* Downloads the structure as a PNG.
+*
+* Mol*'s screenshot helper renders its own pass rather than reading the canvas
+* back, so the image is drawn fresh at the requested size and carries its own
+* transparency and axes settings - none of which disturb the view on screen.
+*
+* A named background is the one exception. The helper only chooses between
+* transparent and whatever the renderer is already painting, so a color has to
+* be put on the canvas for the length of the capture and taken off afterwards.
+* `finally` is what guarantees the second half: leaving a figure's background
+* behind on the viewer would be a worse bug than a failed download.
+*/
+function downloadStructureImage(_x) {
+	return _downloadStructureImage.apply(this, arguments);
+}
+function _downloadStructureImage() {
+	_downloadStructureImage = _asyncToGenerator(function* (plugin, options = {}) {
+		const helper = plugin.helpers.viewportScreenshot;
+		if (!helper) return;
+		const { backgroundColor, filename, resolution = "medium", showAxes } = options;
+		const transparent = backgroundColor === void 0;
+		helper.behaviors.values.next(_objectSpread2(_objectSpread2({}, helper.behaviors.values.value), {}, {
+			axes: showAxes ? AXES_ON : AXES_OFF,
+			format: {
+				name: "png",
+				params: {}
+			},
+			resolution: {
+				name: RESOLUTION_PRESETS[resolution],
+				params: {}
+			},
+			transparent
+		}));
+		const canvas3d = plugin.canvas3d;
+		const painted = canvas3d === null || canvas3d === void 0 ? void 0 : canvas3d.props.renderer.backgroundColor;
+		const overrideBackground = !transparent && canvas3d !== void 0;
+		if (overrideBackground) canvas3d === null || canvas3d === void 0 || canvas3d.setProps({ renderer: { backgroundColor: themeColor(backgroundColor, FALLBACK_BACKGROUND) } });
+		try {
+			yield helper.download(filename);
+		} finally {
+			if (overrideBackground && painted !== void 0) canvas3d === null || canvas3d === void 0 || canvas3d.setProps({ renderer: { backgroundColor: painted } });
+		}
+	});
+	return _downloadStructureImage.apply(this, arguments);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/Viewport/constants.ts
+/**
+* Fraction of the bounding sphere radius within which the camera still counts
+* as sitting at the default view, absorbing easing and float error.
+*/
+const DEFAULT_VIEW_TOLERANCE = .02;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/Viewport/utils/camera.ts
+/** True when the camera's zoom/center differs from the default fit. */
+function isZoomedOffDefault(canvas3d) {
+	const { center, radius } = canvas3d.boundingSphereVisible;
+	if (radius <= 0) return false;
+	const { state } = canvas3d.camera;
+	const tolerance = radius * DEFAULT_VIEW_TOLERANCE;
+	return Math.abs(state.radius - radius) > tolerance || Vec3.distance(state.target, center) > tolerance;
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/Viewport/hooks/useCameraReset.ts
+/**
+* Tracks whether the camera has moved off the default view, and puts it back.
+*
+* The default view is the auto-fit to the structure's bounding sphere, so
+* "moved" means either the zoom/center has drifted off that fit or a manual
+* drag has rotated it - rotation has to be tracked separately, since it leaves
+* the zoom and center at the default and the bounding-sphere check cannot see
+* it.
+*/
+function useCameraReset() {
+	const plugin = usePlugin();
+	const [cameraChanged, setCameraChanged] = useState(false);
+	/**
+	* Mirrors the state above so the per-frame handler below can skip redundant
+	* updates without re-reading state through a stale closure.
+	*/
+	const cameraChangedRef = useRef(false);
+	const updateCameraChanged = useCallback((changed) => {
+		if (changed === cameraChangedRef.current) return;
+		cameraChangedRef.current = changed;
+		setCameraChanged(changed);
+	}, []);
+	/**
+	* A manual gesture (rotate via drag) moves the camera off the default view.
+	* Tracked separately from zoom because rotation leaves the zoom/center at
+	* the default fit, so the bounding-sphere check cannot detect it.
+	*/
+	const gesturedRef = useRef(false);
+	/**
+	* A (re)loaded structure auto-fits to the default view. Ignore camera
+	* changes until that fit transition settles so the button does not flash
+	* during load.
+	*/
+	const awaitingFitRef = useRef(true);
+	const fitStartedRef = useRef(false);
+	/**
+	* Reconciles the button visibility with the current camera. The button
+	* shows when the camera differs from the default view: either the
+	* zoom/center has moved off the bounding-sphere fit, or a manual gesture
+	* rotated the view.
+	*/
+	const syncCameraChanged = useCallback(() => {
+		const canvas3d = plugin.canvas3d;
+		if (!canvas3d) return;
+		const inTransition = canvas3d.camera.transition.inTransition;
+		if (awaitingFitRef.current) {
+			if (inTransition) {
+				fitStartedRef.current = true;
+				return;
+			}
+			if (!fitStartedRef.current && isZoomedOffDefault(canvas3d)) return;
+			awaitingFitRef.current = false;
+		}
+		if (inTransition) return;
+		updateCameraChanged(gesturedRef.current || isZoomedOffDefault(canvas3d));
+	}, [plugin, updateCameraChanged]);
+	useEffect(() => {
+		const subscriptions = [];
+		let cameraBound = false;
+		const bindCamera = () => {
+			const canvas3d = plugin.canvas3d;
+			if (!canvas3d || cameraBound) return;
+			cameraBound = true;
+			const setGestured = () => {
+				gesturedRef.current = true;
+				syncCameraChanged();
+			};
+			subscriptions.push(canvas3d.input.drag.subscribe(setGestured), canvas3d.input.wheel.subscribe(setGestured), plugin.state.data.events.object.created.subscribe(() => {
+				gesturedRef.current = false;
+				awaitingFitRef.current = true;
+				fitStartedRef.current = false;
+				updateCameraChanged(false);
+			}), canvas3d.didDraw.subscribe(syncCameraChanged));
+		};
+		subscriptions.push(plugin.behaviors.canvas3d.initialized.subscribe(bindCamera));
+		bindCamera();
+		return () => subscriptions.forEach((s) => s.unsubscribe());
+	}, [
+		plugin,
+		syncCameraChanged,
+		updateCameraChanged
+	]);
+	return {
+		cameraChanged,
+		resetCamera: useCallback(_asyncToGenerator(function* () {
+			yield PluginCommands.Camera.Reset(plugin, { durationMs: 250 });
+			yield new Promise((resolve) => setTimeout(resolve, 250));
+			yield PluginCommands.Camera.ResetAxes(plugin, { durationMs: 250 });
+			yield new Promise((resolve) => setTimeout(resolve, 250));
+			gesturedRef.current = false;
+			updateCameraChanged(false);
+		}), [plugin, updateCameraChanged])
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/components/Viewport/style.ts
+/**
+* Pinned to the lower-left of the viewport, clear of the sequence panel below
+* and the axes widget in the corner.
+*
+* Anchored by its bottom edge, so the buttons stack upwards: the last one
+* stays put where a reader last saw it, and an earlier one appearing or going
+* does not move the rest. Reset comes first in the markup and so sits above
+* capture.
+*/
+const ViewportButtonStack = styled("div")`
+  position: absolute;
+  bottom: 48px;
+  z-index: 10;
+  display: flex;
+  flex-direction: column;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      left: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
+    `;
+}}
+`;
+//#endregion
+//#region src/core/ProteinStructureViewer/components/Viewport/index.tsx
+/**
+* Builds the Mol* viewport view.
+*
+* Mol* instantiates view components inside its own React root, so they render
+* outside the consumer's provider tree and cannot read the theme from context.
+* `viewSettings` carries the mode in instead, and is watched rather than read
+* once so that a theme change after the plugin was created still lands here;
+* the mode is re-supplied via a local `ThemeProvider` so the Emotion styles
+* below resolve SDS tokens correctly.
+*/
+function createViewportView(viewSettings) {
+	return function ViewportWithReset() {
+		const plugin = usePlugin();
+		const { theme } = useMolstarTheme(viewSettings);
+		const { cameraChanged, resetCamera } = useCameraReset();
+		const showAxes = useViewSetting(viewSettings, (s) => {
+			var _s$showAxes;
+			return (_s$showAxes = s.showAxes) !== null && _s$showAxes !== void 0 ? _s$showAxes : true;
+		});
+		const download = useViewSetting(viewSettings, (s) => s.download);
+		/**
+		* Disabled while a capture is in flight. A high resolution takes long
+		* enough to click twice through, and each click renders its own pass.
+		*/
+		const [downloading, setDownloading] = useState(false);
+		const captureImage = useCallback(_asyncToGenerator(function* () {
+			if (!download) return;
+			setDownloading(true);
+			try {
+				yield downloadStructureImage(plugin, download);
+			} catch (error) {
+				console.error("Failed to download the structure image:", error);
+			} finally {
+				setDownloading(false);
+			}
+		}), [download, plugin]);
+		return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+			/* @__PURE__ */ jsx(Viewport, {}),
+			/* @__PURE__ */ jsx("div", {
+				className: "msp-highlight-toast-wrapper",
+				children: /* @__PURE__ */ jsx(Toasts, {})
+			}),
+			/* @__PURE__ */ jsx(ThemeProvider, {
+				theme,
+				children: /* @__PURE__ */ jsxs(ViewportButtonStack, { children: [/* @__PURE__ */ jsx("div", {
+					hidden: !showAxes || !cameraChanged,
+					children: /* @__PURE__ */ jsx(Tooltip, {
+						arrow: true,
+						placement: "right",
+						title: "Reset camera",
+						textAlign: "left",
+						children: /* @__PURE__ */ jsx(Button, {
+							"aria-label": "Reset camera",
+							onClick: resetCamera,
+							sdsStyle: "minimal",
+							sdsType: "secondary",
+							size: "medium",
+							children: /* @__PURE__ */ jsx(ArrowCounterClockwiseIcon, {})
+						})
+					})
+				}), download && /* @__PURE__ */ jsx(Tooltip, {
+					arrow: true,
+					placement: "right",
+					title: "Download image",
+					textAlign: "left",
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": "Download image of the structure",
+						disabled: downloading,
+						onClick: captureImage,
+						sdsStyle: "minimal",
+						sdsType: "secondary",
+						size: "medium",
+						children: /* @__PURE__ */ jsx(ApertureIcon, {})
+					})
+				})] })
+			})
+		] });
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/cameraFocus.ts
+/**
+* Margin (angstroms) added around a residue's bounding sphere when focusing,
+* matching Mol*'s default `FocusLoci` extra radius. Used both for the framing
+* radius that sets the zoom-in distance (floored at `FOCUS_MIN_RADIUS`) and for
+* the depth-clip anchor, so the focus crop matches Mol*'s default depth slab.
+*/
+const FOCUS_MIN_RADIUS = 8;
+const FOCUS_EXTRA_RADIUS = 4;
+/**
+* Never let the clip window collapse below this, so the focused residue and its
+* immediate neighborhood stay visible even at extreme zoom-in.
+*/
+const MIN_CLIP_RADIUS = 4;
+/** Camera transition length (ms) when zooming in on a residue. */
+const FOCUS_DURATION_MS = 250;
+/** Clip radius has to drift this far before it is worth redrawing. */
+const CLIP_EPSILON = .5;
+/**
+* Depth-clip radius at a given camera distance. The clip scales linearly with
+* distance, `ratio` being the clip radius per unit distance (fixed at focus so
+* the clip hugs the residue there), clamped to the scene. This keeps clipping
+* tied to the zoom:
+*  - at the focus zoom the clip hugs the residue, peeling the structure so the
+*    selected residue reads clearly;
+*  - zooming in shrinks the clip further, peeling deeper toward the residue;
+*  - zooming out grows the clip, revealing more of the structure, up to the
+*    whole scene (`radiusMax`) - the point at which nothing is cropped.
+*/
+function clipRadiusForDistance(distance, ratio, radiusMax) {
+	return Math.max(MIN_CLIP_RADIUS, Math.min(ratio * distance, radiusMax));
+}
+/**
+* Zooms the camera in on a residue. Uses Mol*'s focus framing for the camera
+* *position* (so the zoom level matches the built-in focus) but anchors the
+* clip tightly on the residue itself, and returns the clip-radius-per-distance
+* ratio used to keep clipping in sync with the zoom afterwards.
+*/
+function focusResidue(plugin, loci) {
+	var _plugin$canvas3d;
+	const camera = (_plugin$canvas3d = plugin.canvas3d) === null || _plugin$canvas3d === void 0 ? void 0 : _plugin$canvas3d.camera;
+	if (!camera) return null;
+	const sphere = Loci.getBoundingSphere(loci);
+	if (!sphere) return null;
+	const framingRadius = Math.max(sphere.radius + FOCUS_EXTRA_RADIUS, FOCUS_MIN_RADIUS);
+	const snapshot = camera.getFocus(sphere.center, framingRadius);
+	const focusDistance = camera.getTargetDistance(framingRadius);
+	const clipRatio = (sphere.radius + FOCUS_EXTRA_RADIUS) / focusDistance;
+	const radius = clipRadiusForDistance(focusDistance, clipRatio, camera.state.radiusMax);
+	camera.setState(_objectSpread2(_objectSpread2({}, snapshot), {}, { radius }), FOCUS_DURATION_MS);
+	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
+* this recomputes it after each draw: zooming in tightens the clip (peeling
+* toward the residue), zooming out widens it toward the whole structure. It is
+* a no-op when `getClipRatio` returns null (nothing focused) and while the
+* camera is mid-transition, so it does not fight the focus animation.
+*/
+function syncClipToZoom(plugin, getClipRatio) {
+	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$canvas3d4;
+		camera.setState({ radius });
+		(_plugin$canvas3d4 = plugin.canvas3d) === null || _plugin$canvas3d4 === void 0 || _plugin$canvas3d4.requestDraw();
+	}
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/chains.ts
+/**
+* The polymer of one chain, as named in the file. What each chain's cartoon is
+* built from, and so what makes a chain a thing Mol* can hide on its own.
+*
+* Paired with `chainLigandExpression`: between them they cover everything on a
+* chain the viewer draws, split by what it draws it as. The polymer
+* restriction is the one Mol*'s `polymer-cartoon` preset applied, and is what
+* keeps a heme from being handed to a representation that can only trace a
+* backbone.
+*/
+function chainPolymerExpression(chainId) {
+	return MolScriptBuilder.struct.generator.atomGroups({
+		"chain-test": MolScriptBuilder.core.rel.eq([MolScriptBuilder.ammp("auth_asym_id"), chainId]),
+		"entity-test": MolScriptBuilder.core.rel.eq([MolScriptBuilder.ammp("entityType"), "polymer"])
+	});
+}
+/**
+* Bonds worth following out of a ligand: the ones holding it to the protein.
+*
+* Mol*'s own pair, and metallic coordination is the half that matters most -
+* a heme's iron is held to its histidine by a coordination bond and not a
+* covalent one, so covalent alone would leave every metalloprotein's cofactor
+* looking dropped in rather than bound.
+*/
+const CONNECTING_BOND = MolScriptBuilder.core.flags.hasAny([MolScriptBuilder.struct.bondProperty.flags(), MolScriptBuilder.core.type.bitflags([BondType.fromNames(["covalent", "metal-coordination"])])]);
+/**
+* The heteroatoms of one chain - ligands, ions, glycans, lipids - along with
+* the residues holding them, which is what its ball-and-stick is built from.
+*
+* `non-polymer` is the one entity type a PDB's HETATM records land under,
+* ligands and ions alike, so there is nothing finer to test here: the
+* distinction Mol*'s presets draw between their `ligand`, `ion` and `lipid`
+* components is a residue-name lookup made to give each a slightly different
+* style, and all three are sticks. `branched` is the separate type glycans
+* arrive as.
+*
+* Water is the third type and is left out of the seed. Every solvent molecule
+* drawn as sticks buries the structure they surround, which is why Mol* draws
+* them at 60% alpha rather than plain, and none of them is what "show the
+* ligands" asks for.
+*
+* One layer of bonds out from there, taken as whole residues, is what brings
+* the binding residue along - myoglobin's His93, say. Without it the heme
+* floats unattached in the middle of a cartoon it is visibly bonded to, and
+* the bond drawn to its iron ends in mid-air. One layer and no more: the
+* residue that holds the ligand, not that residue's own neighbours.
+*
+* Intersected back with the chain, so everything a chain is drawn with belongs
+* to that chain. A ligand bonded across an interface would otherwise leave the
+* partner chain's residue in this chain's component, somewhere hiding the
+* partner chain could not reach.
+*/
+function chainLigandExpression(chainId) {
+	const onThisChain = MolScriptBuilder.core.rel.eq([MolScriptBuilder.ammp("auth_asym_id"), chainId]);
+	return MolScriptBuilder.struct.modifier.union([MolScriptBuilder.struct.modifier.intersectBy({
+		0: MolScriptBuilder.struct.modifier.includeConnected({
+			0: MolScriptBuilder.struct.generator.atomGroups({
+				"chain-test": onThisChain,
+				"entity-test": MolScriptBuilder.core.set.has([MolScriptBuilder.set("non-polymer", "branched"), MolScriptBuilder.ammp("entityType")])
+			}),
+			"as-whole-residues": true,
+			"bond-test": CONNECTING_BOND,
+			"layer-count": 1
+		}),
+		by: MolScriptBuilder.struct.generator.atomGroups({ "chain-test": onThisChain })
+	})]);
+}
+/**
+* Matches how the sequence panel captions its chains, which reaches the same
+* label through Mol*'s own `getChainOptions`. Deriving it the same way is what
+* keeps a chain from going by one name in the legend and another in the panel.
+*/
+const CHAIN_LABEL_OPTIONS = {
+	granularity: "chain",
+	hidePrefix: true,
+	htmlStyling: false
+};
+/**
+* Reads the chains of a structure and the polymer residues on each.
+*
+* Residue indices are Mol*'s residue keys, counting residues in file order
+* across the whole structure, so what is reported here addresses the same
+* residues as `plddt`, `residueOverlay` and `selection`.
+*
+* Heteroatoms are drawn (see `chainLigandExpression`) but are not counted
+* here. A heme is a residue to the file and not to a reader: it is no part of
+* the sequence the panel lists, and averaging a confidence score over it would
+* divide by a residue that has none.
+*
+* Residues are gathered into a set rather than inferred from the ends: a chain
+* carrying several symmetry operators repeats each of its residues once per
+* operator, and a structure whose chains interleave leaves a chain's indices
+* non-contiguous. Neither is what a predicted complex looks like, but a range
+* would misread both.
+*/
+function scanChains(structure) {
+	const accumulators = /* @__PURE__ */ new Map();
+	const location = StructureElement.Location.create(structure);
+	for (const unit of structure.units) {
+		location.unit = unit;
+		for (let i = 0; i < unit.elements.length; i++) {
+			location.element = unit.elements[i];
+			const chainId = StructureProperties.chain.auth_asym_id(location);
+			let chain = accumulators.get(chainId);
+			if (!chain) {
+				chain = {
+					chainId,
+					label: elementLabel(location, CHAIN_LABEL_OPTIONS),
+					residues: /* @__PURE__ */ new Set()
+				};
+				accumulators.set(chainId, chain);
+			}
+			if (StructureProperties.entity.type(location) !== "polymer") continue;
+			chain.residues.add(StructureProperties.residue.key(location));
+		}
+	}
+	const ordered = [...accumulators.values()].filter((chain) => chain.residues.size > 0).map((chain) => _objectSpread2(_objectSpread2({}, chain), {}, { residues: [...chain.residues].sort((a, b) => a - b) })).sort((a, b) => {
+		var _a$residues$, _b$residues$;
+		return ((_a$residues$ = a.residues[0]) !== null && _a$residues$ !== void 0 ? _a$residues$ : 0) - ((_b$residues$ = b.residues[0]) !== null && _b$residues$ !== void 0 ? _b$residues$ : 0);
+	});
+	return {
+		chainLabels: new Map([...accumulators.values()].map(({ chainId, label }) => [chainId, label])),
+		chains: ordered.map(({ chainId, label, residues }) => {
+			var _residues, _residues$;
+			return {
+				chainId,
+				endIndex: (_residues = residues[residues.length - 1]) !== null && _residues !== void 0 ? _residues : 0,
+				label,
+				residueCount: residues.length,
+				startIndex: (_residues$ = residues[0]) !== null && _residues$ !== void 0 ? _residues$ : 0
+			};
+		}),
+		residuesByChain: new Map(ordered.map(({ chainId, residues }) => [chainId, residues]))
+	};
+}
+/** True when the two lists name the same chains, in the same order. */
+function chainsEqual(a, b) {
+	return a.length === b.length && a.every((chain, i) => {
+		const other = b[i];
+		return other !== void 0 && chain.chainId === other.chainId && chain.startIndex === other.startIndex && chain.endIndex === other.endIndex && chain.residueCount === other.residueCount;
+	});
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/molstarSpec.ts
+/**
+* The spec's list-valued keys. These are appended rather than merged: Mol*
+* reads them as collections, so a consumer's entries join the viewer's instead
+* of replacing them.
+*
+* `config` is the one where order carries meaning - Mol* folds the list into a
+* Map in order, so a later entry overwrites an earlier one, and appending is
+* what lets a consumer override a setting the viewer chose.
+*/
+const LIST_KEYS = [
+	"actions",
+	"animations",
+	"behaviors",
+	"config",
+	"customFormats",
+	"customParamEditors"
+];
+/**
+* Whether a value should be merged into rather than replaced.
+*
+* Only object literals qualify. Arrays are collections, and the spec is full
+* of React components and Mol* class instances, all of which are values in
+* their own right - merging into one would take it apart.
+*/
+function isPlainObject(value) {
+	if (typeof value !== "object" || value === null || Array.isArray(value)) return false;
+	const proto = Object.getPrototypeOf(value);
+	return proto === Object.prototype || proto === null;
+}
+function deepMerge(base, override) {
+	if (!isPlainObject(base) || !isPlainObject(override)) return override;
+	const merged = _objectSpread2({}, base);
+	for (const [key, value] of Object.entries(override)) merged[key] = key in base ? deepMerge(base[key], value) : value;
+	return merged;
+}
+function withoutLists(spec) {
+	const rest = _objectSpread2({}, spec);
+	for (const key of LIST_KEYS) delete rest[key];
+	return rest;
+}
+/**
+* Lays a consumer's Mol* spec over the viewer's own.
+*
+* The viewer builds a spec of its own - the sequence panel and viewport it
+* renders, the controls it hides, the behaviors it drops - and this is how a
+* consumer reaches the rest of Mol* without the viewer having to grow a prop
+* per setting. Anything the consumer names wins, so `canvas3d.renderer` or a
+* `PluginConfig` item can be set to something other than the default the
+* viewer picked.
+*
+* The one thing it cannot do is take something away: `behaviors` is appended
+* to, so a behavior the viewer removed - Mol*'s click-to-zoom camera - stays
+* removed, and one the viewer kept cannot be dropped.
+*/
+function mergeMolstarSpec(base, override) {
+	if (!override) return base;
+	const merged = deepMerge(withoutLists(base), withoutLists(override));
+	for (const key of LIST_KEYS) {
+		var _base, _override;
+		const ours = (_base = base[key]) !== null && _base !== void 0 ? _base : [];
+		const theirs = (_override = override[key]) !== null && _override !== void 0 ? _override : [];
+		if (ours.length > 0 || theirs.length > 0) merged[key] = [...ours, ...theirs];
+	}
+	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";
+/** Painted for a chain with no color assigned, or one assigned a bad value. */
+const DEFAULT_CHAIN_COLOR_HEX = "#808080";
+const DEFAULT_CHAIN_COLOR = Color.fromRgb(128, 128, 128);
+/**
+* Builds a Mol* color theme that paints each chain its own color.
+*
+* This stands in for Mol*'s built-in `chain-id` theme, which picks its own
+* colors from a palette we cannot read back. Owning the assignment is what
+* lets the chain legend show a swatch that matches the structure, rather than
+* a key for colors it has to guess at.
+*
+* Created per plugin instance, and its state read live inside `color()`, for
+* the same reasons as the residue value theme beside it: several viewers can
+* color chains differently on one page, and recoloring does not rebuild the
+* structure.
+*/
+function createChainColorTheme() {
+	const state = {
+		colors: /* @__PURE__ */ new Map(),
+		version: 0
+	};
+	const provider = {
+		category: "chain property",
+		defaultValues: {},
+		factory() {
+			const { colors } = state;
+			const parsed = /* @__PURE__ */ new Map();
+			for (const [chainId, hex] of colors) parsed.set(chainId, themeColor(hex, DEFAULT_CHAIN_COLOR_HEX));
+			return {
+				color(location) {
+					var _parsed$get;
+					if (!StructureElement.Location.is(location)) return DEFAULT_CHAIN_COLOR;
+					const chainId = StructureProperties.chain.auth_asym_id(location);
+					return (_parsed$get = parsed.get(chainId)) !== null && _parsed$get !== void 0 ? _parsed$get : DEFAULT_CHAIN_COLOR;
+				},
+				contextHash: state.version,
+				description: "Color residues by the chain they sit on",
+				factory: provider.factory,
+				granularity: "group",
+				props: {}
+			};
+		},
+		getParams: () => ({}),
+		isApplicable: () => true,
+		label: "Chain Color",
+		name: CHAIN_COLOR_THEME_NAME
+	};
+	return {
+		provider,
+		setState(colors) {
+			state.colors = colors;
+			state.version++;
+		}
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/plddt.ts
+/** Mol* color theme name under which pLDDT coloring is registered. */
+const PLDDT_THEME_NAME = "plddt-bfactor";
+/**
+* AlphaFold's pLDDT confidence bands. Thresholds are on the 0-1 scale that
+* `plddt` values use, ascending from lowest to highest confidence.
+*/
+const PLDDT_COLOR_SCALE = {
+	kind: "stepped",
+	stops: [
+		{
+			color: "#FF7C45",
+			label: "0.5",
+			threshold: .5
+		},
+		{
+			color: "#FFDB11",
+			label: "0.7",
+			threshold: .7
+		},
+		{
+			color: "#64CBF3",
+			label: "0.9",
+			threshold: .9
+		},
+		{
+			color: "#0053D5",
+			label: "1.0",
+			threshold: 1
+		}
+	]
+};
+const PLDDT_BANDS = PLDDT_COLOR_SCALE.kind === "stepped" ? PLDDT_COLOR_SCALE.stops : [];
+/**
+* The band colors alone, ascending from least to most confident.
+*
+* What the chain legend shows in place of a single color while pLDDT is
+* painting the structure: no one color stands for a chain then, so the swatch
+* carries the whole key instead.
+*/
+const PLDDT_BAND_COLORS = PLDDT_BANDS.map((stop) => stop.color);
+const DEFAULT_PLDDT_COLOR = Color.fromRgb(128, 128, 128);
+/**
+* Maps a pLDDT confidence score on the 0-100 B-factor scale to its band color.
+* `PLDDT_COLOR_SCALE` thresholds are on the 0-1 scale, so the score is
+* normalized before it is sampled.
+*/
+function plddtToColor(value) {
+	const [r, g, b] = sampleSteppedScale(PLDDT_BANDS, value / 100);
+	return Color.fromRgb(r, g, b);
+}
+/**
+* Rewrites a PDB file's B-factor column with pLDDT scores so Mol* can read them
+* off the parsed model. B-factors occupy columns 60-66 of ATOM/HETATM lines;
+* 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.
+*
+* A residue is identified by chain, sequence number and insertion code. The
+* code has to be part of that: `10` and `10A` are two residues, Mol* counts
+* them as two, and treating them as one here would hand every residue after
+* them its neighbour's score.
+*/
+function injectPlddtIntoPdb(pdbData, plddtValues) {
+	const lines = pdbData.split("\n");
+	let residueIndex = -1;
+	let lastResidue = "";
+	return lines.map((line) => {
+		var _plddtValues$residueI;
+		if (!line.startsWith("ATOM") && !line.startsWith("HETATM")) return line;
+		const residue = line.substring(21, 27);
+		if (residue !== lastResidue) {
+			residueIndex++;
+			lastResidue = residue;
+		}
+		const bfactorStr = (residueIndex < plddtValues.length ? ((_plddtValues$residueI = plddtValues[residueIndex]) !== null && _plddtValues$residueI !== void 0 ? _plddtValues$residueI : 0) * 100 : 50).toFixed(2).padStart(6, " ");
+		const paddedLine = line.padEnd(66, " ");
+		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 `injectPlddt`. Registered per plugin instance.
+*/
+const PlddtColoring = CustomElementProperty.create({
+	coloring: {
+		defaultColor: DEFAULT_PLDDT_COLOR,
+		getColor(e) {
+			return plddtToColor(e);
+		}
+	},
+	getData(model) {
+		const map = /* @__PURE__ */ new Map();
+		const atomCount = model.atomicHierarchy.atoms._rowCount;
+		for (let i = 0; i < atomCount; i++) map.set(i, model.atomicConformation.B_iso_or_equiv.value(i));
+		return { value: map };
+	},
+	label: "pLDDT",
+	name: PLDDT_THEME_NAME
+});
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/residueValueTheme.ts
+/** Mol* color theme name under which residue value overlays are registered. */
+const RESIDUE_VALUE_THEME_NAME = "residue-value";
+/**
+* Builds a Mol* color theme that paints residues by an arbitrary per-residue
+* value.
+*
+* The theme is created per plugin instance rather than shared at module scope,
+* so several viewers can render different overlays on the same page. Its state
+* lives in the closure below and is read live inside `color()`, which is what
+* lets an overlay update recolor the structure without rebuilding it.
+*/
+function createResidueValueTheme(mode) {
+	const state = {
+		colorScale: PLASMA_COLOR_SCALE,
+		max: 1,
+		min: 0,
+		mode,
+		values: /* @__PURE__ */ new Map(),
+		version: 0
+	};
+	const provider = {
+		category: "residue property",
+		defaultValues: {},
+		factory() {
+			const { colorScale, max, min, mode: currentMode, values } = state;
+			const neutral = neutralResidueColor(currentMode);
+			return {
+				color(location) {
+					if (!StructureElement.Location.is(location)) return neutral;
+					const value = values.get(StructureProperties.residue.key(location));
+					if (value === void 0) return neutral;
+					const rgb = sampleColorScale(colorScale, value, max, min);
+					return rgb ? Color.fromRgb(rgb[0], rgb[1], rgb[2]) : neutral;
+				},
+				contextHash: state.version,
+				description: "Color residues by a per-residue value",
+				factory: provider.factory,
+				granularity: "group",
+				props: {}
+			};
+		},
+		getParams: () => ({}),
+		isApplicable: () => true,
+		label: "Residue Value",
+		name: RESIDUE_VALUE_THEME_NAME
+	};
+	return {
+		provider,
+		setState(next) {
+			Object.assign(state, next);
+			state.version++;
+		}
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useMolstarPlugin.ts
+/**
+* Theme used when neither pLDDT scores nor an overlay are supplied. Our own
+* per-chain theme rather than Mol*'s built-in `chain-id`, so the chain legend
+* can show swatches that match the structure instead of guessing at the colors
+* Mol* picked.
+*/
+const FALLBACK_THEME_NAME = CHAIN_COLOR_THEME_NAME;
+/** Delay before retrying initialization while the container has no size. */
+const LAYOUT_RETRY_MS = 100;
+/** How long to wait for a frame before starting without one. */
+const FRAME_WAIT_MS = 100;
+/**
+* Yield once so the container can be laid out before it is measured.
+*
+* `requestAnimationFrame` does not fire while the document is hidden -- a
+* background tab, a collapsed pane, or a headless capture that never paints --
+* and awaiting it alone leaves the viewer parked forever on a page that has in
+* fact been laid out. Racing it against a timeout keeps the fast path on a
+* visible page and still starts on a hidden one, where the size check below is
+* what actually guards against measuring too early.
+*
+* The loser of the race is cancelled rather than left to fire: on a visible
+* page this runs once per viewer, and a grid of them would otherwise each keep
+* a stray timer alive past the frame that already resolved.
+*/
+function nextFrame() {
+	return new Promise((resolve) => {
+		const done = () => {
+			cancelAnimationFrame(frame);
+			clearTimeout(timer);
+			resolve();
+		};
+		const frame = requestAnimationFrame(done);
+		const timer = setTimeout(done, FRAME_WAIT_MS);
+	});
+}
+/**
+* Hover fills the geometry with a tint; selection stays outline-only. Mol*'s
+* `colorMarker` is a global toggle for the per-fragment marker tint, so it is
+* scoped to hover via the per-state strengths below.
+*/
+const HIGHLIGHT_STRENGTH = .2;
+const SELECT_STRENGTH = 0;
+/**
+* Turns the screenshot controls off, on the versions of Mol* that have them.
+*
+* `ShowScreenshotControls` arrived in Mol* 5 and this package's peer range
+* reaches back to 4, so the key is read through an index rather than named
+* directly: naming it would not compile against 4, and passing the resulting
+* `undefined` would ask Mol* to set a config item it has no name for. On 4
+* there are no screenshot controls to hide in the first place.
+*/
+const SCREENSHOT_CONTROLS_CONFIG = (() => {
+	const item = PluginConfig.Viewport.ShowScreenshotControls;
+	return item ? [[item, false]] : [];
+})();
+function setAxes(plugin, enabled) {
+	if (!plugin.canvas3d) return;
+	try {
+		plugin.canvas3d.setProps({ camera: { helper: { axes: enabled ? AXES_ON : AXES_OFF } } });
+	} catch (e) {
+		console.warn("Could not set axes:", e);
+	}
+}
+function createViewer(_x) {
+	return _createViewer.apply(this, arguments);
+}
+function _createViewer() {
+	_createViewer = _asyncToGenerator(function* ({ backgroundColor, chainColorTheme, edgeColor, highlightColor, molstarSpec, residueValueTheme, root, showAxes, showSequenceViewer, viewSettings }) {
+		var _spec$config;
+		const spec = DefaultPluginUISpec();
+		const behaviors = spec.behaviors.filter((b) => b.transformer !== PluginBehaviors.Camera.FocusLoci);
+		const plugin = yield createPluginUI({
+			render: renderReact18,
+			spec: mergeMolstarSpec(_objectSpread2(_objectSpread2({}, spec), {}, {
+				behaviors,
+				canvas3d: {
+					camera: { helper: { axes: showAxes ? AXES_ON : AXES_OFF } },
+					marking: {
+						highlightEdgeColor: edgeColor,
+						selectEdgeColor: edgeColor
+					},
+					renderer: {
+						backgroundColor,
+						colorMarker: true,
+						highlightColor,
+						highlightStrength: HIGHLIGHT_STRENGTH,
+						selectStrength: SELECT_STRENGTH
+					}
+				},
+				components: {
+					controls: {
+						bottom: "none",
+						left: "none",
+						right: "none"
+					},
+					remoteState: "none",
+					sequenceViewer: { view: createSequenceView(viewSettings) },
+					viewport: { view: createViewportView(viewSettings) }
+				},
+				config: [
+					...(_spec$config = spec.config) !== null && _spec$config !== void 0 ? _spec$config : [],
+					[PluginConfig.Viewport.ShowExpand, false],
+					[PluginConfig.Viewport.ShowControls, false],
+					[PluginConfig.Viewport.ShowSettings, false],
+					[PluginConfig.Viewport.ShowSelectionMode, false],
+					[PluginConfig.Viewport.ShowAnimation, false],
+					[PluginConfig.Viewport.ShowTrajectoryControls, false],
+					...SCREENSHOT_CONTROLS_CONFIG
+				],
+				layout: { initial: {
+					controlsDisplay: "reactive",
+					isExpanded: false,
+					regionState: {
+						bottom: "hidden",
+						left: "hidden",
+						right: "hidden",
+						top: showSequenceViewer ? "full" : "hidden"
+					}
+				} }
+			}), molstarSpec),
+			target: root
+		});
+		const registry = plugin.representation.structure.themes.colorThemeRegistry;
+		if (PlddtColoring.colorThemeProvider) registry.add(PlddtColoring.colorThemeProvider);
+		registry.add(residueValueTheme.provider);
+		registry.add(chainColorTheme.provider);
+		for (const p of [...plugin.managers.lociLabels.providers]) plugin.managers.lociLabels.removeProvider(p);
+		plugin.managers.structure.focus.behaviors.current.subscribe((entry) => {
+			const select = plugin.managers.interactivity.lociSelects;
+			if (entry === null || entry === void 0 ? void 0 : entry.loci) select.selectOnly({ loci: entry.loci });
+			else select.deselectAll();
+		});
+		return plugin;
+	});
+	return _createViewer.apply(this, arguments);
+}
+/**
+* The representation parameters Mol*'s own presets compute, read from the same
+* manager state they read. Ported rather than hardcoded so a chain drawn here
+* looks exactly like the one the preset used to draw. Mol* hands the same set
+* to its cartoons and its ball-and-sticks, and so does this.
+*/
+function representationTypeParams(plugin) {
+	const { hydrogens, ignoreLight, visualQuality } = plugin.managers.structure.component.state.options;
+	return {
+		ignoreHydrogens: hydrogens !== "all",
+		ignoreHydrogensVariant: hydrogens === "only-polar" ? "non-polar" : "all",
+		ignoreLight,
+		quality: visualQuality
+	};
+}
+/**
+* The two halves of a chain the viewer draws. Each names the component its
+* half is built under and tags the representation drawn over it, and it is
+* that tag `applyColorTheme` reads back to tell the two apart.
+*/
+const POLYMER_PART = "polymer";
+const LIGAND_PART = "ligand";
+/**
+* True for the representation drawing a chain's heteroatoms.
+*
+* Read off the tag put on the representation when it was built, rather than
+* off the component's key. Mol* does not store the key as it was given: it
+* files components under `structure-component-<key>`, so a test against the
+* key as written here silently matches nothing, and every ligand quietly takes
+* the structure-wide theme instead. The tag survives untouched.
+*/
+function isLigandRepresentation(representation) {
+	var _representation$cell$;
+	return ((_representation$cell$ = representation.cell.transform.tags) === null || _representation$cell$ === void 0 ? void 0 : _representation$cell$.includes(LIGAND_PART)) === true;
+}
+/**
+* How heteroatoms are colored: the theme Mol* puts on a ball-and-stick when
+* left to itself, with the parameters it chooses too.
+*
+* Named rather than left blank only so that it survives `applyColorTheme`,
+* which would otherwise repaint the ligands along with everything else. The
+* structure-wide theme is the wrong answer for them twice over: a heme reads
+* as a heme because its iron is orange and its nitrogens are blue, which one
+* flat color throws away, and pLDDT and residue overlays have no value for a
+* HETATM to be colored by at all.
+*/
+const ELEMENT_THEME = "element-symbol";
+/**
+* Draws one chain: its polymer as a cartoon, its ligands and ions as
+* ball-and-stick.
+*
+* Two components rather than one, because a component is what a representation
+* attaches to and neither representation suits both halves - a cartoon has no
+* backbone to trace through a heme, and a ball-and-stick over the whole chain
+* would draw every protein atom as a sphere.
+*
+* Hands back the refs of whichever components the chain turned out to have,
+* which is what `setSubtreeVisibility` is later pointed at. Grouping them
+* under the chain is what makes hiding a chain take its ligands with it.
+*/
+function buildChainComponents(_x5, _x6, _x7, _x8) {
+	return _buildChainComponents.apply(this, arguments);
+}
+function _buildChainComponents() {
+	_buildChainComponents = _asyncToGenerator(function* (plugin, structure, chain, typeParams) {
+		const builders = plugin.builders.structure;
+		const refs = [];
+		const addPart = function() {
+			var _ref = _asyncToGenerator(function* (part, expression, props) {
+				const component = yield builders.tryCreateComponentFromExpression(structure, expression, `${part}-${chain.chainId}`, { label: chain.label });
+				if (!component) return;
+				yield builders.representation.addRepresentation(component, props, { tag: part });
+				refs.push(component.ref);
+			});
+			return function addPart(_x2, _x3, _x4) {
+				return _ref.apply(this, arguments);
+			};
+		}();
+		yield addPart(POLYMER_PART, chainPolymerExpression(chain.chainId), {
+			type: "cartoon",
+			typeParams
+		});
+		yield addPart(LIGAND_PART, chainLigandExpression(chain.chainId), {
+			color: ELEMENT_THEME,
+			type: "ball-and-stick",
+			typeParams
+		});
+		return refs;
+	});
+	return _buildChainComponents.apply(this, arguments);
+}
+const NOTHING_LOADED = {
+	chains: [],
+	componentRefs: /* @__PURE__ */ new Map(),
+	residuesByChain: /* @__PURE__ */ new Map()
+};
+/**
+* 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, structureText, usePlddtColoring, showAxes) {
+		try {
+			var _plugin$canvas3d;
+			yield plugin.clear();
+			const data = yield plugin.builders.data.rawData({
+				data: structureText,
+				label: "Structure"
+			});
+			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",
+				params: {}
+			});
+			const data3d = structure.data;
+			if (!data3d) return NOTHING_LOADED;
+			const { chainLabels, chains, residuesByChain } = scanChains(data3d);
+			const typeParams = representationTypeParams(plugin);
+			const componentRefs = /* @__PURE__ */ new Map();
+			for (const [chainId, label] of chainLabels) {
+				const refs = yield buildChainComponents(plugin, structure, {
+					chainId,
+					label
+				}, typeParams);
+				if (refs.length > 0) componentRefs.set(chainId, refs);
+			}
+			if (usePlddtColoring) yield applyColorTheme(plugin, PLDDT_THEME_NAME);
+			(_plugin$canvas3d = plugin.canvas3d) === null || _plugin$canvas3d === void 0 || _plugin$canvas3d.requestCameraReset();
+			setAxes(plugin, showAxes);
+			return {
+				chains,
+				componentRefs,
+				residuesByChain
+			};
+		} catch (error) {
+			console.error("Failed to load structure:", error);
+			return NOTHING_LOADED;
+		}
+	});
+	return _loadStructure.apply(this, arguments);
+}
+/**
+* Shows or hides everything each chain is drawn with, cartoon and sticks
+* alike. Every component under the chain, so hiding it takes its ligands with
+* it rather than leaving a heme floating where its protein used to be.
+*
+* The whole subtree of each, not just the component cell: visibility is
+* per-cell, and it is the representation underneath that actually draws.
+*
+* Set outright rather than through the component manager's `toggleVisibility`,
+* which flips whatever it finds: the hidden set is derived from props on every
+* pass, so it has to be applied as a statement of what should be true and not
+* as a change to what already is.
+*/
+function applyChainVisibility(plugin, componentRefs, hidden) {
+	for (const [chainId, refs] of componentRefs) for (const ref of refs) setSubtreeVisibility(plugin.state.data, ref, hidden.has(chainId));
+}
+/**
+* Recolors every loaded structure's representations with the named theme,
+* leaving the heteroatoms on `ELEMENT_THEME`.
+*
+* The per-representation form of `updateRepresentationsTheme`, so the two can
+* be told apart in one pass; handing it a filtered list instead would leave
+* the ligands on whichever theme happened to be current when they were built.
+*/
+function applyColorTheme(_x13, _x14) {
+	return _applyColorTheme.apply(this, arguments);
+}
+function _applyColorTheme() {
+	_applyColorTheme = _asyncToGenerator(function* (plugin, colorTheme) {
+		yield plugin.dataTransaction(_asyncToGenerator(function* () {
+			for (const s of plugin.managers.structure.hierarchy.current.structures) yield plugin.managers.structure.component.updateRepresentationsTheme(s.components, (_component, representation) => ({ color: isLigandRepresentation(representation) ? ELEMENT_THEME : colorTheme }));
+		}));
+	});
+	return _applyColorTheme.apply(this, arguments);
+}
+/**
+* Owns the Mol* plugin for one viewer: creates it, loads the structure, wires
+* interaction callbacks, and disposes of it on unmount.
+*
+* 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 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, selectedChains, sequenceViewerBackgroundColor, showAxes, showSequenceViewer, structure }) {
+	const pluginRef = useRef(null);
+	const residueValueThemeRef = useRef(null);
+	const chainColorThemeRef = 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
+	* load, since the refs do not survive `plugin.clear()`.
+	*/
+	const componentRefsRef = useRef(/* @__PURE__ */ new Map());
+	/**
+	* Which residues sit on each chain, for the readout to average a score over
+	* a whole-chain selection. A ref rather than state: nothing renders from it
+	* directly, and it is rewritten in step with `chains`, which does.
+	*/
+	const residuesByChainRef = useRef(/* @__PURE__ */ new Map());
+	/**
+	* The visibility and coloring to apply as soon as a structure exists. Read
+	* through refs because both arrive as fresh objects on every render, and a
+	* load has to be able to consult them without the load effect depending on
+	* them - a new Set each render would reload the structure on every pass.
+	*/
+	const hiddenChainsRef = useRef(hiddenChains);
+	hiddenChainsRef.current = hiddenChains;
+	const chainColorsRef = useRef(chainColors);
+	chainColorsRef.current = chainColors;
+	/**
+	* Carries the theme-dependent props into the views Mol* renders in its own
+	* React root. They cannot read them from context, and rebuilding the plugin
+	* would throw away the camera, so the values are pushed to them instead.
+	*/
+	const viewSettingsRef = useRef(null);
+	if (viewSettingsRef.current === null) viewSettingsRef.current = new BehaviorSubject({
+		mode,
+		sequenceViewerBackgroundColor,
+		showAxes
+	});
+	const viewSettings = viewSettingsRef.current;
+	/**
+	* Clip-radius-per-camera-distance ratio recorded at the last residue focus,
+	* or null when no residue is focused. Anchors the adaptive depth clipping.
+	*/
+	const clipRatioRef = useRef(null);
+	const setClipRatio = useCallback((ratio) => {
+		clipRatioRef.current = ratio;
+	}, []);
+	/**
+	* Takes up what a load produced: the component refs the chain-keyed props
+	* address, the visibility they were already asking for, and the chain list
+	* the consumer is told about.
+	*
+	* Chains are published only when they actually differ, so reloading the same
+	* structure - a theme switch that happens to reload, a parent handing back an
+	* equal PDB string - does not hand every consumer a new array to react to.
+	*/
+	const adoptLoadedStructure = useCallback((plugin, loaded) => {
+		componentRefsRef.current = loaded.componentRefs;
+		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;
+	const onSelectionClearRef = useRef(onSelectionClear);
+	onSelectionClearRef.current = onSelectionClear;
+	const onSelectionChangeRef = useRef(onSelectionChange);
+	onSelectionChangeRef.current = onSelectionChange;
+	const onResidueHoverRef = useRef(onResidueHover);
+	onResidueHoverRef.current = onResidueHover;
+	/** Last residue reported to `onResidueHover`, to suppress repeats. */
+	const lastHoverRef = useRef(null);
+	const initialPropsRef = useRef({
+		backgroundColor,
+		edgeColor,
+		hasPlddt,
+		highlightColor,
+		mode,
+		molstarSpec,
+		showAxes,
+		showSequenceViewer,
+		structure
+	});
+	initialPropsRef.current = {
+		backgroundColor,
+		edgeColor,
+		hasPlddt,
+		highlightColor,
+		mode,
+		molstarSpec,
+		showAxes,
+		showSequenceViewer,
+		structure
+	};
+	/**
+	* The consumer's `canvas3d` overrides, keyed by content. Unlike the rest of
+	* the spec these are re-applied when they change, and they commonly arrive
+	* as an object written inline - so the effect below turns on what they say
+	* rather than on the identity of the object saying it.
+	*/
+	const canvas3dOverrideKey = (() => {
+		try {
+			var _molstarSpec$canvas3d;
+			return JSON.stringify((_molstarSpec$canvas3d = molstarSpec === null || molstarSpec === void 0 ? void 0 : molstarSpec.canvas3d) !== null && _molstarSpec$canvas3d !== void 0 ? _molstarSpec$canvas3d : null);
+		} catch (_unused) {
+			return String(Date.now());
+		}
+	})();
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let cancelled = false;
+		let clipSubscription;
+		const init = function() {
+			var _ref2 = _asyncToGenerator(function* () {
+				yield nextFrame();
+				if (cancelled) return;
+				const rect = container.getBoundingClientRect();
+				if (rect.width === 0 || rect.height === 0) {
+					setTimeout(init, LAYOUT_RETRY_MS);
+					return;
+				}
+				const initial = initialPropsRef.current;
+				try {
+					var _plugin$canvas3d2;
+					const residueValueTheme = createResidueValueTheme(initial.mode);
+					const chainColorTheme = createChainColorTheme();
+					const plugin = yield createViewer({
+						backgroundColor: initial.backgroundColor,
+						chainColorTheme,
+						edgeColor: initial.edgeColor,
+						highlightColor: initial.highlightColor,
+						molstarSpec: initial.molstarSpec,
+						residueValueTheme,
+						root: container,
+						showAxes: initial.showAxes,
+						showSequenceViewer: initial.showSequenceViewer,
+						viewSettings
+					});
+					if (cancelled) {
+						plugin.dispose();
+						return;
+					}
+					pluginRef.current = plugin;
+					residueValueThemeRef.current = residueValueTheme;
+					chainColorThemeRef.current = chainColorTheme;
+					const latest = initialPropsRef.current;
+					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
+					* whatever it is currently holding - which, before anything has been
+					* clicked, is an empty click. Acting on that would read as the user
+					* clicking empty space and clear a selection the consumer had set
+					* before the viewer was even interactive.
+					*
+					* Only the replay is skipped, not every empty click: clicking away
+					* from the structure is how a selection is meant to be cleared.
+					*/
+					let clickReplayConsumed = false;
+					plugin.behaviors.interaction.click.subscribe((e) => {
+						var _onResidueClickRef$cu, _onSelectionChangeRef;
+						if (!clickReplayConsumed) {
+							clickReplayConsumed = true;
+							if (Representation.Loci.isEmpty(e.current)) return;
+						}
+						if (Representation.Loci.isEmpty(e.current)) {
+							var _onSelectionClearRef$;
+							(_onSelectionClearRef$ = onSelectionClearRef.current) === null || _onSelectionClearRef$ === void 0 || _onSelectionClearRef$.call(onSelectionClearRef);
+							return;
+						}
+						const loci = e.current.loci;
+						if (!StructureElement.Loci.is(loci)) return;
+						const residue = residueRefFromLoci(loci);
+						if (!residue) return;
+						(_onResidueClickRef$cu = onResidueClickRef.current) === null || _onResidueClickRef$cu === void 0 || _onResidueClickRef$cu.call(onResidueClickRef, residue);
+						(_onSelectionChangeRef = onSelectionChangeRef.current) === null || _onSelectionChangeRef === void 0 || _onSelectionChangeRef.call(onSelectionChangeRef, selectionFromLoci(loci));
+					});
+					plugin.behaviors.interaction.hover.subscribe((e) => {
+						var _lastHoverRef$current, _onResidueHoverRef$cu;
+						const loci = e.current.loci;
+						const residue = StructureElement.Loci.is(loci) ? residueRefFromLoci(loci) : null;
+						if ((residue === null || residue === void 0 ? void 0 : residue.index) === ((_lastHoverRef$current = lastHoverRef.current) === null || _lastHoverRef$current === void 0 ? void 0 : _lastHoverRef$current.index)) return;
+						lastHoverRef.current = residue;
+						(_onResidueHoverRef$cu = onResidueHoverRef.current) === null || _onResidueHoverRef$cu === void 0 || _onResidueHoverRef$cu.call(onResidueHoverRef, residue);
+					});
+					clipSubscription = (_plugin$canvas3d2 = plugin.canvas3d) === null || _plugin$canvas3d2 === void 0 ? void 0 : _plugin$canvas3d2.didDraw.subscribe(() => {
+						syncClipToZoom(plugin, () => clipRatioRef.current);
+					});
+					if (!cancelled) setIsReady(true);
+				} catch (error) {
+					console.error("Failed to initialize Mol* viewer:", error);
+				}
+			});
+			return function init() {
+				return _ref2.apply(this, arguments);
+			};
+		}();
+		init();
+		return () => {
+			var _pluginRef$current;
+			cancelled = true;
+			clipSubscription === null || clipSubscription === void 0 || clipSubscription.unsubscribe();
+			(_pluginRef$current = pluginRef.current) === null || _pluginRef$current === void 0 || _pluginRef$current.dispose();
+			pluginRef.current = null;
+			residueValueThemeRef.current = null;
+			chainColorThemeRef.current = null;
+			componentRefsRef.current = /* @__PURE__ */ new Map();
+			residuesByChainRef.current = /* @__PURE__ */ new Map();
+			currentStructureRef.current = null;
+			clipRatioRef.current = null;
+			setIsReady(false);
+		};
+	}, []);
+	useEffect(() => {
+		var _pluginRef$current2, _initialPropsRef$curr;
+		const canvas3d = (_pluginRef$current2 = pluginRef.current) === null || _pluginRef$current2 === void 0 ? void 0 : _pluginRef$current2.canvas3d;
+		if (!canvas3d || !isReady) return;
+		canvas3d.setProps({
+			marking: {
+				highlightEdgeColor: edgeColor,
+				selectEdgeColor: edgeColor
+			},
+			renderer: {
+				backgroundColor,
+				highlightColor
+			}
+		});
+		const override = (_initialPropsRef$curr = initialPropsRef.current.molstarSpec) === null || _initialPropsRef$curr === void 0 ? void 0 : _initialPropsRef$curr.canvas3d;
+		if (override) canvas3d.setProps(override);
+	}, [
+		backgroundColor,
+		canvas3dOverrideKey,
+		edgeColor,
+		highlightColor,
+		isReady
+	]);
+	useEffect(() => {
+		viewSettings.next({
+			download,
+			hiddenChains,
+			mode,
+			onChainHover,
+			onChainSelect,
+			onChainToggle,
+			selectedChains,
+			sequenceViewerBackgroundColor,
+			showAxes
+		});
+	}, [
+		download,
+		hiddenChains,
+		mode,
+		onChainHover,
+		onChainSelect,
+		onChainToggle,
+		selectedChains,
+		sequenceViewerBackgroundColor,
+		showAxes,
+		viewSettings
+	]);
+	useEffect(() => {
+		if (!isReady || !pluginRef.current) return;
+		setAxes(pluginRef.current, showAxes);
+	}, [showAxes, isReady]);
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		if (!plugin || !isReady) return;
+		if (structure === currentStructureRef.current) return;
+		currentStructureRef.current = structure;
+		clipRatioRef.current = null;
+		lastHoverRef.current = null;
+		loadStructure(plugin, structure, hasPlddt, showAxes).then((loaded) => {
+			if (pluginRef.current !== plugin) return;
+			adoptLoadedStructure(plugin, loaded);
+		});
+	}, [
+		structure,
+		hasPlddt,
+		isReady,
+		adoptLoadedStructure
+	]);
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		if (!plugin || !isReady) return;
+		applyChainVisibility(plugin, componentRefsRef.current, hiddenChains);
+	}, [hiddenChains, isReady]);
+	return {
+		chainColorThemeRef,
+		chains,
+		isReady,
+		loadCount,
+		pluginRef,
+		residuesByChainRef,
+		residueValueThemeRef,
+		setClipRatio
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/focusRepresentation.ts
+/**
+* What Mol* draws around a focused selection, as ball-and-stick over the
+* cartoon: the selection itself, the residues near it, and the non-covalent
+* contacts between the two. All three stay on; what changes is how far "near"
+* reaches.
+*/
+const FOCUS_COMPONENTS = [
+	"target",
+	"surroundings",
+	"interactions"
+];
+/** Mol*'s own default, in angstroms. */
+const NEIGHBOUR_RADIUS = 5;
+/**
+* Mol* builds the surroundings as `includeSurroundings(target, radius)` with
+* whole residues, so a radius of zero resolves to the residues of the target
+* and nothing else.
+*/
+const OWN_RESIDUES_ONLY = 0;
+/**
+* Chooses how far the focus shell reaches around a selection.
+*
+* A residue, or a short range, is a site: the 5A shell around it is the point
+* of looking at it, and Mol*'s default earns its keep. A whole chain is a
+* structural unit instead, and its neighbours are the chain bound to it - so
+* on a complex the shell reaches straight across the interface and draws the
+* partner's contact face in atoms, which reads as the partner being selected
+* too.
+*
+* Taking the radius to zero confines the shell to the selection rather than
+* turning it off: the surroundings and the interactions are still drawn, over
+* the selected chain's own residues, so a chain shows its own atoms and
+* contacts and no others'.
+*/
+function setFocusNeighbourhood(_x, _x2) {
+	return _setFocusNeighbourhood.apply(this, arguments);
+}
+function _setFocusNeighbourhood() {
+	_setFocusNeighbourhood = _asyncToGenerator(function* (plugin, includeNeighbours) {
+		const expandRadius = includeNeighbours ? NEIGHBOUR_RADIUS : OWN_RESIDUES_ONLY;
+		yield plugin.state.updateBehavior(StructureFocusRepresentation, (params) => {
+			params.components = FOCUS_COMPONENTS;
+			params.expandRadius = expandRadius;
+		});
+	});
+	return _setFocusNeighbourhood.apply(this, arguments);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useSelectionFocus.ts
+/**
+* Points the camera at a loci and marks it.
+*
+* A click has already focused what the consumer echoes back by the time it
+* arrives, so the focus is only set when it is not already what is marked;
+* setting it again would restate the selection and repaint the sequence panel
+* for nothing.
+*/
+function focusLoci(plugin, loci, setClipRatio) {
+	const focused = plugin.managers.structure.focus.behaviors.current.value;
+	if (!focused || !StructureElement.Loci.areEqual(focused.loci, loci)) plugin.managers.structure.focus.setFromLoci(loci);
+	setClipRatio(focusResidue(plugin, loci));
+}
+/**
+* Drops the focus, and the depth clipping anchored to it.
+*
+* `resetCamera` separates the two ways this happens. The consumer clearing the
+* selection means there is nothing to look at, so the view goes back to the
+* default. A selection that merely resolved to nothing visible - the chain it
+* covers having been hidden - still stands, so throwing the camera back would
+* be answering a question nobody asked.
+*/
+function clearFocus(plugin, setClipRatio, resetCamera) {
+	var _plugin$canvas3d;
+	setClipRatio(null);
+	plugin.managers.structure.focus.clear();
+	if (resetCamera) (_plugin$canvas3d = plugin.canvas3d) === null || _plugin$canvas3d === void 0 || _plugin$canvas3d.requestCameraReset();
+}
+/**
+* Focuses a loci, resizing the focus shell first when this selection wants a
+* different reach than the last one did.
+*
+* The resize is asynchronous and the focus has to follow it - the shell is
+* sized before focusing so it is not drawn at the old reach and rebuilt - so
+* this hands back a teardown that abandons the focus if the effect is torn
+* down while the resize is still in flight.
+*
+* `currentShell` is the reach already configured, carried in a ref so that two
+* selections of the same kind do not each restate it.
+*/
+function focusWithShell(plugin, loci, includeNeighbours, currentShell, pluginRef, setClipRatio) {
+	if (currentShell.current === includeNeighbours) {
+		focusLoci(plugin, loci, setClipRatio);
+		return;
+	}
+	let cancelled = false;
+	currentShell.current = includeNeighbours;
+	setFocusNeighbourhood(plugin, includeNeighbours).then(() => {
+		if (cancelled || pluginRef.current !== plugin) return;
+		focusLoci(plugin, loci, setClipRatio);
+	});
+	return () => {
+		cancelled = true;
+	};
+}
+/**
+* Makes `selection` the one thing that decides where the camera sits.
+*
+* 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 -
+* which is what the prop being controlled is supposed to mean. Clicking still
+* marks immediately, through Mol*'s own focus behavior, so the structure
+* 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,
+	* and comparing identity would refocus on every render.
+	*
+	* Tracked here rather than compared against the previous prop so that a
+	* selection made before the plugin was ready is still applied once it is,
+	* and so that a plugin rebuilt underneath us - which comes up focused on
+	* nothing - is not assumed to still be holding the old one.
+	*/
+	const focusedRef = useRef(null);
+	/**
+	* Whether the focus shell currently reaches beyond the selection, so the
+	* behavior is only updated when the answer actually changes rather than on
+	* every selection.
+	*/
+	const neighbourhoodRef = useRef(null);
+	/**
+	* What the camera should be pointed at, as a string. Hiding a chain changes
+	* what there is to focus, so it belongs in here alongside the selection
+	* itself - and comparing strings rather than objects is what keeps a consumer
+	* 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;
+		if (!plugin || !isReady) {
+			focusedRef.current = null;
+			neighbourhoodRef.current = null;
+			return;
+		}
+		if (focusKey === focusedRef.current) return;
+		focusedRef.current = focusKey;
+		if (focusKey === null) {
+			clearFocus(plugin, setClipRatio, true);
+			return;
+		}
+		const chosen = selection;
+		const loci = lociForSelection(plugin, chosen, hiddenChains);
+		if (!loci) {
+			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,
+		isReady,
+		setClipRatio
+	]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useSelectionReadout.ts
+/**
+* Tracks the residue under the pointer, deduplicated, and passes the event on
+* to the consumer.
+*
+* Mol* emits hover events continuously, so a residue the pointer is resting on
+* would otherwise cost a state update per event. The index alone does not
+* identify one: loading a new structure into the same plugin renumbers from
+* zero, so the residue now at an index is not the one that was there before.
+* Comparing the label as well is enough, because the readout this drives is
+* built from the label and the index and from nothing else.
+*/
+function useResidueHoverState(onResidueHover) {
+	const [hoveredResidue, setHoveredResidue] = useState(null);
+	return {
+		handleResidueHover: useCallback((residue) => {
+			setHoveredResidue((prev) => {
+				if (residue === null) return prev === null ? prev : null;
+				const label = residueLabel(residue);
+				return prev !== null && prev.index === residue.index && prev.label === label ? prev : {
+					index: residue.index,
+					label
+				};
+			});
+			onResidueHover === null || onResidueHover === void 0 || onResidueHover(residue);
+		}, [onResidueHover]),
+		hoveredResidue
+	};
+}
+/**
+* Derives the legend's readouts from what is hovered and what is selected.
+*
+* The viewer already knows everything they need - the label, the pLDDT, the
+* overlay value - so they are worked out here rather than asked of the
+* consumer. A readout covering several residues reports the mean of each,
+* which is the only reading that survives a range or a whole chain.
+*/
+function useSelectionReadout({ hoveredResidue, isReady, plddt, pluginRef, residueOverlay, residuesByChainRef, selection }) {
+	const [resolved, setResolved] = useState(null);
+	/**
+	* What the selection covers has to be read off the structure, since a
+	* selection can be made without a click ever naming anything: a lone residue
+	* is named the way the click path names it, so the two readouts cannot
+	* disagree, and a chain is expanded to the residues it actually holds rather
+	* than to the span between its ends.
+	*/
+	useEffect(() => {
+		var _residuesByChainRef$c;
+		const plugin = pluginRef.current;
+		if (!plugin || !isReady || isEmptySelection(selection)) {
+			setResolved(null);
+			return;
+		}
+		const chosen = selection;
+		const residues = selectionResidues(chosen, (_residuesByChainRef$c = residuesByChainRef.current) !== null && _residuesByChainRef$c !== void 0 ? _residuesByChainRef$c : /* @__PURE__ */ new Map());
+		if (residues.length === 0) {
+			setResolved(null);
+			return;
+		}
+		if (residues.length > 1) {
+			setResolved({
+				label: selectionLabel(chosen, residues.length),
+				residues
+			});
+			return;
+		}
+		const loci = lociForSelection(plugin, chosen);
+		const residue = loci && residueRefFromLoci(loci);
+		setResolved(residue ? {
+			label: residueLabel(residue),
+			residues
+		} : null);
+	}, [isReady, selection && selectionKey(selection)]);
+	const buildReadout = useCallback((label, residues) => ({
+		label,
+		plddt: meanOverResidues(residues, (i) => plddt === null || plddt === void 0 ? void 0 : plddt[i]),
+		value: meanOverResidues(residues, (i) => residueOverlay === null || residueOverlay === void 0 ? void 0 : residueOverlay.values.get(i)),
+		residueCount: residues.length
+	}), [plddt, residueOverlay]);
+	return {
+		hoveredReadout: useMemo(() => hoveredResidue === null ? null : buildReadout(hoveredResidue.label, [hoveredResidue.index]), [hoveredResidue, buildReadout]),
+		selectedReadout: useMemo(() => resolved === null ? null : buildReadout(resolved.label, resolved.residues), [resolved, buildReadout])
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useStructureColoring.ts
+/**
+* Decides what is coloring the structure and keeps that theme's data current.
+*
+* Three themes compete for the same representations, in a fixed order: a
+* residue value overlay, then pLDDT scores, then per-chain colors. Only one
+* can be applied, so the precedence lives here rather than being spread across
+* the hooks that own each theme's data - and the legend resolves what to
+* describe the same way, so the two cannot disagree about what is on screen.
+*
+* Recoloring happens in place: the camera is left where it is, so selecting or
+* switching an overlay does not zoom back out to the default view.
+*/
+function useStructureColoring({ chainColorThemeRef, chainColors, hasPlddt, isReady, mode, overlay, pluginRef, residueValueThemeRef }) {
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		const residueTheme = residueValueThemeRef.current;
+		const chainTheme = chainColorThemeRef.current;
+		if (!plugin || !residueTheme || !chainTheme || !isReady) return;
+		chainTheme.setState(chainColors);
+		if (overlay) {
+			var _overlay$colorScale, _overlay$min;
+			residueTheme.setState({
+				colorScale: (_overlay$colorScale = overlay.colorScale) !== null && _overlay$colorScale !== void 0 ? _overlay$colorScale : PLASMA_COLOR_SCALE,
+				max: overlay.max,
+				min: (_overlay$min = overlay.min) !== null && _overlay$min !== void 0 ? _overlay$min : 0,
+				mode,
+				values: overlay.values
+			});
+			applyColorTheme(plugin, RESIDUE_VALUE_THEME_NAME);
+			return;
+		}
+		residueTheme.setState({
+			mode,
+			values: /* @__PURE__ */ new Map()
+		});
+		applyColorTheme(plugin, hasPlddt ? PLDDT_THEME_NAME : FALLBACK_THEME_NAME);
+	}, [
+		overlay,
+		hasPlddt,
+		isReady,
+		mode,
+		chainColors
+	]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/ProteinStructureViewer.types.ts
+/** Pixel dimensions each resolution produces, for documentation and labels. */
+const DOWNLOAD_RESOLUTIONS = {
+	high: "3840x2160",
+	low: "1280x720",
+	maximum: "7680x4320",
+	medium: "1920x1080"
+};
+//#endregion
+//#region src/core/ProteinStructureViewer/index.tsx
+const _excluded = [
+	"backgroundColor",
+	"chainColors",
+	"disableChainHighlightOnHover",
+	"download",
+	"hiddenChains",
+	"onChainVisibilityChange",
+	"onChainsChange",
+	"molstarSpec",
+	"onResidueClick",
+	"onResidueHover",
+	"onSelectionChange",
+	"structure",
+	"plddt",
+	"residueOverlay",
+	"selection",
+	"sequenceViewerBackgroundColor",
+	"showAxes",
+	"showChainLegend",
+	"showLegend",
+	"showSequenceViewer",
+	"stats"
+];
+/** Fallbacks for theme tokens Mol* needs as concrete hex colors. */
+const FALLBACK_EDGE_COLOR = "#6c6c6c";
+const FALLBACK_HIGHLIGHT_COLOR = "#1b1b1b";
+/**
+* Keyed by mode: unlike the two above, the canvas has to invert with it. Only
+* reached when the viewer renders outside an SDS theme; inside one the
+* `base.backgroundPrimary` token wins.
+*/
+const FALLBACK_BACKGROUND_COLOR = {
+	dark: "#000000",
+	light: "#ffffff"
+};
+/** Caption shown beneath the color key when no overlay is active. */
+const PLDDT_SCALE_LABEL = "pLDDT";
+/** Caption used when an overlay does not name itself. */
+const DEFAULT_OVERLAY_LABEL = "Value";
+/** Readout slot label used when an overlay does not name one. */
+const DEFAULT_READOUT_LABEL = "Value";
+/**
+* Chooses what the legend describes, following whatever is actually coloring
+* the structure: the overlay when one is set, the pLDDT bands when scores were
+* supplied, and nothing at all otherwise - Mol* falls back to chain coloring
+* there, which no per-residue scale describes, so a key would be labelling
+* colors that are not on screen.
+*/
+function resolveScaleProps(overlay, hasPlddt) {
+	if (overlay) {
+		var _overlay$colorScale, _overlay$label, _overlay$min, _overlay$readoutLabel;
+		return {
+			scale: (_overlay$colorScale = overlay.colorScale) !== null && _overlay$colorScale !== void 0 ? _overlay$colorScale : PLASMA_COLOR_SCALE,
+			scaleLabel: (_overlay$label = overlay.label) !== null && _overlay$label !== void 0 ? _overlay$label : DEFAULT_OVERLAY_LABEL,
+			scaleMax: overlay.max,
+			scaleMin: (_overlay$min = overlay.min) !== null && _overlay$min !== void 0 ? _overlay$min : 0,
+			scaleTooltip: overlay.tooltip,
+			scaleTooltipProps: overlay.tooltipProps,
+			valueLabel: (_overlay$readoutLabel = overlay.readoutLabel) !== null && _overlay$readoutLabel !== void 0 ? _overlay$readoutLabel : DEFAULT_READOUT_LABEL
+		};
+	}
+	if (hasPlddt) return {
+		scale: PLDDT_COLOR_SCALE,
+		scaleLabel: PLDDT_SCALE_LABEL,
+		scaleMax: null,
+		scaleTooltip: void 0,
+		scaleTooltipProps: void 0,
+		valueLabel: void 0
+	};
+	return {
+		scale: null,
+		scaleLabel: void 0,
+		scaleMax: null,
+		scaleTooltip: void 0,
+		scaleTooltipProps: void 0,
+		valueLabel: void 0
+	};
+}
+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, structure, plddt, residueOverlay, selection = null, sequenceViewerBackgroundColor, showAxes = true, showChainLegend = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded);
+	const theme = useTheme();
+	const mode = getMode({ theme });
+	const semanticColors = getSemanticColors({ theme });
+	const pluginMountRef = useRef(null);
+	const hasPlddt = Boolean(plddt && plddt.length > 0);
+	const processedStructure = useMemo(() => hasPlddt ? injectPlddt(structure, plddt) : structure, [
+		structure,
+		plddt,
+		hasPlddt
+	]);
+	const bgColor = useMemo(() => {
+		var _semanticColors$base;
+		return themeColor(backgroundColor !== null && backgroundColor !== void 0 ? backgroundColor : semanticColors === null || semanticColors === void 0 || (_semanticColors$base = semanticColors.base) === null || _semanticColors$base === void 0 ? void 0 : _semanticColors$base.backgroundPrimary, FALLBACK_BACKGROUND_COLOR[mode]);
+	}, [
+		backgroundColor,
+		mode,
+		semanticColors
+	]);
+	const edgeColor = useMemo(() => {
+		var _semanticColors$base2;
+		return themeColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.borderPrimary, FALLBACK_EDGE_COLOR);
+	}, [semanticColors]);
+	const highlightColor = useMemo(() => {
+		var _semanticColors$base3;
+		return themeColor(semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.fillSelected, FALLBACK_HIGHLIGHT_COLOR);
+	}, [semanticColors]);
+	const { handleResidueHover, hoveredResidue } = useResidueHoverState(onResidueHover);
+	const handleSelectionClear = useCallback(() => {
+		onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(null);
+	}, [onSelectionChange]);
+	/**
+	* Chains the selection covers whole, which is what makes a chain caption a
+	* toggle rather than a one-way switch. Keyed on its contents because the
+	* set is pushed into the views Mol* renders, where a fresh object every
+	* render would be a fresh push every render.
+	*/
+	const selectedChainsKey = [...(_selection$chains = selection === null || selection === void 0 ? void 0 : selection.chains) !== null && _selection$chains !== void 0 ? _selection$chains : []].sort().join("\0");
+	const selectedChains = useMemo(() => new Set(selectedChainsKey === "" ? [] : selectedChainsKey.split("\0")), [selectedChainsKey]);
+	/**
+	* Clicking a chain selects it; clicking the selected chain again clears it.
+	*
+	* A whole chain is reported as the chain it is, not as the hundreds of
+	* residue indices it stands for, so echoing it back costs nothing. Only a
+	* selection that is exactly this one chain toggles off - with a residue or
+	* another chain also selected, the click is narrowing to this chain rather
+	* than undoing itself.
+	*/
+	const handleChainSelect = useCallback((chainId) => {
+		var _selection$chains2, _selection$residues;
+		const isOnlyThisChain = (selection === null || selection === void 0 || (_selection$chains2 = selection.chains) === null || _selection$chains2 === void 0 ? void 0 : _selection$chains2.length) === 1 && selection.chains[0] === chainId && !((_selection$residues = selection.residues) === null || _selection$residues === void 0 ? void 0 : _selection$residues.length);
+		onSelectionChange === null || onSelectionChange === void 0 || onSelectionChange(isOnlyThisChain ? null : { chains: [chainId] });
+	}, [onSelectionChange, selection]);
+	/**
+	* 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: 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);
+	const highlightChain = useCallback((chainId) => {
+		highlightChainRef.current(chainId);
+	}, []);
+	const [chains, setChains] = useState([]);
+	const { colors: chainColors, hidden: hiddenChains, toggleChain } = useChains({
+		chainColors: chainColorOverrides,
+		chains,
+		hiddenChains: hiddenChainsProp,
+		onChainVisibilityChange
+	});
+	const { chainColorThemeRef, chains: loadedChains, isReady, loadCount, pluginRef, residuesByChainRef, residueValueThemeRef, setClipRatio } = useMolstarPlugin({
+		backgroundColor: bgColor,
+		chainColors,
+		containerRef: pluginMountRef,
+		download,
+		edgeColor,
+		hasPlddt,
+		hiddenChains,
+		highlightColor,
+		mode,
+		molstarSpec,
+		onChainHover: highlightChain,
+		onChainSelect: handleChainSelect,
+		onChainToggle: toggleChain,
+		onResidueClick,
+		onResidueHover: handleResidueHover,
+		onSelectionChange,
+		onSelectionClear: handleSelectionClear,
+		selectedChains,
+		sequenceViewerBackgroundColor,
+		showAxes,
+		showSequenceViewer,
+		structure: processedStructure
+	});
+	highlightChainRef.current = useChainHighlight({
+		disabled: disableChainHighlightOnHover,
+		hiddenChains,
+		loadCount,
+		pluginRef,
+		selectedChains
+	});
+	useEffect(() => {
+		setChains(loadedChains);
+	}, [loadedChains]);
+	const onChainsChangeRef = useRef(onChainsChange);
+	onChainsChangeRef.current = onChainsChange;
+	useEffect(() => {
+		var _onChainsChangeRef$cu;
+		(_onChainsChangeRef$cu = onChainsChangeRef.current) === null || _onChainsChangeRef$cu === void 0 || _onChainsChangeRef$cu.call(onChainsChangeRef, loadedChains);
+	}, [loadedChains]);
+	useStructureColoring({
+		chainColorThemeRef,
+		chainColors,
+		hasPlddt,
+		isReady,
+		mode,
+		overlay: residueOverlay,
+		pluginRef,
+		residueValueThemeRef
+	});
+	useSelectionFocus({
+		hiddenChains,
+		isReady,
+		pluginRef,
+		selection,
+		setClipRatio
+	});
+	const { hoveredReadout, selectedReadout } = useSelectionReadout({
+		hoveredResidue,
+		isReady,
+		plddt,
+		pluginRef,
+		residueOverlay,
+		residuesByChainRef,
+		selection
+	});
+	const scaleProps = useMemo(() => resolveScaleProps(residueOverlay, hasPlddt), [residueOverlay, hasPlddt]);
+	/**
+	* What a chain's swatch can show follows whatever is painting the
+	* structure, in the same order the color key resolves in.
+	*
+	* Chain coloring gives each chain one color of its own. pLDDT gives every
+	* chain the same four bands, which says they are colored by confidence
+	* rather than telling them apart - so the swatch carries the whole key,
+	* quartered. An overlay is continuous and has no discrete colors to put in
+	* a swatch at all, so the rows keep their labels and toggles and the color
+	* key beside them does the describing.
+	*/
+	const chainColoringActive = !residueOverlay && !hasPlddt;
+	const plddtColoringActive = !residueOverlay && hasPlddt;
+	return /* @__PURE__ */ jsxs(ViewerRoot, _objectSpread2(_objectSpread2({
+		ref,
+		showSequenceViewer
+	}, rest), {}, { children: [/* @__PURE__ */ jsx(PluginMount, { ref: pluginMountRef }), showLegend && /* @__PURE__ */ jsx(StructureLegend, _objectSpread2({
+		chainBandColors: plddtColoringActive ? PLDDT_BAND_COLORS : void 0,
+		chainColors: chainColoringActive ? chainColors : void 0,
+		chains: showChainLegend ? chains : [],
+		hiddenChains,
+		hoveredResidue: hoveredReadout,
+		onChainHover: highlightChain,
+		onChainSelect: handleChainSelect,
+		onChainToggle: toggleChain,
+		selectedChains,
+		selectedResidue: selectedReadout,
+		showSequenceViewer,
+		stats: stats !== null && stats !== void 0 ? stats : []
+	}, scaleProps))] }));
+}));
+//#endregion
+export { injectPlddtIntoMmcif as a, injectPlddt as i, DOWNLOAD_RESOLUTIONS as n, injectPlddtIntoPdb as o, PLDDT_COLOR_SCALE as r, detectStructureFormat as s, ProteinStructureViewer_default as t };