@e-infra/react-molstar-wrapper 0.0.8

package/dist/index.es.js

@@ -0,0 +1,1258 @@
+"use client";
+import require$$0, { forwardRef, useRef, useState, useId, useEffect, useImperativeHandle } from "react";
+import "molstar/lib/mol-plugin-ui/skin/light.scss";
+import { loadMVSData } from "molstar/lib/extensions/mvs/components/formats";
+import { Color } from "molstar/lib/mol-util/color";
+import { createPluginUI } from "molstar/lib/mol-plugin-ui";
+import { renderReact18 } from "molstar/lib/mol-plugin-ui/react18";
+import { PluginSpec } from "molstar/lib/mol-plugin/spec";
+import { MolViewSpec } from "molstar/lib/extensions/mvs/behavior";
+import { DefaultPluginUISpec } from "molstar/lib/mol-plugin-ui/spec";
+import { Mat4, Vec3 } from "molstar/lib/mol-math/linear-algebra";
+import { PluginStateObject } from "molstar/lib/mol-plugin-state/objects";
+import { Script } from "molstar/lib/mol-script/script";
+import { StructureSelection, StructureElement } from "molstar/lib/mol-model/structure";
+import { StateTransforms } from "molstar/lib/mol-plugin-state/transforms";
+import { createMVSBuilder } from "molstar/lib/extensions/mvs/tree/mvs/mvs-builder";
+var jsxRuntime = { exports: {} };
+var reactJsxRuntime_production = {};
+var hasRequiredReactJsxRuntime_production;
+function requireReactJsxRuntime_production() {
+  if (hasRequiredReactJsxRuntime_production) return reactJsxRuntime_production;
+  hasRequiredReactJsxRuntime_production = 1;
+  var REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment");
+  function jsxProd(type, config, maybeKey) {
+    var key = null;
+    void 0 !== maybeKey && (key = "" + maybeKey);
+    void 0 !== config.key && (key = "" + config.key);
+    if ("key" in config) {
+      maybeKey = {};
+      for (var propName in config)
+        "key" !== propName && (maybeKey[propName] = config[propName]);
+    } else maybeKey = config;
+    config = maybeKey.ref;
+    return {
+      $$typeof: REACT_ELEMENT_TYPE,
+      type,
+      key,
+      ref: void 0 !== config ? config : null,
+      props: maybeKey
+    };
+  }
+  reactJsxRuntime_production.Fragment = REACT_FRAGMENT_TYPE;
+  reactJsxRuntime_production.jsx = jsxProd;
+  reactJsxRuntime_production.jsxs = jsxProd;
+  return reactJsxRuntime_production;
+}
+var reactJsxRuntime_development = {};
+var hasRequiredReactJsxRuntime_development;
+function requireReactJsxRuntime_development() {
+  if (hasRequiredReactJsxRuntime_development) return reactJsxRuntime_development;
+  hasRequiredReactJsxRuntime_development = 1;
+  "production" !== process.env.NODE_ENV && (function() {
+    function getComponentNameFromType(type) {
+      if (null == type) return null;
+      if ("function" === typeof type)
+        return type.$$typeof === REACT_CLIENT_REFERENCE ? null : type.displayName || type.name || null;
+      if ("string" === typeof type) return type;
+      switch (type) {
+        case REACT_FRAGMENT_TYPE:
+          return "Fragment";
+        case REACT_PROFILER_TYPE:
+          return "Profiler";
+        case REACT_STRICT_MODE_TYPE:
+          return "StrictMode";
+        case REACT_SUSPENSE_TYPE:
+          return "Suspense";
+        case REACT_SUSPENSE_LIST_TYPE:
+          return "SuspenseList";
+        case REACT_ACTIVITY_TYPE:
+          return "Activity";
+      }
+      if ("object" === typeof type)
+        switch ("number" === typeof type.tag && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), type.$$typeof) {
+          case REACT_PORTAL_TYPE:
+            return "Portal";
+          case REACT_CONTEXT_TYPE:
+            return type.displayName || "Context";
+          case REACT_CONSUMER_TYPE:
+            return (type._context.displayName || "Context") + ".Consumer";
+          case REACT_FORWARD_REF_TYPE:
+            var innerType = type.render;
+            type = type.displayName;
+            type || (type = innerType.displayName || innerType.name || "", type = "" !== type ? "ForwardRef(" + type + ")" : "ForwardRef");
+            return type;
+          case REACT_MEMO_TYPE:
+            return innerType = type.displayName || null, null !== innerType ? innerType : getComponentNameFromType(type.type) || "Memo";
+          case REACT_LAZY_TYPE:
+            innerType = type._payload;
+            type = type._init;
+            try {
+              return getComponentNameFromType(type(innerType));
+            } catch (x) {
+            }
+        }
+      return null;
+    }
+    function testStringCoercion(value) {
+      return "" + value;
+    }
+    function checkKeyStringCoercion(value) {
+      try {
+        testStringCoercion(value);
+        var JSCompiler_inline_result = false;
+      } catch (e) {
+        JSCompiler_inline_result = true;
+      }
+      if (JSCompiler_inline_result) {
+        JSCompiler_inline_result = console;
+        var JSCompiler_temp_const = JSCompiler_inline_result.error;
+        var JSCompiler_inline_result$jscomp$0 = "function" === typeof Symbol && Symbol.toStringTag && value[Symbol.toStringTag] || value.constructor.name || "Object";
+        JSCompiler_temp_const.call(
+          JSCompiler_inline_result,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          JSCompiler_inline_result$jscomp$0
+        );
+        return testStringCoercion(value);
+      }
+    }
+    function getTaskName(type) {
+      if (type === REACT_FRAGMENT_TYPE) return "<>";
+      if ("object" === typeof type && null !== type && type.$$typeof === REACT_LAZY_TYPE)
+        return "<...>";
+      try {
+        var name = getComponentNameFromType(type);
+        return name ? "<" + name + ">" : "<...>";
+      } catch (x) {
+        return "<...>";
+      }
+    }
+    function getOwner() {
+      var dispatcher = ReactSharedInternals.A;
+      return null === dispatcher ? null : dispatcher.getOwner();
+    }
+    function UnknownOwner() {
+      return Error("react-stack-top-frame");
+    }
+    function hasValidKey(config) {
+      if (hasOwnProperty.call(config, "key")) {
+        var getter = Object.getOwnPropertyDescriptor(config, "key").get;
+        if (getter && getter.isReactWarning) return false;
+      }
+      return void 0 !== config.key;
+    }
+    function defineKeyPropWarningGetter(props, displayName) {
+      function warnAboutAccessingKey() {
+        specialPropKeyWarningShown || (specialPropKeyWarningShown = true, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          displayName
+        ));
+      }
+      warnAboutAccessingKey.isReactWarning = true;
+      Object.defineProperty(props, "key", {
+        get: warnAboutAccessingKey,
+        configurable: true
+      });
+    }
+    function elementRefGetterWithDeprecationWarning() {
+      var componentName = getComponentNameFromType(this.type);
+      didWarnAboutElementRef[componentName] || (didWarnAboutElementRef[componentName] = true, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      ));
+      componentName = this.props.ref;
+      return void 0 !== componentName ? componentName : null;
+    }
+    function ReactElement(type, key, props, owner, debugStack, debugTask) {
+      var refProp = props.ref;
+      type = {
+        $$typeof: REACT_ELEMENT_TYPE,
+        type,
+        key,
+        props,
+        _owner: owner
+      };
+      null !== (void 0 !== refProp ? refProp : null) ? Object.defineProperty(type, "ref", {
+        enumerable: false,
+        get: elementRefGetterWithDeprecationWarning
+      }) : Object.defineProperty(type, "ref", { enumerable: false, value: null });
+      type._store = {};
+      Object.defineProperty(type._store, "validated", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: 0
+      });
+      Object.defineProperty(type, "_debugInfo", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: null
+      });
+      Object.defineProperty(type, "_debugStack", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugStack
+      });
+      Object.defineProperty(type, "_debugTask", {
+        configurable: false,
+        enumerable: false,
+        writable: true,
+        value: debugTask
+      });
+      Object.freeze && (Object.freeze(type.props), Object.freeze(type));
+      return type;
+    }
+    function jsxDEVImpl(type, config, maybeKey, isStaticChildren, debugStack, debugTask) {
+      var children = config.children;
+      if (void 0 !== children)
+        if (isStaticChildren)
+          if (isArrayImpl(children)) {
+            for (isStaticChildren = 0; isStaticChildren < children.length; isStaticChildren++)
+              validateChildKeys(children[isStaticChildren]);
+            Object.freeze && Object.freeze(children);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else validateChildKeys(children);
+      if (hasOwnProperty.call(config, "key")) {
+        children = getComponentNameFromType(type);
+        var keys = Object.keys(config).filter(function(k) {
+          return "key" !== k;
+        });
+        isStaticChildren = 0 < keys.length ? "{key: someKey, " + keys.join(": ..., ") + ": ...}" : "{key: someKey}";
+        didWarnAboutKeySpread[children + isStaticChildren] || (keys = 0 < keys.length ? "{" + keys.join(": ..., ") + ": ...}" : "{}", console.error(
+          'A props object containing a "key" prop is being spread into JSX:\n  let props = %s;\n  <%s {...props} />\nReact keys must be passed directly to JSX without using spread:\n  let props = %s;\n  <%s key={someKey} {...props} />',
+          isStaticChildren,
+          children,
+          keys,
+          children
+        ), didWarnAboutKeySpread[children + isStaticChildren] = true);
+      }
+      children = null;
+      void 0 !== maybeKey && (checkKeyStringCoercion(maybeKey), children = "" + maybeKey);
+      hasValidKey(config) && (checkKeyStringCoercion(config.key), children = "" + config.key);
+      if ("key" in config) {
+        maybeKey = {};
+        for (var propName in config)
+          "key" !== propName && (maybeKey[propName] = config[propName]);
+      } else maybeKey = config;
+      children && defineKeyPropWarningGetter(
+        maybeKey,
+        "function" === typeof type ? type.displayName || type.name || "Unknown" : type
+      );
+      return ReactElement(
+        type,
+        children,
+        maybeKey,
+        getOwner(),
+        debugStack,
+        debugTask
+      );
+    }
+    function validateChildKeys(node) {
+      isValidElement(node) ? node._store && (node._store.validated = 1) : "object" === typeof node && null !== node && node.$$typeof === REACT_LAZY_TYPE && ("fulfilled" === node._payload.status ? isValidElement(node._payload.value) && node._payload.value._store && (node._payload.value._store.validated = 1) : node._store && (node._store.validated = 1));
+    }
+    function isValidElement(object) {
+      return "object" === typeof object && null !== object && object.$$typeof === REACT_ELEMENT_TYPE;
+    }
+    var React = require$$0, REACT_ELEMENT_TYPE = /* @__PURE__ */ Symbol.for("react.transitional.element"), REACT_PORTAL_TYPE = /* @__PURE__ */ Symbol.for("react.portal"), REACT_FRAGMENT_TYPE = /* @__PURE__ */ Symbol.for("react.fragment"), REACT_STRICT_MODE_TYPE = /* @__PURE__ */ Symbol.for("react.strict_mode"), REACT_PROFILER_TYPE = /* @__PURE__ */ Symbol.for("react.profiler"), REACT_CONSUMER_TYPE = /* @__PURE__ */ Symbol.for("react.consumer"), REACT_CONTEXT_TYPE = /* @__PURE__ */ Symbol.for("react.context"), REACT_FORWARD_REF_TYPE = /* @__PURE__ */ Symbol.for("react.forward_ref"), REACT_SUSPENSE_TYPE = /* @__PURE__ */ Symbol.for("react.suspense"), REACT_SUSPENSE_LIST_TYPE = /* @__PURE__ */ Symbol.for("react.suspense_list"), REACT_MEMO_TYPE = /* @__PURE__ */ Symbol.for("react.memo"), REACT_LAZY_TYPE = /* @__PURE__ */ Symbol.for("react.lazy"), REACT_ACTIVITY_TYPE = /* @__PURE__ */ Symbol.for("react.activity"), REACT_CLIENT_REFERENCE = /* @__PURE__ */ Symbol.for("react.client.reference"), ReactSharedInternals = React.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, hasOwnProperty = Object.prototype.hasOwnProperty, isArrayImpl = Array.isArray, createTask = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    React = {
+      react_stack_bottom_frame: function(callStackForError) {
+        return callStackForError();
+      }
+    };
+    var specialPropKeyWarningShown;
+    var didWarnAboutElementRef = {};
+    var unknownOwnerDebugStack = React.react_stack_bottom_frame.bind(
+      React,
+      UnknownOwner
+    )();
+    var unknownOwnerDebugTask = createTask(getTaskName(UnknownOwner));
+    var didWarnAboutKeySpread = {};
+    reactJsxRuntime_development.Fragment = REACT_FRAGMENT_TYPE;
+    reactJsxRuntime_development.jsx = function(type, config, maybeKey) {
+      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+      return jsxDEVImpl(
+        type,
+        config,
+        maybeKey,
+        false,
+        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+      );
+    };
+    reactJsxRuntime_development.jsxs = function(type, config, maybeKey) {
+      var trackActualOwner = 1e4 > ReactSharedInternals.recentlyCreatedOwnerStacks++;
+      return jsxDEVImpl(
+        type,
+        config,
+        maybeKey,
+        true,
+        trackActualOwner ? Error("react-stack-top-frame") : unknownOwnerDebugStack,
+        trackActualOwner ? createTask(getTaskName(type)) : unknownOwnerDebugTask
+      );
+    };
+  })();
+  return reactJsxRuntime_development;
+}
+var hasRequiredJsxRuntime;
+function requireJsxRuntime() {
+  if (hasRequiredJsxRuntime) return jsxRuntime.exports;
+  hasRequiredJsxRuntime = 1;
+  if (process.env.NODE_ENV === "production") {
+    jsxRuntime.exports = requireReactJsxRuntime_production();
+  } else {
+    jsxRuntime.exports = requireReactJsxRuntime_development();
+  }
+  return jsxRuntime.exports;
+}
+var jsxRuntimeExports = requireJsxRuntime();
+function LoaderView() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        backdropFilter: "blur(5px)",
+        backgroundColor: "#0000000A"
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "1rem"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                style: {
+                  width: "48px",
+                  height: "48px",
+                  border: "6px solid #e5e7eb",
+                  borderTopColor: "#3b82f6",
+                  borderRadius: "50%",
+                  animation: "spin 0.8s linear infinite"
+                }
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "p",
+              {
+                style: {
+                  margin: 0,
+                  fontSize: "0.875rem",
+                  color: "#6b7280",
+                  fontFamily: "system-ui, -apple-system, sans-serif"
+                },
+                children: "Loading..."
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsx("style", { children: `
+          @keyframes spin {
+            to {
+              transform: rotate(360deg);
+            }
+          }
+        ` })
+          ]
+        }
+      )
+    }
+  );
+}
+function ErrorView() {
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(
+    "div",
+    {
+      style: {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        backdropFilter: "blur(5px)",
+        backgroundColor: "#0000000A"
+      },
+      children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            top: "50%",
+            left: "50%",
+            transform: "translate(-50%, -50%)",
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: "0.75rem",
+            padding: "1.5rem"
+          },
+          children: [
+            /* @__PURE__ */ jsxRuntimeExports.jsx(
+              "div",
+              {
+                style: {
+                  width: "48px",
+                  height: "48px",
+                  borderRadius: "50%",
+                  backgroundColor: "#fef2f2",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
+                children: /* @__PURE__ */ jsxRuntimeExports.jsxs(
+                  "svg",
+                  {
+                    width: "24",
+                    height: "24",
+                    viewBox: "0 0 24 24",
+                    fill: "none",
+                    stroke: "#ef4444",
+                    strokeWidth: "2",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round",
+                    "aria-label": "Error icon",
+                    children: [
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("title", { children: "Error" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("circle", { cx: "12", cy: "12", r: "10" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+                      /* @__PURE__ */ jsxRuntimeExports.jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+                    ]
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { style: { textAlign: "center" }, children: [
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "p",
+                {
+                  style: {
+                    margin: 0,
+                    fontSize: "0.875rem",
+                    fontWeight: 600,
+                    color: "#1f2937",
+                    fontFamily: "system-ui, -apple-system, sans-serif"
+                  },
+                  children: "Error loading viewer"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntimeExports.jsx(
+                "p",
+                {
+                  style: {
+                    margin: "0.25rem 0 0 0",
+                    fontSize: "0.75rem",
+                    color: "#6b7280",
+                    fontFamily: "system-ui, -apple-system, sans-serif"
+                  },
+                  children: "Please try refreshing the page"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+}
+class Plugin {
+  plugin;
+  objectUrls;
+  constructor(plugin) {
+    this.plugin = plugin;
+    this.objectUrls = /* @__PURE__ */ new Set();
+  }
+  /**
+   * Create a Plugin by instantiating the underlying PluginUI.
+   * We use a static async factory because constructors cannot be async.
+   */
+  static async create(container, initialUI) {
+    const defaultSpec = DefaultPluginUISpec();
+    if (!container.querySelector(".msp-plugin")) {
+      container.innerHTML = "";
+    }
+    const plugin = await createPluginUI({
+      target: container,
+      render: renderReact18,
+      spec: {
+        actions: defaultSpec.actions ?? [],
+        behaviors: [
+          ...initialUI !== "minimal" ? defaultSpec.behaviors : [],
+          PluginSpec.Behavior(MolViewSpec)
+        ],
+        animations: [...defaultSpec.animations || []],
+        layout: {
+          initial: {
+            showControls: initialUI === "expanded",
+            controlsDisplay: "reactive"
+            // isExpanded: false,
+          }
+        },
+        components: {
+          ...defaultSpec.components
+        },
+        canvas3d: {
+          ...defaultSpec.canvas3d,
+          camera: {
+            ...defaultSpec.canvas3d?.camera,
+            helper: {
+              axes: initialUI === "minimal" ? {
+                name: "off",
+                params: {}
+              } : defaultSpec.canvas3d?.camera?.helper?.axes
+            }
+          }
+        }
+      }
+    });
+    return new Plugin(plugin);
+  }
+  dispose() {
+    this.plugin.dispose();
+    this.cleanupObjectUrls();
+  }
+  cleanupObjectUrls() {
+    for (const url of this.objectUrls) {
+      try {
+        URL.revokeObjectURL(url);
+      } catch (_e) {
+      }
+      this.objectUrls.delete(url);
+    }
+  }
+  createObjectUrlFromFile(file) {
+    const url = URL.createObjectURL(file);
+    this.objectUrls.add(url);
+    return url;
+  }
+  clear() {
+    this.plugin.clear();
+  }
+  async loadMvs(mvs) {
+    return await loadMVSData(this.plugin, mvs, "mvsj");
+  }
+  setBackgroundColor(color) {
+    const hexString = color.replace("#", "0x");
+    this.plugin.canvas3d?.setProps({
+      renderer: { backgroundColor: Color.fromHexString(hexString) }
+    });
+  }
+  setAnimation(type, speed) {
+    if (type === "off") {
+      this.plugin.canvas3d?.setProps({
+        trackball: {
+          animate: {
+            name: "off",
+            params: {}
+          }
+        }
+      });
+      return;
+    }
+    const animationParams = type === "spin" ? {
+      speed: speed ?? 0.05
+    } : {
+      speed: speed ?? 0.2,
+      angle: 10
+    };
+    this.plugin.canvas3d?.setProps({
+      trackball: {
+        animate: {
+          name: type,
+          params: animationParams
+        }
+      }
+    });
+  }
+  async focusOnDomain(domainStart, domainEnd) {
+    const state = this.plugin.state.data;
+    const structures = state.selectQ(
+      (q) => q.rootsOfType(PluginStateObject.Molecule.Structure)
+    );
+    if (structures.length === 0) {
+      return;
+    }
+    const structureCell = structures[0];
+    if (!structureCell?.obj) {
+      return;
+    }
+    const structureData = structureCell.obj.data;
+    const selection = Script.getStructureSelection(
+      (Q) => Q.struct.generator.atomGroups({
+        "residue-test": Q.core.rel.inRange([
+          Q.struct.atomProperty.macromolecular.auth_seq_id(),
+          domainStart,
+          domainEnd
+        ])
+      }),
+      structureData
+    );
+    const loci = StructureSelection.toLociWithSourceUnits(selection);
+    if (!StructureElement.Loci.isEmpty(loci)) {
+      await this.plugin.managers.camera.focusLoci(loci);
+    }
+  }
+  async resetView() {
+    await this.plugin.managers.camera.reset();
+  }
+  async updateStructureTransform(structureIndex, translation, rotation) {
+    const state = this.plugin.state.data;
+    const structures = state.selectQ(
+      (q) => q.rootsOfType(PluginStateObject.Molecule.Structure)
+    );
+    if (structureIndex >= structures.length) {
+      return;
+    }
+    const targetStructure = structures[structureIndex];
+    if (!targetStructure) {
+      return;
+    }
+    const allCells = state.selectQ((q) => q.root.subtree());
+    const transforms = allCells.filter(
+      (cell) => cell.transform.transformer === StateTransforms.Model.TransformStructureConformation
+    );
+    const targetTransform = transforms[structureIndex];
+    if (targetTransform) {
+      const matrix = Mat4.identity();
+      if (rotation) {
+        Mat4.setValue(matrix, 0, 0, rotation[0][0]);
+        Mat4.setValue(matrix, 0, 1, rotation[0][1]);
+        Mat4.setValue(matrix, 0, 2, rotation[0][2]);
+        Mat4.setValue(matrix, 1, 0, rotation[1][0]);
+        Mat4.setValue(matrix, 1, 1, rotation[1][1]);
+        Mat4.setValue(matrix, 1, 2, rotation[1][2]);
+        Mat4.setValue(matrix, 2, 0, rotation[2][0]);
+        Mat4.setValue(matrix, 2, 1, rotation[2][1]);
+        Mat4.setValue(matrix, 2, 2, rotation[2][2]);
+      }
+      if (translation) {
+        Mat4.setTranslation(
+          matrix,
+          Vec3.create(translation[0], translation[1], translation[2])
+        );
+      }
+      const update = state.build().to(targetTransform.transform.ref).update(
+        StateTransforms.Model.TransformStructureConformation,
+        (old) => ({
+          ...old,
+          transform: {
+            name: "matrix",
+            params: {
+              data: matrix,
+              transpose: false
+            }
+          }
+        })
+      );
+      await this.plugin.runTask(state.updateTree(update));
+    }
+  }
+  getPluginContext() {
+    return this.plugin;
+  }
+}
+const PLUGIN_GC_TIMEOUT = 30 * 1e3;
+class Manager {
+  static instance;
+  initializatingContainers;
+  plugins;
+  refCount;
+  // [count, lastUsedTimestamp]
+  timer;
+  constructor() {
+    this.initializatingContainers = /* @__PURE__ */ new Set();
+    this.plugins = /* @__PURE__ */ new Map();
+    this.refCount = /* @__PURE__ */ new Map();
+    this.timer = void 0;
+    this.initGC();
+  }
+  static getInstance() {
+    if (!Manager.instance) {
+      Manager.instance = new Manager();
+    }
+    return Manager.instance;
+  }
+  cleanup() {
+    clearInterval(this.timer);
+  }
+  initGC() {
+    this.timer = setInterval(() => {
+      const now = Date.now();
+      for (const [plugin, lastActive] of this.refCount) {
+        if (lastActive[0] === 0 && now - lastActive[1] > PLUGIN_GC_TIMEOUT) {
+          plugin.dispose();
+        }
+      }
+    }, 20 * 1e3);
+  }
+  async initPlugin(container, initialUI) {
+    if (this.plugins.has(container)) {
+      return this.plugins.get(container);
+    }
+    if (container.querySelector(".msp-plugin")) {
+      for (const [containerElem, plugin] of this.plugins) {
+        if (containerElem.contains(container)) {
+          return plugin;
+        }
+      }
+    }
+    if (this.initializatingContainers.has(container)) {
+      while (this.initializatingContainers.has(container)) {
+        await new Promise((resolve) => setTimeout(resolve, 100));
+      }
+      const plugin = this.plugins.get(container);
+      if (!plugin) {
+        throw new Error("Viewer initialization failed");
+      }
+      return plugin;
+    }
+    try {
+      this.initializatingContainers.add(container);
+      if (!container.querySelector(".msp-plugin")) {
+        container.innerHTML = "";
+      }
+      const instance = await Plugin.create(container, initialUI);
+      this.refCount.set(instance, [1, Date.now()]);
+      this.plugins.set(container, instance);
+      return instance;
+    } finally {
+      this.initializatingContainers.delete(container);
+    }
+  }
+  getPlugin(container) {
+    const plugin = this.plugins.get(container);
+    if (plugin) {
+      const ref = this.refCount.get(plugin);
+      if (ref) {
+        ref[0]++;
+        ref[1] = Date.now();
+      }
+    }
+    return plugin;
+  }
+  releasePlugin(plugin) {
+    const ref = this.refCount.get(plugin);
+    if (!ref) {
+      throw new Error("Trying to release a plugin that is not managed");
+    }
+    ref[0] = Math.max(0, ref[0] - 1);
+    ref[1] = Date.now();
+  }
+  disposePlugin(container) {
+    const plugin = this.plugins.get(container);
+    if (plugin) {
+      plugin.dispose();
+      this.plugins.delete(container);
+      container.innerHTML = "";
+    }
+  }
+}
+function normalizeChoppingData(chopping) {
+  if (!chopping) {
+    return [];
+  }
+  return chopping.map((entry) => ({
+    label: entry.label,
+    showLabel: entry.showLabel,
+    ranges: entry.ranges.map((range) => ({
+      start: Math.min(range.start, range.end),
+      end: Math.max(range.start, range.end)
+    })).filter(
+      (range) => Number.isFinite(range.start) && Number.isFinite(range.end)
+    )
+  })).filter((entry) => entry.ranges.length > 0);
+}
+const BASE_COLOR_YELLOW = "#FD9D0D";
+const BASE_COLOR_BLUE = "#0D6EFD";
+const BASE_COLOR_GREY = "#F0F0F0";
+const MULTI_DOMAIN_COLORS = [
+  "#4e79a7",
+  "#f28e2c",
+  "#e15759",
+  "#76b7b2",
+  "#59a14f",
+  "#edc949",
+  "#af7aa1",
+  "#ff9da7",
+  "#9c755f",
+  "#bab0ac"
+];
+const MULTI_PROTEIN_OPACITY_MAX = 0.5;
+const MULTI_PROTEIN_OPACITY_MIN = 0.1;
+const ALPHAFOLD_CONFIDENCE_COLORS = {
+  veryHigh: "#0053D6",
+  confident: "#65CBF3",
+  low: "#FFDB13",
+  veryLow: "#FF7D45"
+};
+function getBaseColor(colors, index) {
+  return colors[index] ?? BASE_COLOR_GREY;
+}
+function getOpacityForProtein(index, totalProteins) {
+  if (totalProteins < 3 || index === 0) {
+    return void 0;
+  }
+  const range = MULTI_PROTEIN_OPACITY_MAX - MULTI_PROTEIN_OPACITY_MIN;
+  const step = range / (totalProteins - 1);
+  return Math.max(
+    MULTI_PROTEIN_OPACITY_MIN,
+    MULTI_PROTEIN_OPACITY_MAX - (index - 1) * step
+  );
+}
+function applyFlatColor(representation, color, selector) {
+  const params = { color };
+  if (selector) {
+    params.selector = selector;
+  }
+  representation.color(params);
+}
+function applyAlphaFoldConfidenceColor(struct, component, representation) {
+  representation.colorFromSource({
+    schema: "all_atomic",
+    category_name: "atom_site",
+    field_name: "B_iso_or_equiv",
+    palette: {
+      kind: "discrete",
+      mode: "absolute",
+      colors: [
+        [ALPHAFOLD_CONFIDENCE_COLORS.veryLow, 0],
+        [ALPHAFOLD_CONFIDENCE_COLORS.low, 50],
+        [ALPHAFOLD_CONFIDENCE_COLORS.confident, 70],
+        [ALPHAFOLD_CONFIDENCE_COLORS.veryHigh, 90]
+      ]
+    }
+  });
+  component.tooltip({ text: "pLDDT:" });
+  struct.tooltipFromSource({
+    schema: "all_atomic",
+    category_name: "atom_site",
+    field_name: "B_iso_or_equiv"
+  });
+}
+function inferColors(count, domains) {
+  if (count < 0) {
+    throw new Error("Count must be non-negative");
+  }
+  if (count === 0) {
+    return [];
+  }
+  if (count === 1) {
+    return [BASE_COLOR_BLUE];
+  }
+  if (count === 2) {
+    return [BASE_COLOR_BLUE, BASE_COLOR_YELLOW];
+  }
+  return [BASE_COLOR_YELLOW, ...Array(count - 1).fill(BASE_COLOR_GREY)];
+}
+function createChainSelector(protein) {
+  if (!protein.chain) {
+    return "all";
+  }
+  return protein.file ? { label_asym_id: protein.chain } : { auth_asym_id: protein.chain };
+}
+function getRepresentationType(protein, representationType) {
+  return representationType ?? protein.representation ?? "cartoon";
+}
+function createRepresentationParams(protein, representationType) {
+  const repType = getRepresentationType(protein, representationType);
+  if (protein.file) {
+    return { size_factor: 1, tubular_helices: false, type: repType };
+  }
+  return { type: repType };
+}
+function isCartoonLikeRepresentation(repType) {
+  return repType === "cartoon" || repType === "backbone";
+}
+function createDomainSelector(protein, seqRange) {
+  if (!protein.chain) {
+    return seqRange ?? "all";
+  }
+  const chainId = protein.file ? { label_asym_id: protein.chain } : { auth_asym_id: protein.chain };
+  return seqRange ? { ...chainId, ...seqRange } : chainId;
+}
+const REST_OPACITY = 0.15;
+function renderProteinWithoutChopping(struct, protein, proteinIndex, totalProteins, colors) {
+  const selector = createChainSelector(protein);
+  const comp = struct.component({ selector });
+  const repType = getRepresentationType(protein);
+  const repr = comp.representation(
+    createRepresentationParams(protein, repType)
+  );
+  if (totalProteins === 1) {
+    if (isCartoonLikeRepresentation(repType)) {
+      applyAlphaFoldConfidenceColor(struct, comp, repr);
+    }
+    return;
+  }
+  if (totalProteins >= 3) {
+    if (proteinIndex === 0 && isCartoonLikeRepresentation(repType)) {
+      applyAlphaFoldConfidenceColor(struct, comp, repr);
+    } else {
+      const color2 = getBaseColor(colors, proteinIndex);
+      applyFlatColor(repr, color2);
+      const opacity2 = getOpacityForProtein(proteinIndex, totalProteins);
+      if (opacity2 !== void 0) {
+        repr.opacity({ opacity: opacity2 });
+      }
+    }
+    return;
+  }
+  const color = getBaseColor(colors, proteinIndex);
+  applyFlatColor(repr, color);
+  const opacity = getOpacityForProtein(proteinIndex, totalProteins);
+  if (opacity !== void 0 && opacity < 1) {
+    repr.opacity({ opacity });
+  }
+}
+function renderProteinWithChopping(struct, protein, proteinIndex, totalProteins, colors, choppingEntries) {
+  if (choppingEntries.length === 0) {
+    return;
+  }
+  const selector = createChainSelector(protein);
+  const comp = struct.component({ selector });
+  const baseRepr = comp.representation(createRepresentationParams(protein));
+  let backgroundColor;
+  let restOpacity = REST_OPACITY;
+  if (totalProteins === 1 && choppingEntries.length >= 2) {
+    backgroundColor = BASE_COLOR_GREY;
+    restOpacity = 1;
+  } else {
+    backgroundColor = getBaseColor(colors, proteinIndex);
+  }
+  applyFlatColor(baseRepr, backgroundColor);
+  baseRepr.opacity({ opacity: restOpacity });
+  const useInlineDomainColoring = totalProteins === 1 && choppingEntries.length >= 2;
+  let domainPalette;
+  if (totalProteins === 1 && choppingEntries.length >= 2) {
+    domainPalette = choppingEntries.map(
+      (_, index) => MULTI_DOMAIN_COLORS[index % MULTI_DOMAIN_COLORS.length]
+    );
+  } else if (totalProteins === 2 && choppingEntries.length >= 2) {
+    const baseColorForDomains = proteinIndex === 0 ? BASE_COLOR_BLUE : BASE_COLOR_YELLOW;
+    domainPalette = Array(choppingEntries.length).fill(baseColorForDomains);
+  } else if (totalProteins === 2 && choppingEntries.length === 1) {
+    domainPalette = [backgroundColor];
+  } else {
+    domainPalette = Array(choppingEntries.length).fill(BASE_COLOR_BLUE);
+  }
+  if (useInlineDomainColoring) {
+    choppingEntries.forEach((entry, entryIndex) => {
+      applyDomainColor(baseRepr, protein, entry, domainPalette[entryIndex]);
+      addDomainLabel(struct, protein, entry);
+    });
+    return;
+  }
+  choppingEntries.forEach((entry, entryIndex) => {
+    renderDomainEntry(struct, protein, entry, domainPalette[entryIndex]);
+  });
+}
+function applyDomainColor(representation, protein, entry, color) {
+  if (entry.ranges.length === 0) {
+    return;
+  }
+  const selectors = entry.ranges.map((range) => {
+    const seqRange = {
+      beg_auth_seq_id: range.start,
+      end_auth_seq_id: range.end
+    };
+    return createDomainSelector(protein, seqRange);
+  });
+  const selectorParam = selectors.length === 1 ? selectors[0] : selectors;
+  applyFlatColor(representation, color, selectorParam);
+}
+function renderDomainEntry(struct, protein, entry, color) {
+  const reprParams = createRepresentationParams(protein);
+  entry.ranges.forEach((range) => {
+    const seqRange = {
+      beg_auth_seq_id: range.start,
+      end_auth_seq_id: range.end
+    };
+    const selector = createDomainSelector(protein, seqRange);
+    const domainComp = struct.component({ selector });
+    const domainRepr = domainComp.representation(reprParams);
+    applyFlatColor(domainRepr, color);
+  });
+  addDomainLabel(struct, protein, entry);
+}
+function addDomainLabel(struct, protein, entry) {
+  if (!entry.showLabel || entry.ranges.length === 0) {
+    return;
+  }
+  const labelRange = entry.ranges[Math.floor(entry.ranges.length / 2)] ?? entry.ranges[0];
+  const labelSelector = createDomainSelector(protein, {
+    beg_auth_seq_id: labelRange.start,
+    end_auth_seq_id: labelRange.end
+  });
+  struct.component({ selector: labelSelector }).label({
+    text: entry.label
+  });
+}
+function transposeAndFlatten(matrix) {
+  return matrix[0].flatMap(
+    (_, colIndex) => matrix.map((row) => row[colIndex])
+  );
+}
+const DEFAULT_ROTATION = [
+  [1, 0, 0],
+  [0, 1, 0],
+  [0, 0, 1]
+];
+const DEFAULT_TRANSLATION = [0, 0, 0];
+function prepareModelSourceUrl(protein, modelSourceUrls, plugin) {
+  const defaultModelSourceUrls = {
+    uniProtId: "https://alphafold.ebi.ac.uk/files"
+  };
+  let url;
+  if (protein.file) {
+    if (!plugin) {
+      throw new Error(
+        "Plugin instance is required to create object URL from file"
+      );
+    }
+    url = plugin.createObjectUrlFromFile(protein.file);
+  } else if (modelSourceUrls.uniProtId !== void 0) {
+    url = modelSourceUrls.uniProtId(protein.uniProtId);
+  } else {
+    url = `${defaultModelSourceUrls.uniProtId}/AF-${protein.uniProtId}-F1-model_v6.cif`;
+  }
+  return url;
+}
+function getParseFormat(protein) {
+  if (!protein.file) {
+    return "mmcif";
+  }
+  return protein.file.name.endsWith(".cif") || protein.file.name.endsWith(".mmcif") ? "mmcif" : "pdb";
+}
+function processProtein(root, protein, proteinIndex, totalProteins, colors, modelSourceUrls, plugin) {
+  const url = prepareModelSourceUrl(protein, modelSourceUrls, plugin);
+  const download = root.download({ url });
+  const parseFormat = getParseFormat(protein);
+  const parse = download.parse({ format: parseFormat });
+  const struct = parse.modelStructure(
+    protein.file ? { block_header: null, block_index: 0, model_index: 0 } : {}
+  );
+  struct.transform({
+    rotation: transposeAndFlatten(
+      protein.superposition?.rotation ?? DEFAULT_ROTATION
+    ),
+    translation: protein.superposition?.translation ?? DEFAULT_TRANSLATION,
+    rotation_center: [0, 0, 0]
+  });
+  const choppingEntries = totalProteins >= 3 ? [] : normalizeChoppingData(protein.chopping);
+  if (choppingEntries.length > 0) {
+    renderProteinWithChopping(
+      struct,
+      protein,
+      proteinIndex,
+      totalProteins,
+      colors,
+      choppingEntries
+    );
+  } else {
+    renderProteinWithoutChopping(
+      struct,
+      protein,
+      proteinIndex,
+      totalProteins,
+      colors
+    );
+  }
+}
+function createMVS(proteins, modelSourceUrls, plugin) {
+  const colors = inferColors(proteins.length);
+  const root = createMVSBuilder();
+  for (let i = 0; i < proteins.length; i++) {
+    const protein = proteins[i];
+    processProtein(
+      root,
+      protein,
+      i,
+      proteins.length,
+      colors,
+      modelSourceUrls,
+      plugin
+    );
+  }
+  return root.getState({
+    title: proteins.length > 1 ? "Protein Comparison" : "Protein Visualization",
+    description: `Visualization of ${proteins.length} protein(s)`
+  });
+}
+const Viewer = forwardRef(function Viewer2({
+  proteins,
+  mvs,
+  modelSourceUrls,
+  initialUI = "standard",
+  bgColor = "#ffffff",
+  spin = false,
+  spinSpeed = 0.05,
+  rock = false,
+  rockSpeed = 0.2,
+  height,
+  className
+}, ref) {
+  const containerRef = useRef(null);
+  const pluginRef = useRef(null);
+  const proteinsRef = useRef(proteins);
+  const [state, setState] = useState("loading");
+  const id = useId();
+  useEffect(() => {
+    proteinsRef.current = proteins;
+  }, [proteins]);
+  useImperativeHandle(
+    ref,
+    () => ({
+      highlight: async (proteinIndex, label) => {
+        if (!pluginRef.current || proteinsRef.current === void 0 || proteinsRef.current.length <= proteinIndex) {
+          return;
+        }
+        const domain = proteinsRef.current[proteinIndex]?.chopping?.find(
+          (d) => d.label === label
+        );
+        const start = domain?.ranges[0]?.start;
+        const end = domain?.ranges[0]?.end;
+        if (start !== void 0 && end !== void 0) {
+          await pluginRef.current.focusOnDomain(start, end);
+        }
+      },
+      reset: async () => {
+        if (!pluginRef.current) {
+          return;
+        }
+        await pluginRef.current.resetView();
+      },
+      updateSuperposition: async (proteinIndex, translation, rotation) => {
+        if (!pluginRef.current) {
+          return;
+        }
+        await pluginRef.current.updateStructureTransform(
+          proteinIndex,
+          translation,
+          rotation
+        );
+      }
+    }),
+    []
+  );
+  useEffect(() => {
+    return () => {
+      pluginRef.current = null;
+    };
+  }, []);
+  useEffect(() => {
+    if (!containerRef.current) {
+      return;
+    }
+    if (proteins !== void 0 && mvs !== void 0 || proteins === void 0 && mvs === void 0) {
+      throw new Error(
+        "Either `proteins` or `mvs` must be provided, but not both."
+      );
+    }
+    setState("loading");
+    let ref2;
+    async function init() {
+      const manager = Manager.getInstance();
+      const el = containerRef.current;
+      if (!el) {
+        return;
+      }
+      let pl = manager.getPlugin(el);
+      if (!pl) {
+        pl = await manager.initPlugin(el, initialUI);
+      }
+      ref2 = pl;
+      pluginRef.current = pl;
+      try {
+        if (mvs === void 0 && proteins === void 0) {
+          throw new Error(
+            "Either `proteins` or `mvs` must be provided, but not both."
+          );
+        }
+        const proteinsVal = proteins;
+        if (mvs === void 0 && proteinsVal === void 0) {
+          throw new Error("Missing proteins data");
+        }
+        const proteinsArg = proteinsVal;
+        const mvsData = mvs ?? createMVS(proteinsArg, modelSourceUrls ?? {}, pl);
+        await pl.loadMvs(mvsData);
+      } catch (e) {
+        console.error(e);
+        setState("error");
+        return;
+      }
+      setState("success");
+    }
+    init();
+    return () => {
+      if (ref2 !== void 0) {
+        Manager.getInstance().releasePlugin(ref2);
+      }
+    };
+  }, [proteins, mvs, modelSourceUrls, initialUI]);
+  useEffect(() => {
+    if (state !== "success" || !pluginRef.current) {
+      return;
+    }
+    if (spin) {
+      pluginRef.current.setAnimation("spin", spinSpeed);
+    } else if (rock) {
+      pluginRef.current.setAnimation("rock", rockSpeed);
+    } else {
+      pluginRef.current.setAnimation("off");
+    }
+  }, [state, spin, rock, spinSpeed, rockSpeed]);
+  useEffect(() => {
+    if (state !== "success" || !pluginRef.current) {
+      return;
+    }
+    if (bgColor) {
+      pluginRef.current.setBackgroundColor(bgColor);
+    }
+  }, [state, bgColor]);
+  const styles = {
+    height: height ? `${height}px` : "100%",
+    position: "relative"
+  };
+  const containerClasses = `react-molstar${initialUI === "minimal" ? " no-controls" : ""}`;
+  return /* @__PURE__ */ jsxRuntimeExports.jsxs("div", { className, style: styles, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx(
+      "div",
+      {
+        ref: containerRef,
+        id,
+        className: containerClasses,
+        style: {
+          opacity: state === "success" ? 1 : 0.7,
+          transition: "opacity 0.3s ease-in-out"
+        }
+      }
+    ),
+    state === "loading" && /* @__PURE__ */ jsxRuntimeExports.jsx(LoaderView, {}),
+    state === "error" && /* @__PURE__ */ jsxRuntimeExports.jsx(ErrorView, {})
+  ] });
+});
+export {
+  Manager,
+  Plugin,
+  Viewer,
+  createMVS
+};
+//# sourceMappingURL=index.es.js.map