@czi-sds/data-viz 1.0.1 → 2.1.0

package/dist/index.esm.js

@@ -1,11 +1,138 @@
 "use client";
 import { init } from "echarts";
-import { cloneElement, forwardRef, memo, useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { Fragment, cloneElement, forwardRef, memo, useCallback, useContext, useEffect, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { throttle } from "lodash";
 import styled from "@emotion/styled";
-import { jsx, jsxs } from "react/jsx-runtime";
-import { Legend, Tooltip, TooltipTable, fontHeaderS, fontTabularSemiboldXxxxs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
-import { useTheme } from "@mui/material";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
+import { Button, Legend, Theme, Tooltip, TooltipTable, defaultTheme, fontBodyXs, fontBodyXxxs, fontCodeXs, fontHeaderM, fontHeaderS, fontTabularSemiboldXxxxs, generateDiscreteColors, getCorners, getMode, getSemanticColors, getSpaces } from "@czi-sds/components";
+import { ThemeProvider, useTheme } from "@mui/material/styles";
+import { ArrowCounterClockwiseIcon, CheckIcon, CopyIcon, QuestionIcon } from "@phosphor-icons/react";
+import { Structure, StructureElement, StructureProperties, Unit } from "molstar/lib/mol-model/structure";
+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 { 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 { PluginCommands } from "molstar/lib/mol-plugin/commands";
+import { Vec3 } from "molstar/lib/mol-math/linear-algebra";
+import { CustomElementProperty } from "molstar/lib/mol-model-props/common/custom-element-property";
+import { Color } from "molstar/lib/mol-util/color";
+//#region src/common/colorScales.ts
+/**
+* Perceptually uniform sequential scale (matplotlib's plasma), the default for
+* value overlays.
+*/
+const PLASMA_COLOR_SCALE = {
+	kind: "continuous",
+	stops: [
+		{
+			color: "#0D0887",
+			t: 0
+		},
+		{
+			color: "#7E03A8",
+			t: .25
+		},
+		{
+			color: "#CC4778",
+			t: .5
+		},
+		{
+			color: "#F89441",
+			t: .75
+		},
+		{
+			color: "#F0F921",
+			t: 1
+		}
+	]
+};
+/** Parses `#RRGGBB` (or `RRGGBB`) into an RGB triplet. */
+function hexToRgb(hex) {
+	const h = hex.replace("#", "");
+	return [
+		parseInt(h.substring(0, 2), 16),
+		parseInt(h.substring(2, 4), 16),
+		parseInt(h.substring(4, 6), 16)
+	];
+}
+/** Linearly interpolates a continuous scale at `t`, clamped to 0-1. */
+function sampleContinuousScale(stops, t) {
+	if (stops.length === 0) return [
+		0,
+		0,
+		0
+	];
+	const first = stops[0];
+	const last = stops[stops.length - 1];
+	const clamped = Math.min(1, Math.max(0, t));
+	let lo = first;
+	let hi = last;
+	for (let i = 0; i < stops.length - 1; i++) {
+		const current = stops[i];
+		const next = stops[i + 1];
+		if (clamped >= current.t && clamped <= next.t) {
+			lo = current;
+			hi = next;
+			break;
+		}
+	}
+	const loRgb = hexToRgb(lo.color);
+	const hiRgb = hexToRgb(hi.color);
+	const f = hi.t === lo.t ? 0 : (clamped - lo.t) / (hi.t - lo.t);
+	return [
+		Math.round(loRgb[0] + f * (hiRgb[0] - loRgb[0])),
+		Math.round(loRgb[1] + f * (hiRgb[1] - loRgb[1])),
+		Math.round(loRgb[2] + f * (hiRgb[2] - loRgb[2]))
+	];
+}
+/**
+* Picks the band a normalized value falls into on a stepped scale.
+*
+* A value lands in the first band whose threshold it falls short of, which puts
+* each threshold at the bottom of the band above it: against thresholds of 0.5,
+* 0.7 and 0.9, a value of exactly 0.7 reads as the 0.7-0.9 band, not the one
+* below.
+*/
+function sampleSteppedScale(stops, t) {
+	for (const stop of stops) if (t < stop.threshold) return hexToRgb(stop.color);
+	const last = stops[stops.length - 1];
+	return last ? hexToRgb(last.color) : [
+		0,
+		0,
+		0
+	];
+}
+/**
+* Colors a raw value against a scale, normalizing it into `min`-`max` first.
+* Returns null when the value sits at or below `min`, or when the range is
+* degenerate, so callers can fall back to a neutral color.
+*/
+function sampleColorScale(scale, value, max, min = 0) {
+	if (max <= min || value <= min) return null;
+	const t = Math.min(1, (value - min) / (max - min));
+	return scale.kind === "continuous" ? sampleContinuousScale(scale.stops, t) : sampleSteppedScale(scale.stops, t);
+}
+/** CSS `linear-gradient` spanning a continuous scale, for the legend bar. */
+function toCssGradient(stops) {
+	return `linear-gradient(to right, ${stops.map((stop) => `${stop.color} ${stop.t * 100}%`).join(", ")})`;
+}
+//#endregion
 //#region src/common/utils.ts
 const EMPTY_OBJECT = {};
 //#endregion
@@ -93,7 +220,7 @@ function _objectSpread2(e) {
 }
 //#endregion
 //#region src/core/HeatmapChart/hooks/utils.ts
-const _excluded$2 = [
+const _excluded$3 = [
 	"axisPointer",
 	"dataZoom",
 	"series",
@@ -107,7 +234,7 @@ function createChartOptions(props) {
 	const { axisPointer, camera, data, dataZoom, emphasis, encode, grid: gridProp, itemStyle = DEFAULT_ITEM_STYLE, options, symbolSize, symbol = "rect" } = props;
 	const { defaultAxisPointer, defaultDataZoom, defaultEmphasis, defaultGrid, defaultXAxis, defaultYAxis } = generateDefaultValues(props);
 	const customGrid = typeof gridProp === "function" ? gridProp(defaultGrid) : gridProp;
-	const _ref = options || {}, { axisPointer: optionsAxisPointer, dataZoom: optionsDataZoom, series: optionsSeries, xAxis: optionsXAxis, yAxis: optionsYAxis } = _ref, optionsRest = _objectWithoutProperties(_ref, _excluded$2);
+	const _ref = options || {}, { axisPointer: optionsAxisPointer, dataZoom: optionsDataZoom, series: optionsSeries, xAxis: optionsXAxis, yAxis: optionsYAxis } = _ref, optionsRest = _objectWithoutProperties(_ref, _excluded$3);
 	return _objectSpread2({
 		animation: false,
 		axisPointer: mergeAxisPointer(defaultAxisPointer, axisPointer, optionsAxisPointer),
@@ -221,7 +348,7 @@ function generateDefaultValues(props) {
 //#endregion
 //#region src/core/HeatmapChart/hooks/useUpdateChart.ts
 const UPDATE_THROTTLE_MS = 100;
-function useUpdateChart({ axisPointer, camera, chart, data, emphasis, xAxisData, yAxisData, width, height, encode, itemStyle, symbol, symbolSize, grid, options, onEvents }) {
+function useUpdateChart({ axisPointer, camera, chart, data, dataZoom, emphasis, xAxisData, yAxisData, width, height, encode, itemStyle, symbol, symbolSize, grid, options, onEvents }) {
 	const throttledUpdateChart = useMemo(() => {
 		return throttle(() => {
 			if (!chart || !data || !xAxisData || !yAxisData) return;
@@ -230,6 +357,7 @@ function useUpdateChart({ axisPointer, camera, chart, data, emphasis, xAxisData,
 				axisPointer,
 				camera,
 				data,
+				dataZoom,
 				emphasis,
 				encode,
 				grid,
@@ -261,6 +389,7 @@ function useUpdateChart({ axisPointer, camera, chart, data, emphasis, xAxisData,
 		camera,
 		chart,
 		data,
+		dataZoom,
 		emphasis,
 		xAxisData,
 		yAxisData,
@@ -284,6 +413,7 @@ function useUpdateChart({ axisPointer, camera, chart, data, emphasis, xAxisData,
 		camera,
 		chart,
 		data,
+		dataZoom,
 		emphasis,
 		xAxisData,
 		yAxisData,
@@ -312,12 +442,13 @@ function getWidthAndHeight({ width, height }) {
 }
 //#endregion
 //#region src/core/HeatmapChart/index.tsx
-const _excluded$1 = [
+const _excluded$2 = [
 	"axisPointer",
 	"width",
 	"height",
 	"echartsRendererMode",
 	"camera",
+	"dataZoom",
 	"onEvents",
 	"xAxisData",
 	"yAxisData",
@@ -331,7 +462,7 @@ const _excluded$1 = [
 	"options"
 ];
 var HeatmapChart_default = memo(forwardRef((props, ref) => {
-	const { axisPointer, width, height, echartsRendererMode = "svg", camera, onEvents, xAxisData, yAxisData, data, encode, emphasis, itemStyle, symbol, symbolSize = 5, grid, options } = props, rest = _objectWithoutProperties(props, _excluded$1);
+	const { axisPointer, width, height, echartsRendererMode = "svg", camera, dataZoom, onEvents, xAxisData, yAxisData, data, encode, emphasis, itemStyle, symbol, symbolSize = 5, grid, options } = props, rest = _objectWithoutProperties(props, _excluded$2);
 	if (!width || !height) throw Error("Heatmap must have width and height bigger than Zero!");
 	const innerRef = useRef(null);
 	/**
@@ -384,6 +515,7 @@ var HeatmapChart_default = memo(forwardRef((props, ref) => {
 		camera,
 		chart,
 		data,
+		dataZoom,
 		emphasis,
 		encode,
 		grid,
@@ -417,27 +549,294 @@ var HeatmapChart_default = memo(forwardRef((props, ref) => {
 		else ref.current = element;
 	}
 }));
-//#endregion
-//#region src/core/StackedBarChart/style.ts
-const ChartWrapper = styled("div")`
+/** 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;
-  flex-direction: column;
-  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width};
+  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 TitleContainer = styled("div")`
+const SteppedLabels = styled(LegendLabels)`
+  &::before,
+  &::after {
+    content: "";
+    width: ${STEPPED_LABEL_INSET}px;
+  }
+`;
+const LegendBar = styled("div")`
   display: flex;
-  align-items: center;
+  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;
+  }
+
+  /* Mol* chrome that the custom viewport and sequence panel replace. */
+  .msp-plugin .msp-viewport-controls-buttons,
+  .msp-plugin .msp-layout-expanded,
+  .msp-plugin .msp-log,
+  .msp-plugin .msp-left-panel-controls,
+  .msp-plugin .msp-layout-region.msp-layout-left,
+  .msp-plugin .msp-layout-region.msp-layout-right,
+  .msp-plugin .msp-layout-region.msp-layout-bottom {
+    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 `
-      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
-      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+      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;
+        }
+      }
     `;
 }}
 `;
-const ChartTitle = styled("div")`
-  ${fontHeaderS}
+/**
+* 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 StatColumnWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+`;
+const StatValue = styled("span")`
+  ${fontBodyXxxs}
 
   ${(props) => {
 	var _semanticColors$base;
@@ -447,140 +846,2483 @@ const ChartTitle = styled("div")`
     `;
 }}
 `;
-const StyledBadge = styled("div")`
-  ${fontTabularSemiboldXxxxs}
+const StatLabel = styled("span")`
+  ${fontBodyXxxs}
 
   ${(props) => {
-	var _semanticColors$base2, _semanticColors$base3;
-	const spaces = getSpaces(props);
-	const corners = getCorners(props);
+	var _semanticColors$base2;
 	const semanticColors = getSemanticColors(props);
 	return `
-      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
-      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
-      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.textTertiaryOnDark};
     `;
 }}
 `;
-const BarContainer = styled("div")`
+const ScaleColumn = styled("div")`
+  display: flex;
+  flex-direction: column;
+
   ${(props) => {
-	var _semanticColors$base4;
-	const { width, barHeight, isEmpty } = props;
-	const corners = getCorners(props);
-	const semanticColors = getSemanticColors(props);
-	const finalWidth = typeof width === "number" ? `${width}px` : width;
+	const spaces = getSpaces(props);
 	return `
-      display: flex;
-      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
-      width: ${finalWidth};
-      height: ${barHeight}px;
-      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
-      overflow: hidden;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
     `;
 }}
 `;
-const BarSegment = styled("div")`
+const ScaleCaption = styled("span")`
+  ${fontBodyXxxs}
+
+  text-align: left;
+  display: flex;
+  align-items: center;
+
   ${(props) => {
-	const { color, height, percentage, opacity, disabled, isLast } = props;
-	const spaces = getSpaces(props);
-	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	var _semanticColors$base3;
+	const semanticColors = getSemanticColors(props);
 	return `
-      background-color: ${color};
-      height: ${height}px;
-      flex-grow: ${percentage};
-      flex-basis: 0;
-      flex-shrink: 1;
-      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
-      opacity: ${opacity};
-      transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
-      cursor: ${disabled ? "default" : "pointer"};
-      pointer-events: ${disabled ? "none" : "auto"};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textTertiaryOnDark};
     `;
 }}
 `;
-const StyledStackedBarChartWrapper = styled("div")`
+/** 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: flex;
-      flex-direction: column;
-      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+      padding-left: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+      margin-bottom: -${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+
+      &:hover {
+        color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.ornamentSecondary};
+      }
     `;
 }}
 `;
 //#endregion
-//#region src/core/StackedBarChart/index.tsx
-const _excluded = [
-	"title",
-	"badge",
-	"hideBadge",
-	"data",
-	"width",
-	"barHeight",
-	"showLegend",
-	"showLegendValues",
-	"legendValueFormat",
-	"selectedIndices",
-	"onSelectionChange",
-	"onSegmentMouseEnter",
-	"onSegmentMouseLeave",
-	"onLegendItemMouseEnter",
-	"onLegendItemMouseLeave",
-	"onSegmentClick",
-	"onLegendItemClick",
-	"selectionBehavior",
-	"mode",
-	"maxAmount",
-	"remainingLabel",
-	"remainingUnit",
-	"unit",
-	"colorGeneratorOptions"
-];
-const calculateBadgeText = (totalItems, selectedCount) => {
-	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
-	return `${selectedCount} of ${totalItems}`;
-};
-const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
-	if (!showLegendValues) return void 0;
-	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
-	const effectiveUnit = item.unit || globalUnit;
-	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
-};
-const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
-	const hasSelection = selectedIndicesSet.size > 0;
-	if (selectionBehavior === "hide") return 1;
-	if (hoveredIndex !== null) return hoveredIndex === index || selectedIndicesSet.has(index) ? 1 : .2;
-	if (hasSelection) return selectedIndicesSet.has(index) ? 1 : .2;
-	return 1;
-};
-const applyCumulativeHideStyling = (items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) => {
-	const newRemainingValue = hasRemaining ? effectiveMaxAmount - selectedTotal : 0;
-	const newRemainingPercentage = hasRemaining ? newRemainingValue / effectiveMaxAmount * 100 : 0;
+//#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 })] });
+}
+/**
+* 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({ hoveredResidue = null, scale, scaleLabel, scaleMax = null, scaleMin = 0, scaleTooltip, selectedResidue = null, showSequenceViewer, stats, valueLabel }) {
+	var _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 slots = [
+		showResidue ? {
+			label: "Residue",
+			value: activeResidue.label
+		} : (_stats$ = stats[0]) !== null && _stats$ !== void 0 ? _stats$ : null,
+		showValue ? {
+			label: valueLabel,
+			value: activeResidue.value !== null ? activeResidue.value.toFixed(VALUE_PRECISION) : MISSING_VALUE
+		} : (_stats$2 = stats[1]) !== null && _stats$2 !== void 0 ? _stats$2 : null,
+		showResidue ? {
+			label: "pLDDT",
+			value: activeResidue.plddt !== null ? activeResidue.plddt.toFixed(VALUE_PRECISION) : MISSING_VALUE
+		} : (_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);
+		}) }), scale && /* @__PURE__ */ jsxs(ScaleColumn, { children: [/* @__PURE__ */ jsx(ColorScaleLegend, {
+			max: scaleMax,
+			min: scaleMin,
+			scale
+		}), /* @__PURE__ */ jsxs(ScaleCaption, { children: [scaleLabel, scaleTooltip !== void 0 && /* @__PURE__ */ jsx(Tooltip, {
+			arrow: true,
+			placement: "bottom",
+			title: scaleTooltip,
+			children: /* @__PURE__ */ jsx(TooltipAnchor, { children: /* @__PURE__ */ jsx(QuestionIcon, {
+				size: 10,
+				weight: "bold"
+			}) })
+		})] })] })]
+	});
+}
+//#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 {
-		styledItems: items.map((item) => {
-			const isSelected = selectedIndicesSet.has(item.originalIndex);
-			return _objectSpread2(_objectSpread2({}, item), {}, { percentage: isSelected ? item.percentage : 0 });
-		}),
-		updatedRemainingPercentage: newRemainingPercentage,
-		updatedRemainingValue: newRemainingValue
+		mode,
+		theme: themeForMode(mode)
 	};
-};
-const applyProportionalHideStyling = (items, selectedIndicesSet, selectedTotal) => {
-	if (selectedTotal === 0) return {
-		styledItems: items.map((item) => _objectSpread2(_objectSpread2({}, item), {}, { percentage: 0 })),
-		updatedRemainingPercentage: 0,
-		updatedRemainingValue: 0
+}
+//#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/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/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.
+*
+* Element indices are only comparable within a single unit, and the range below
+* is built on the anchor's unit alone. So a drag is only extended when both
+* endpoints are a single element of the same unit; anything else -- different
+* units, or an endpoint spanning several because the chain has more than one
+* symmetry operator -- is left unextended rather than collapsed onto one unit
+* and silently reinterpreted as a different range.
+*/
+function extendToRange(loci, anchor) {
+	if (anchor.elements.length !== 1 || loci.elements.length !== 1) return loci;
+	const ref = anchor.elements[0];
+	const ext = loci.elements[0];
+	if (!ref || !ext) return loci;
+	if (ref.unit !== ext.unit) return loci;
+	const min = Math.min(OrderedSet.min(ref.indices), OrderedSet.min(ext.indices));
+	const max = Math.max(OrderedSet.max(ref.indices), OrderedSet.max(ext.indices));
+	return StructureElement.Loci(loci.structure, [{
+		indices: OrderedSet.ofRange(min, max),
+		unit: ref.unit
+	}]);
+}
+//#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/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.
+*/
+function useResidueSelection({ sequenceWrapper }) {
+	const anchorRef = useRef(void 0);
+	const { click } = useLociDispatch();
+	const onMouseDown = (e) => {
+		e.stopPropagation();
+		anchorRef.current = getLoci(sequenceWrapper, readSeqIdx(e.target));
+	};
+	const onMouseUp = (e) => {
+		e.stopPropagation();
+		const anchor = anchorRef.current;
+		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);
+		}
+		anchorRef.current = void 0;
 	};
 	return {
-		styledItems: items.map((item) => {
-			const newPercentage = selectedIndicesSet.has(item.originalIndex) ? item.value / selectedTotal * 100 : 0;
-			return _objectSpread2(_objectSpread2({}, item), {}, { percentage: newPercentage });
-		}),
-		updatedRemainingPercentage: 0,
-		updatedRemainingValue: 0
+		clearAnchor: () => {
+			anchorRef.current = void 0;
+		},
+		getAnchor: () => anchorRef.current,
+		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 { clearAnchor, getAnchor, 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);
+	};
+	const onMouseLeave = (e) => {
+		e.stopPropagation();
+		clearAnchor();
+		hide();
+		releaseHover(e);
+	};
+	return {
+		handlers: {
+			onContextMenu,
+			onMouseDown,
+			onMouseLeave,
+			onMouseMove,
+			onMouseUp
+		},
+		tooltipRef
+	};
+}
+//#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;
+  }
+`;
+/**
+* Caption naming the chain a sequence grid belongs to. 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.
+*/
+const ChainLabel = styled("div")`
+  ${fontBodyXs}
+
+  ${(props) => {
+	var _semanticColors$base12;
+	const spaces = getSpaces(props);
+	const semanticColors = getSemanticColors(props);
+	return `
+      margin-top: ${spaces === null || spaces === void 0 ? void 0 : spaces.xs}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px;
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base12 = semanticColors.base) === null || _semanticColors$base12 === void 0 ? void 0 : _semanticColors$base12.textSecondary};
+    `;
+}}
+`;
+//#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/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(() => {
+			const sequence = sequenceTextFromEntries(entries);
+			navigator.clipboard.writeText(sequence).then(() => {
+				setCopied(true);
+				if (timeoutRef.current) clearTimeout(timeoutRef.current);
+				timeoutRef.current = setTimeout(() => setCopied(false), COPIED_FEEDBACK_MS);
+			});
+		}, [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 })
+	};
+}
+/** One entry per chain, in Mol*'s entity / chain / operator order. */
+function buildEntries(structure, selection, _params) {
+	const entries = [];
+	for (const [modelEntityId] of getModelEntityOptions(structure)) for (const [chainGroupId, cLabel] of getChainOptions(structure, modelEntityId)) for (const [operatorKey] of getOperatorOptions(structure, modelEntityId, chainGroupId)) entries.push({
+		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 { entries, isEmpty, residueCount } = useSequenceWrappers();
+		const { copied, copySequence } = useCopySequence(entries);
+		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(SequenceScrollArea, {
+						className: "msp-sequence msp-sequence-wrapper-non-empty",
+						children: entries.map((s) => /* @__PURE__ */ jsxs(Fragment, { children: [showChainLabels && /* @__PURE__ */ jsx(ChainLabel, { children: s.label }), 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
+						})] }, s.id))
+					})
+				})]
+			})
+		});
+	};
+}
+//#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 \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/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.
+*/
+const ResetCameraSlot = styled("div")`
+  position: absolute;
+  bottom: 48px;
+  z-index: 10;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      left: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}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 { theme } = useMolstarTheme(viewSettings);
+		const { cameraChanged, resetCamera } = useCameraReset();
+		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__ */ jsx(ResetCameraSlot, {
+					hidden: !cameraChanged,
+					children: /* @__PURE__ */ jsx(Button, {
+						"aria-label": "Reset camera",
+						onClick: resetCamera,
+						title: "Reset camera",
+						sdsStyle: "minimal",
+						sdsType: "secondary",
+						size: "medium",
+						children: /* @__PURE__ */ jsx(ArrowCounterClockwiseIcon, {})
+					})
+				})
+			})
+		] });
+	};
+}
+//#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;
+}
+/**
+* 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$canvas3d2;
+	const camera = (_plugin$canvas3d2 = plugin.canvas3d) === null || _plugin$canvas3d2 === void 0 ? void 0 : _plugin$canvas3d2.camera;
+	const clipRatio = getClipRatio();
+	if (!camera || clipRatio === null || camera.transition.inTransition) return;
+	const radius = clipRadiusForDistance(Vec3.distance(camera.state.position, camera.state.target), clipRatio, camera.state.radiusMax);
+	if (Math.abs(camera.state.radius - radius) > CLIP_EPSILON) {
+		var _plugin$canvas3d3;
+		camera.setState({ radius });
+		(_plugin$canvas3d3 = plugin.canvas3d) === null || _plugin$canvas3d3 === void 0 || _plugin$canvas3d3.requestDraw();
+	}
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/residueRef.ts
+/**
+* Reads the residue a loci points at, or null when it points at nothing the
+* viewer can address.
+*
+* `index` comes from Mol*'s residue key, which counts residues in file order
+* from zero and is the same counter `injectPlddtIntoPdb` walks. Deriving it
+* from 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)
+	};
+}
+/**
+* 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/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 : [];
+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");
+}
+/**
+* Mol* color theme that reads pLDDT scores out of the B-factor column, paired
+* with `injectPlddtIntoPdb`. 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/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/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
+/** Structure representation Mol* builds for the loaded model. */
+const REPRESENTATION_PRESET = "polymer-cartoon";
+/** Theme used when no pLDDT scores are supplied. */
+const FALLBACK_THEME_NAME = "chain-id";
+/** 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;
+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: {}
+};
+/**
+* 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, edgeColor, highlightColor, 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: _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: _objectSpread2({
+					remoteState: "none",
+					sequenceViewer: { view: createSequenceView(viewSettings) }
+				}, showAxes && { 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"
+					}
+				} }
+			}),
+			target: root
+		});
+		const registry = plugin.representation.structure.themes.colorThemeRegistry;
+		if (PlddtColoring.colorThemeProvider) registry.add(PlddtColoring.colorThemeProvider);
+		registry.add(residueValueTheme.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);
+}
+function loadStructure(_x2, _x3, _x4, _x5) {
+	return _loadStructure.apply(this, arguments);
+}
+function _loadStructure() {
+	_loadStructure = _asyncToGenerator(function* (plugin, pdbData, usePlddtColoring, showAxes) {
+		try {
+			var _plugin$canvas3d;
+			yield plugin.clear();
+			const data = yield plugin.builders.data.rawData({
+				data: pdbData,
+				label: "Structure"
+			});
+			const trajectory = yield plugin.builders.structure.parseTrajectory(data, "pdb");
+			yield plugin.builders.structure.hierarchy.applyPreset(trajectory, "default", {
+				representationPreset: REPRESENTATION_PRESET,
+				showUnitcell: false,
+				structure: {
+					name: "model",
+					params: {}
+				}
+			});
+			if (usePlddtColoring) yield applyColorTheme(plugin, PLDDT_THEME_NAME);
+			(_plugin$canvas3d = plugin.canvas3d) === null || _plugin$canvas3d === void 0 || _plugin$canvas3d.requestCameraReset();
+			setAxes(plugin, showAxes);
+		} catch (error) {
+			console.error("Failed to load structure:", error);
+		}
+	});
+	return _loadStructure.apply(this, arguments);
+}
+/** Recolors every loaded structure's representations with the named theme. */
+function applyColorTheme(_x6, _x7) {
+	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, { color: 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 PDB) are pushed in through the effects below and in the
+* sibling hooks rather than by rebuilding.
+*/
+function useMolstarPlugin({ backgroundColor, containerRef, edgeColor, hasPlddt, highlightColor, mode, onResidueClick, onResidueHover, onSelectionClear, pdb, sequenceViewerBackgroundColor, showAxes, showSequenceViewer }) {
+	const pluginRef = useRef(null);
+	const residueValueThemeRef = useRef(null);
+	const currentPdbRef = useRef(null);
+	const [isReady, setIsReady] = useState(false);
+	/**
+	* 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
+	});
+	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;
+	}, []);
+	const onResidueClickRef = useRef(onResidueClick);
+	onResidueClickRef.current = onResidueClick;
+	const onSelectionClearRef = useRef(onSelectionClear);
+	onSelectionClearRef.current = onSelectionClear;
+	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,
+		pdb,
+		showAxes,
+		showSequenceViewer
+	});
+	initialPropsRef.current = {
+		backgroundColor,
+		edgeColor,
+		hasPlddt,
+		highlightColor,
+		mode,
+		pdb,
+		showAxes,
+		showSequenceViewer
+	};
+	useEffect(() => {
+		const container = containerRef.current;
+		if (!container) return;
+		let cancelled = false;
+		let clipSubscription;
+		const init = function() {
+			var _ref = _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 plugin = yield createViewer({
+						backgroundColor: initial.backgroundColor,
+						edgeColor: initial.edgeColor,
+						highlightColor: initial.highlightColor,
+						residueValueTheme,
+						root: container,
+						showAxes: initial.showAxes,
+						showSequenceViewer: initial.showSequenceViewer,
+						viewSettings
+					});
+					if (cancelled) {
+						plugin.dispose();
+						return;
+					}
+					pluginRef.current = plugin;
+					residueValueThemeRef.current = residueValueTheme;
+					const latest = initialPropsRef.current;
+					yield loadStructure(plugin, latest.pdb, latest.hasPlddt, latest.showAxes);
+					currentPdbRef.current = latest.pdb;
+					plugin.behaviors.interaction.click.subscribe((e) => {
+						var _onResidueClickRef$cu;
+						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);
+					});
+					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 _ref.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;
+			currentPdbRef.current = null;
+			clipRatioRef.current = null;
+			setIsReady(false);
+		};
+	}, []);
+	useEffect(() => {
+		var _pluginRef$current2;
+		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
+			}
+		});
+	}, [
+		backgroundColor,
+		edgeColor,
+		highlightColor,
+		isReady
+	]);
+	useEffect(() => {
+		viewSettings.next({
+			mode,
+			sequenceViewerBackgroundColor
+		});
+	}, [
+		mode,
+		sequenceViewerBackgroundColor,
+		viewSettings
+	]);
+	useEffect(() => {
+		if (!isReady || !pluginRef.current) return;
+		setAxes(pluginRef.current, showAxes);
+	}, [showAxes, isReady]);
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		if (!plugin || !isReady) return;
+		if (pdb === currentPdbRef.current) return;
+		currentPdbRef.current = pdb;
+		clipRatioRef.current = null;
+		lastHoverRef.current = null;
+		loadStructure(plugin, pdb, hasPlddt, showAxes);
+	}, [
+		pdb,
+		hasPlddt,
+		isReady
+	]);
+	return {
+		isReady,
+		pluginRef,
+		residueValueThemeRef,
+		setClipRatio
+	};
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/utils/residueLoci.ts
+/**
+* Every atom of the residue at a 0-based index, as geometry Mol* can focus and
+* frame, or undefined when the structure has no such residue.
+*
+* The inverse of `residueRefFromLoci`, and keyed on the same residue ordinal,
+* so a `selectedResidue` echoed back from a click resolves to the residue that
+* was clicked - on a complex as much as on a single chain.
+*
+* The whole residue is collected rather than one atom, since the caller frames
+* the camera on the loci's bounding sphere and a single atom would zoom far
+* closer than the residue warrants.
+*/
+function lociForResidueIndex(plugin, residueIndex) {
+	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 location = StructureElement.Location.create(structure);
+		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 (StructureProperties.residue.key(location) === residueIndex) indices.push(i);
+			}
+			if (indices.length > 0) return StructureElement.Loci(structure, [{
+				indices: OrderedSet.ofSortedArray(indices),
+				unit
+			}]);
+		}
+	}
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useResidueFocus.ts
+/**
+* Makes `selectedResidue` the one thing that decides where the camera sits.
+*
+* Setting the prop zooms in on that residue and marks it; clearing it drops the
+* focus and zooms back out. The click subscription only reports the residue 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 the residue immediately, through Mol*'s own focus
+* behavior, so the structure responds to a click whether or not the consumer
+* wires the prop up.
+*/
+function useResidueFocus({ isReady, pluginRef, selectedResidue, setClipRatio }) {
+	/**
+	* The residue this hook last pointed the camera at. Tracked rather than
+	* compared against the previous prop value 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);
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		if (!plugin || !isReady) {
+			focusedRef.current = null;
+			return;
+		}
+		const residue = selectedResidue !== null && selectedResidue !== void 0 ? selectedResidue : null;
+		if (residue === focusedRef.current) return;
+		focusedRef.current = residue;
+		if (residue === null) {
+			var _plugin$canvas3d;
+			setClipRatio(null);
+			plugin.managers.structure.focus.clear();
+			(_plugin$canvas3d = plugin.canvas3d) === null || _plugin$canvas3d === void 0 || _plugin$canvas3d.requestCameraReset();
+			return;
+		}
+		const loci = lociForResidueIndex(plugin, residue);
+		if (!loci) return;
+		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));
+	}, [
+		selectedResidue,
+		isReady,
+		setClipRatio
+	]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/hooks/useResidueOverlay.ts
+/**
+* Switches the structure's coloring between the residue value overlay and the
+* default (pLDDT, or chain-id when no scores were supplied).
+*
+* 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 useResidueOverlay({ hasPlddt, isReady, mode, overlay, pluginRef, residueValueThemeRef }) {
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		const theme = residueValueThemeRef.current;
+		if (!plugin || !theme || !isReady) return;
+		if (overlay) {
+			var _overlay$colorScale, _overlay$min;
+			theme.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);
+		} else {
+			theme.setState({
+				mode,
+				values: /* @__PURE__ */ new Map()
+			});
+			applyColorTheme(plugin, hasPlddt ? PLDDT_THEME_NAME : FALLBACK_THEME_NAME);
+		}
+	}, [
+		overlay,
+		hasPlddt,
+		isReady,
+		mode
+	]);
+}
+//#endregion
+//#region src/core/ProteinStructureViewer/index.tsx
+const _excluded$1 = [
+	"backgroundColor",
+	"onResidueClick",
+	"onResidueHover",
+	"onSelectionClear",
+	"pdb",
+	"plddt",
+	"residueOverlay",
+	"selectedResidue",
+	"sequenceViewerBackgroundColor",
+	"showAxes",
+	"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,
+			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,
+		valueLabel: void 0
+	};
+	return {
+		scale: null,
+		scaleLabel: void 0,
+		scaleMax: null,
+		scaleTooltip: void 0,
+		valueLabel: void 0
+	};
+}
+var ProteinStructureViewer_default = memo(forwardRef((props, ref) => {
+	const { backgroundColor, onResidueClick, onResidueHover, onSelectionClear, pdb, plddt, residueOverlay, selectedResidue = null, sequenceViewerBackgroundColor, showAxes = true, showLegend = true, showSequenceViewer = true, stats } = props, rest = _objectWithoutProperties(props, _excluded$1);
+	const theme = useTheme();
+	const mode = getMode({ theme });
+	const semanticColors = getSemanticColors({ theme });
+	const pluginMountRef = useRef(null);
+	const [hoveredResidue, setHoveredResidue] = useState(null);
+	/**
+	* Label for the selected residue, read back off the structure rather than
+	* remembered from the click that selected it, so the readout follows the
+	* prop however the selection was made.
+	*/
+	const [selectedLabel, setSelectedLabel] = useState(null);
+	const hasPlddt = Boolean(plddt && plddt.length > 0);
+	const processedPdb = useMemo(() => hasPlddt ? injectPlddtIntoPdb(pdb, plddt) : pdb, [
+		pdb,
+		plddt,
+		hasPlddt
+	]);
+	const { isReady, pluginRef, residueValueThemeRef, setClipRatio } = useMolstarPlugin({
+		backgroundColor: 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
+		]),
+		containerRef: pluginMountRef,
+		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]),
+		hasPlddt,
+		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]),
+		mode,
+		onResidueClick,
+		onResidueHover: useCallback((residue) => {
+			setHoveredResidue((prev) => {
+				if (residue === null) return prev === null ? prev : null;
+				const label = residueLabel(residue);
+				if (prev !== null && prev.index === residue.index && prev.label === label) return prev;
+				return {
+					index: residue.index,
+					label
+				};
+			});
+			onResidueHover === null || onResidueHover === void 0 || onResidueHover(residue);
+		}, [onResidueHover]),
+		onSelectionClear,
+		pdb: processedPdb,
+		sequenceViewerBackgroundColor,
+		showAxes,
+		showSequenceViewer
+	});
+	useResidueOverlay({
+		hasPlddt,
+		isReady,
+		mode,
+		overlay: residueOverlay,
+		pluginRef,
+		residueValueThemeRef
+	});
+	useResidueFocus({
+		isReady,
+		pluginRef,
+		selectedResidue,
+		setClipRatio
+	});
+	useEffect(() => {
+		const plugin = pluginRef.current;
+		if (!plugin || !isReady || selectedResidue === null) {
+			setSelectedLabel(null);
+			return;
+		}
+		const loci = lociForResidueIndex(plugin, selectedResidue);
+		const residue = loci && residueRefFromLoci(loci);
+		setSelectedLabel(residue ? residueLabel(residue) : null);
+	}, [
+		isReady,
+		pluginRef,
+		selectedResidue
+	]);
+	const buildReadout = useCallback((label, index) => {
+		var _plddt$index, _residueOverlay$value;
+		return {
+			label,
+			plddt: (_plddt$index = plddt === null || plddt === void 0 ? void 0 : plddt[index]) !== null && _plddt$index !== void 0 ? _plddt$index : null,
+			value: (_residueOverlay$value = residueOverlay === null || residueOverlay === void 0 ? void 0 : residueOverlay.values.get(index)) !== null && _residueOverlay$value !== void 0 ? _residueOverlay$value : null
+		};
+	}, [plddt, residueOverlay]);
+	const hoveredReadout = useMemo(() => hoveredResidue === null ? null : buildReadout(hoveredResidue.label, hoveredResidue.index), [hoveredResidue, buildReadout]);
+	const selectedReadout = useMemo(() => selectedResidue === null || selectedLabel === null ? null : buildReadout(selectedLabel, selectedResidue), [
+		selectedResidue,
+		selectedLabel,
+		buildReadout
+	]);
+	const scaleProps = useMemo(() => resolveScaleProps(residueOverlay, hasPlddt), [residueOverlay, hasPlddt]);
+	return /* @__PURE__ */ jsxs(ViewerRoot, _objectSpread2(_objectSpread2({
+		ref,
+		showSequenceViewer
+	}, rest), {}, { children: [/* @__PURE__ */ jsx(PluginMount, { ref: pluginMountRef }), showLegend && /* @__PURE__ */ jsx(StructureLegend, _objectSpread2({
+		hoveredResidue: hoveredReadout,
+		selectedResidue: selectedReadout,
+		showSequenceViewer,
+		stats: stats !== null && stats !== void 0 ? stats : []
+	}, scaleProps))] }));
+}));
+//#endregion
+//#region src/core/StackedBarChart/style.ts
+const ChartWrapper = styled("div")`
+  display: flex;
+  flex-direction: column;
+  width: ${(props) => typeof props.width === "number" ? `${props.width}px` : props.width};
+`;
+const TitleContainer = styled("div")`
+  display: flex;
+  align-items: center;
+
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.s}px;
+      margin-bottom: ${spaces === null || spaces === void 0 ? void 0 : spaces.l}px;
+    `;
+}}
+`;
+const ChartTitle = styled("div")`
+  ${fontHeaderS}
+
+  ${(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 StyledBadge = styled("div")`
+  ${fontTabularSemiboldXxxxs}
+
+  ${(props) => {
+	var _semanticColors$base2, _semanticColors$base3;
+	const spaces = getSpaces(props);
+	const corners = getCorners(props);
+	const semanticColors = getSemanticColors(props);
+	return `
+      padding: ${spaces === null || spaces === void 0 ? void 0 : spaces.xxxs}px ${spaces === null || spaces === void 0 ? void 0 : spaces.xxs}px;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.m}px;
+      background-color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base2 = semanticColors.base) === null || _semanticColors$base2 === void 0 ? void 0 : _semanticColors$base2.backgroundTertiary};
+      color: ${semanticColors === null || semanticColors === void 0 || (_semanticColors$base3 = semanticColors.base) === null || _semanticColors$base3 === void 0 ? void 0 : _semanticColors$base3.textSecondary};
+    `;
+}}
+`;
+const BarContainer = styled("div")`
+  ${(props) => {
+	var _semanticColors$base4;
+	const { width, barHeight, isEmpty } = props;
+	const corners = getCorners(props);
+	const semanticColors = getSemanticColors(props);
+	const finalWidth = typeof width === "number" ? `${width}px` : width;
+	return `
+      display: flex;
+      border-radius: ${corners === null || corners === void 0 ? void 0 : corners.s}px;
+      width: ${finalWidth};
+      height: ${barHeight}px;
+      background-color: ${isEmpty ? semanticColors === null || semanticColors === void 0 || (_semanticColors$base4 = semanticColors.base) === null || _semanticColors$base4 === void 0 ? void 0 : _semanticColors$base4.backgroundTertiary : "transparent"};
+      overflow: hidden;
+    `;
+}}
+`;
+const BarSegment = styled("div")`
+  ${(props) => {
+	const { color, height, percentage, opacity, disabled, isLast } = props;
+	const spaces = getSpaces(props);
+	const gap = (spaces === null || spaces === void 0 ? void 0 : spaces.xxxs) || 0;
+	return `
+      background-color: ${color};
+      height: ${height}px;
+      flex-grow: ${percentage};
+      flex-basis: 0;
+      flex-shrink: 1;
+      margin-right: ${percentage > 0 && !isLast ? `${gap}px` : 0};
+      opacity: ${opacity};
+      transition: opacity 0.2s ease-in-out, flex-grow 0.25s ease-in-out, margin-right 0.25s ease-out;
+      cursor: ${disabled ? "default" : "pointer"};
+      pointer-events: ${disabled ? "none" : "auto"};
+    `;
+}}
+`;
+const StyledStackedBarChartWrapper = styled("div")`
+  ${(props) => {
+	const spaces = getSpaces(props);
+	return `
+      display: flex;
+      flex-direction: column;
+      gap: ${spaces === null || spaces === void 0 ? void 0 : spaces.m}px;
+    `;
+}}
+`;
+//#endregion
+//#region src/core/StackedBarChart/index.tsx
+const _excluded = [
+	"title",
+	"badge",
+	"hideBadge",
+	"data",
+	"width",
+	"barHeight",
+	"showLegend",
+	"showLegendValues",
+	"legendValueFormat",
+	"selectedIndices",
+	"onSelectionChange",
+	"onSegmentMouseEnter",
+	"onSegmentMouseLeave",
+	"onLegendItemMouseEnter",
+	"onLegendItemMouseLeave",
+	"onSegmentClick",
+	"onLegendItemClick",
+	"selectionBehavior",
+	"mode",
+	"maxAmount",
+	"remainingLabel",
+	"remainingUnit",
+	"unit",
+	"colorGeneratorOptions"
+];
+const calculateBadgeText = (totalItems, selectedCount) => {
+	if (selectedCount === 0 || selectedCount === totalItems) return `${totalItems}`;
+	return `${selectedCount} of ${totalItems}`;
+};
+const calculateLegendValue = (item, showLegendValues, legendValueFormat, globalUnit) => {
+	if (!showLegendValues) return void 0;
+	if (legendValueFormat === "percentage") return `${Math.round(item.percentage)}%`;
+	const effectiveUnit = item.unit || globalUnit;
+	return effectiveUnit ? `${item.value} ${effectiveUnit}` : `${item.value}`;
+};
+const getSegmentOpacity = (index, hoveredIndex, selectedIndicesSet, selectionBehavior) => {
+	const hasSelection = selectedIndicesSet.size > 0;
+	if (selectionBehavior === "hide") return 1;
+	if (hoveredIndex !== null) return hoveredIndex === index || selectedIndicesSet.has(index) ? 1 : .2;
+	if (hasSelection) return selectedIndicesSet.has(index) ? 1 : .2;
+	return 1;
+};
+const applyCumulativeHideStyling = (items, selectedIndicesSet, selectedTotal, hasRemaining, effectiveMaxAmount) => {
+	const newRemainingValue = hasRemaining ? effectiveMaxAmount - selectedTotal : 0;
+	const newRemainingPercentage = hasRemaining ? newRemainingValue / effectiveMaxAmount * 100 : 0;
+	return {
+		styledItems: items.map((item) => {
+			const isSelected = selectedIndicesSet.has(item.originalIndex);
+			return _objectSpread2(_objectSpread2({}, item), {}, { percentage: isSelected ? item.percentage : 0 });
+		}),
+		updatedRemainingPercentage: newRemainingPercentage,
+		updatedRemainingValue: newRemainingValue
+	};
+};
+const applyProportionalHideStyling = (items, selectedIndicesSet, selectedTotal) => {
+	if (selectedTotal === 0) return {
+		styledItems: items.map((item) => _objectSpread2(_objectSpread2({}, item), {}, { percentage: 0 })),
+		updatedRemainingPercentage: 0,
+		updatedRemainingValue: 0
+	};
+	return {
+		styledItems: items.map((item) => {
+			const newPercentage = selectedIndicesSet.has(item.originalIndex) ? item.value / selectedTotal * 100 : 0;
+			return _objectSpread2(_objectSpread2({}, item), {}, { percentage: newPercentage });
+		}),
+		updatedRemainingPercentage: 0,
+		updatedRemainingValue: 0
+	};
+};
 const applySelectionStyling = (items, selectedIndicesSet, selectionBehavior, mode, hasRemaining, effectiveMaxAmount, baseRemainingPercentage, baseRemainingValue) => {
 	const hasSelection = selectedIndicesSet.size > 0;
 	if (selectionBehavior !== "hide" || !hasSelection) return {
@@ -635,7 +3377,6 @@ const renderBarSegment = (item, options) => {
 		title: null,
 		componentSlot: /* @__PURE__ */ jsx(TooltipTable, _objectSpread2({}, item.tooltip)),
 		placement: "top",
-		hasInvertedStyle: false,
 		open: hoveredIndex === item.originalIndex && !isHidden,
 		disableInteractive: true,
 		slotProps: { popper: {
@@ -652,7 +3393,7 @@ const StackedBarChart = (props) => {
 	var _theme$palette4;
 	const { title, badge, hideBadge = false, data, width = "100%", barHeight: barHeightProp = 16, showLegend = true, showLegendValues = true, legendValueFormat = "percentage", selectedIndices = [], onSelectionChange, onSegmentMouseEnter, onSegmentMouseLeave, onLegendItemMouseEnter, onLegendItemMouseLeave, onSegmentClick, onLegendItemClick, selectionBehavior = "dim", mode = "proportional", maxAmount, remainingLabel = "Remaining", remainingUnit, unit, colorGeneratorOptions } = props, rest = _objectWithoutProperties(props, _excluded);
 	const barHeight = Math.max(1, barHeightProp);
-	const theme = useTheme();
+	const theme = useTheme$1();
 	const [hoveredIndex, setHoveredIndex] = useState(null);
 	const [animatedItems, setAnimatedItems] = useState([]);
 	const [autoColorMap, setAutoColorMap] = useState(/* @__PURE__ */ new Map());
@@ -894,4 +3635,4 @@ const StackedBarChart = (props) => {
 	return /* @__PURE__ */ jsxs(ChartWrapper, _objectSpread2(_objectSpread2({ width }, rest), {}, { children: [/* @__PURE__ */ jsxs(TitleContainer, { children: [/* @__PURE__ */ jsx(ChartTitle, { children: title }), !hideBadge && displayBadge && /* @__PURE__ */ jsx(StyledBadge, { children: displayBadge })] }), chartContent] }));
 };
 //#endregion
-export { HeatmapChart_default as HeatmapChart, StackedBarChart };
+export { HeatmapChart_default as HeatmapChart, PLASMA_COLOR_SCALE, PLDDT_COLOR_SCALE, ProteinStructureViewer_default as ProteinStructureViewer, StackedBarChart, injectPlddtIntoPdb, sampleColorScale, toCssGradient };