react-msaview 5.0.1 → 5.0.4

package/dist/vendor/copyToClipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"copyToClipboard.js","sourceRoot":"","sources":["../../src/vendor/copyToClipboard.ts"],"names":[],"mappings":"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"}

package/dist/vendor/fileSaver.d.ts

@@ -0,0 +1,11 @@
+/**
+ * FileSaver.js
+ * A saveAs() FileSaver implementation.
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: MIT
+ * source: http://purl.eligrey.com/github/FileSaver.js
+ *
+ * Vendored and converted to ESM/TypeScript for pure ESM compatibility.
+ */
+export declare function saveAs(blob: Blob | string, name?: string): void;

package/dist/vendor/fileSaver.js

@@ -0,0 +1,80 @@
+/**
+ * FileSaver.js
+ * A saveAs() FileSaver implementation.
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: MIT
+ * source: http://purl.eligrey.com/github/FileSaver.js
+ *
+ * Vendored and converted to ESM/TypeScript for pure ESM compatibility.
+ */
+function click(node) {
+    try {
+        node.dispatchEvent(new MouseEvent('click'));
+    }
+    catch {
+        const evt = document.createEvent('MouseEvents');
+        evt.initMouseEvent('click', true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
+        node.dispatchEvent(evt);
+    }
+}
+// Detect WebView inside a native macOS app by ruling out all browsers
+const isMacOSWebView = typeof navigator !== 'undefined' &&
+    navigator.userAgent.includes('Macintosh') &&
+    navigator.userAgent.includes('AppleWebKit') &&
+    !navigator.userAgent.includes('Safari');
+export function saveAs(blob, name) {
+    if (typeof window === 'undefined') {
+        return;
+    }
+    const URL = window.URL;
+    const a = document.createElement('a');
+    name = name || (blob instanceof Blob ? 'download' : 'download');
+    // Use download attribute if available and not macOS WebView
+    if ('download' in HTMLAnchorElement.prototype && !isMacOSWebView) {
+        a.download = name;
+        a.rel = 'noopener';
+        if (typeof blob === 'string') {
+            a.href = blob;
+            click(a);
+        }
+        else {
+            a.href = URL.createObjectURL(blob);
+            setTimeout(() => {
+                URL.revokeObjectURL(a.href);
+            }, 40000);
+            setTimeout(() => {
+                click(a);
+            }, 0);
+        }
+        return;
+    }
+    // Fallback for browsers without download attribute support
+    if (typeof blob === 'string') {
+        window.open(blob, '_blank');
+        return;
+    }
+    const isSafari = /constructor/i.test(window.HTMLElement?.toString() ??
+        '') || !!window.safari;
+    const isChromeIOS = /CriOS\/[\d]+/.test(navigator.userAgent);
+    if ((isChromeIOS || isSafari || isMacOSWebView) &&
+        typeof FileReader !== 'undefined') {
+        const reader = new FileReader();
+        reader.onloadend = () => {
+            let url = reader.result;
+            url = isChromeIOS
+                ? url
+                : url.replace(/^data:[^;]*;/, 'data:attachment/file;');
+            window.open(url, '_blank');
+        };
+        reader.readAsDataURL(blob);
+    }
+    else {
+        const url = URL.createObjectURL(blob);
+        window.open(url, '_blank');
+        setTimeout(() => {
+            URL.revokeObjectURL(url);
+        }, 40000);
+    }
+}
+//# sourceMappingURL=fileSaver.js.map

package/dist/vendor/fileSaver.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileSaver.js","sourceRoot":"","sources":["../../src/vendor/fileSaver.ts"],"names":[],"mappings":"AAAA;;;;;;;;;GASG;AAEH,SAAS,KAAK,CAAC,IAAuB;IACpC,IAAI,CAAC;QACH,IAAI,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,CAAC,CAAC,CAAA;IAC7C,CAAC;IAAC,MAAM,CAAC;QACP,MAAM,GAAG,GAAG,QAAQ,CAAC,WAAW,CAAC,aAAa,CAAC,CAAA;QAC/C,GAAG,CAAC,cAAc,CAChB,OAAO,EACP,IAAI,EACJ,IAAI,EACJ,MAAM,EACN,CAAC,EACD,CAAC,EACD,CAAC,EACD,EAAE,EACF,EAAE,EACF,KAAK,EACL,KAAK,EACL,KAAK,EACL,KAAK,EACL,CAAC,EACD,IAAI,CACL,CAAA;QACD,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACzB,CAAC;AACH,CAAC;AAED,sEAAsE;AACtE,MAAM,cAAc,GAClB,OAAO,SAAS,KAAK,WAAW;IAChC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,WAAW,CAAC;IACzC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,aAAa,CAAC;IAC3C,CAAC,SAAS,CAAC,SAAS,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAA;AAEzC,MAAM,UAAU,MAAM,CAAC,IAAmB,EAAE,IAAa;IACvD,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;QAClC,OAAM;IACR,CAAC;IAED,MAAM,GAAG,GAAG,MAAM,CAAC,GAAG,CAAA;IACtB,MAAM,CAAC,GAAG,QAAQ,CAAC,aAAa,CAAC,GAAG,CAAC,CAAA;IACrC,IAAI,GAAG,IAAI,IAAI,CAAC,IAAI,YAAY,IAAI,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CAAA;IAE/D,4DAA4D;IAC5D,IAAI,UAAU,IAAI,iBAAiB,CAAC,SAAS,IAAI,CAAC,cAAc,EAAE,CAAC;QACjE,CAAC,CAAC,QAAQ,GAAG,IAAI,CAAA;QACjB,CAAC,CAAC,GAAG,GAAG,UAAU,CAAA;QAElB,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;YAC7B,CAAC,CAAC,IAAI,GAAG,IAAI,CAAA;YACb,KAAK,CAAC,CAAC,CAAC,CAAA;QACV,CAAC;aAAM,CAAC;YACN,CAAC,CAAC,IAAI,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;YAClC,UAAU,CAAC,GAAG,EAAE;gBACd,GAAG,CAAC,eAAe,CAAC,CAAC,CAAC,IAAI,CAAC,CAAA;YAC7B,CAAC,EAAE,KAAK,CAAC,CAAA;YACT,UAAU,CAAC,GAAG,EAAE;gBACd,KAAK,CAAC,CAAC,CAAC,CAAA;YACV,CAAC,EAAE,CAAC,CAAC,CAAA;QACP,CAAC;QACD,OAAM;IACR,CAAC;IAED,2DAA2D;IAC3D,IAAI,OAAO,IAAI,KAAK,QAAQ,EAAE,CAAC;QAC7B,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAA;QAC3B,OAAM;IACR,CAAC;IAED,MAAM,QAAQ,GACZ,cAAc,CAAC,IAAI,CAChB,MAA8C,CAAC,WAAW,EAAE,QAAQ,EAAE;QACrE,EAAE,CACL,IAAI,CAAC,CAAE,MAA0C,CAAC,MAAM,CAAA;IAC3D,MAAM,WAAW,GAAG,cAAc,CAAC,IAAI,CAAC,SAAS,CAAC,SAAS,CAAC,CAAA;IAE5D,IACE,CAAC,WAAW,IAAI,QAAQ,IAAI,cAAc,CAAC;QAC3C,OAAO,UAAU,KAAK,WAAW,EACjC,CAAC;QACD,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAA;QAC/B,MAAM,CAAC,SAAS,GAAG,GAAG,EAAE;YACtB,IAAI,GAAG,GAAG,MAAM,CAAC,MAAgB,CAAA;YACjC,GAAG,GAAG,WAAW;gBACf,CAAC,CAAC,GAAG;gBACL,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,cAAc,EAAE,uBAAuB,CAAC,CAAA;YACxD,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAA;QAC5B,CAAC,CAAA;QACD,MAAM,CAAC,aAAa,CAAC,IAAI,CAAC,CAAA;IAC5B,CAAC;SAAM,CAAC;QACN,MAAM,GAAG,GAAG,GAAG,CAAC,eAAe,CAAC,IAAI,CAAC,CAAA;QACrC,MAAM,CAAC,IAAI,CAAC,GAAG,EAAE,QAAQ,CAAC,CAAA;QAC1B,UAAU,CAAC,GAAG,EAAE;YACd,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,CAAA;QAC1B,CAAC,EAAE,KAAK,CAAC,CAAA;IACX,CAAC;AACH,CAAC"}

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const version = "5.0.0";
+export declare const version = "5.0.4";

package/dist/version.js

@@ -1,2 +1,2 @@
-export const version = '5.0.0';
+export const version = '5.0.4';
 //# sourceMappingURL=version.js.map

package/dist/webpack.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-export { default as MSAView } from './components/Loading';
-export { type MsaViewModel, default as MSAModelF } from './model';
+export { default as MSAView } from './components/Loading.tsx';
+export { type MsaViewModel, default as MSAModelF } from './model.ts';
 export * from 'react-dom/client';
 export { React };

package/dist/webpack.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
-export { default as MSAView } from './components/Loading';
-export { default as MSAModelF } from './model';
+export { default as MSAView } from "./components/Loading.js";
+export { default as MSAModelF } from "./model.js";
 export * from 'react-dom/client';
 // eslint-disable-next-line unicorn/prefer-export-from
 export { React };

package/dist/webpack.js.map

@@ -1 +1 @@
-{"version":3,"file":"webpack.js","sourceRoot":"","sources":["../src/webpack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAqB,OAAO,IAAI,SAAS,EAAE,MAAM,SAAS,CAAA;AAEjE,cAAc,kBAAkB,CAAA;AAEhC,sDAAsD;AACtD,OAAO,EAAE,KAAK,EAAE,CAAA"}
+{"version":3,"file":"webpack.js","sourceRoot":"","sources":["../src/webpack.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,yBAA0B,CAAA;AAC7D,OAAO,EAAqB,OAAO,IAAI,SAAS,EAAE,MAAM,YAAY,CAAA;AAEpE,cAAc,kBAAkB,CAAA;AAEhC,sDAAsD;AACtD,OAAO,EAAE,KAAK,EAAE,CAAA"}

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "react-msaview",
   "author": "Colin",
-  "version": "5.0.1",
+  "version": "5.0.4",
   "license": "MIT",
+  "type": "module",
   "repository": {
     "type": "git",
     "url": "https://github.com/GMOD/react-msaview.git",
-    "directory": "lib"
+    "directory": "packages/lib"
   },
   "main": "dist/index.js",
   "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    }
+  },
   "files": [
     "dist",
     "bundle",
@@ -18,21 +26,6 @@
   "engines": {
     "node": ">=10"
   },
-  "scripts": {
-    "clean": "rimraf dist",
-    "watch": "yarn build:esm --watch",
-    "format": "prettier --write .",
-    "prebuild": "yarn clean",
-    "preversion": "node output-version.js > src/version.ts && git add -A src && git commit -m '[skip ci] Bump version.ts'",
-    "build:esm": "tsc",
-    "build:bundle": "webpack",
-    "build": "yarn build:esm && yarn build:bundle",
-    "prepack": "yarn build",
-    "postversion": "git push --follow-tags",
-    "statedocs": "rm -rf apidocs && mkdir apidocs && node --experimental-strip-types docgen/generateStateModelDocs.ts",
-    "poststatedocs": "yarn format",
-    "test": "vitest"
-  },
   "peerDependencies": {
     "@jbrowse/core": ">=2.0.0",
     "@jbrowse/mobx-state-tree": "^5.0.0",
@@ -47,13 +40,22 @@
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",
     "colord": "^2.9.3",
-    "copy-to-clipboard": "^3.3.1",
     "d3-array": "^3.2.3",
     "d3-hierarchy": "^3.1.2",
-    "file-saver": "^2.0.5",
     "flatbush": "^4.4.0",
-    "msa-parsers": "^1.0.5",
     "pako": "^2.1.0",
-    "svgcanvas": "^2.5.0"
+    "@jbrowse/svgcanvas": "5.0.4",
+    "msa-parsers": "5.0.4"
+  },
+  "scripts": {
+    "clean": "rimraf dist bundle",
+    "watch": "pnpm build:esm --watch",
+    "format": "prettier --write .",
+    "build:esm": "tsc",
+    "build:bundle": "webpack",
+    "build": "pnpm clean && pnpm build:esm && pnpm build:bundle",
+    "statedocs": "rm -rf apidocs && mkdir apidocs && node --experimental-strip-types docgen/generateStateModelDocs.ts",
+    "poststatedocs": "pnpm format",
+    "test": "vitest"
   }
-}
+}

package/src/colorSchemes.ts

@@ -2,7 +2,7 @@ import { blue, green, orange, red } from '@mui/material/colors'
 import { colord, extend } from 'colord'
 import namesPlugin from 'colord/plugins/names'
 
-import { transform } from './util'
+import { transform } from './util.ts'
 
 extend([namesPlugin])
 

package/src/components/ConservationTrack.tsx

@@ -2,8 +2,8 @@ import React, { useEffect, useRef } from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../model'
-import type { BasicTrack } from '../types'
+import type { MsaViewModel } from '../model.ts'
+import type { BasicTrack } from '../types.ts'
 
 const ConservationBlock = observer(function ({
   model,

package/src/components/Loading.tsx

@@ -5,10 +5,10 @@ import { ErrorBoundary } from '@jbrowse/core/ui/ErrorBoundary'
 import { Button, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import MSAView from './MSAView'
-import ImportForm from './import/ImportForm'
+import MSAView from './MSAView.tsx'
+import ImportForm from './import/ImportForm.tsx'
 
-import type { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model.ts'
 
 function LoadingSpinner() {
   return (

package/src/components/MSAView.tsx

@@ -2,16 +2,19 @@ import React, { Suspense } from 'react'
 
 import { observer } from 'mobx-react'
 
-import { HorizontalResizeHandle, VerticalResizeHandle } from './ResizeHandles'
-import Track from './Track'
-import VerticalScrollbar from './VerticalScrollbar'
-import Header from './header/Header'
-import Minimap from './minimap/Minimap'
-import MSAPanel from './msa/MSAPanel'
-import TreePanel from './tree/TreePanel'
-import TreeRuler from './tree/TreeRuler'
+import {
+  HorizontalResizeHandle,
+  VerticalResizeHandle,
+} from './ResizeHandles.tsx'
+import Track from './Track.tsx'
+import VerticalScrollbar from './VerticalScrollbar.tsx'
+import Header from './header/Header.tsx'
+import Minimap from './minimap/Minimap.tsx'
+import MSAPanel from './msa/MSAPanel.tsx'
+import TreePanel from './tree/TreePanel.tsx'
+import TreeRuler from './tree/TreeRuler.tsx'
 
-import type { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model.ts'
 
 const TopArea = observer(function ({ model }: { model: MsaViewModel }) {
   const { showHorizontalScrollbar } = model

package/src/components/ResizeHandles.tsx

@@ -2,7 +2,7 @@ import React, { useEffect, useRef, useState } from 'react'
 
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model.ts'
 
 export const VerticalResizeHandle = observer(function ({
   model,

package/src/components/SequenceTextArea.tsx

@@ -1,10 +1,10 @@
 import React, { useState } from 'react'
 
 import { Button, TextField } from '@mui/material'
-import copy from 'copy-to-clipboard'
 import { makeStyles } from 'tss-react/mui'
 
-import Checkbox2 from './Checkbox2'
+import Checkbox2 from './Checkbox2.tsx'
+import copy from '../vendor/copyToClipboard.ts'
 
 const useStyles = makeStyles()({
   textAreaFont: {

package/src/components/TextTrack.tsx

@@ -3,10 +3,10 @@ import React, { useEffect, useMemo, useRef } from 'react'
 import { useTheme } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { colorContrast } from '../util'
+import { colorContrast } from '../util.ts'
 
-import type { MsaViewModel } from '../model'
-import type { BasicTrack } from '../types'
+import type { MsaViewModel } from '../model.ts'
+import type { BasicTrack } from '../types.ts'
 
 const AnnotationBlock = observer(function ({
   track,

package/src/components/Track.tsx

@@ -5,10 +5,10 @@ import { IconButton, Menu, MenuItem } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model.ts'
 
 // lazies
-const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog'))
+const TrackInfoDialog = lazy(() => import('./dialogs/TrackInfoDialog.tsx'))
 
 const useStyles = makeStyles()({
   button: {

package/src/components/VerticalScrollbar.tsx

@@ -3,7 +3,7 @@ import React, { useEffect, useRef, useState } from 'react'
 import { clamp } from '@jbrowse/core/util'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../model'
+import type { MsaViewModel } from '../model.ts'
 
 const VerticalScrollbar = observer(({ model }: { model: MsaViewModel }) => {
   const { msaAreaHeight, scrollY, totalHeight } = model

package/src/components/dialogs/AboutDialog.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent, Link, Typography } from '@mui/material'
 
-import { version } from '../../version'
+import { version } from '../../version.ts'
 
 export default function AboutDialog({ onClose }: { onClose: () => void }) {
   return (

package/src/components/dialogs/AddTrackDialog.tsx

@@ -11,7 +11,7 @@ import {
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 import type { FileLocation } from '@jbrowse/core/util/types'
 
 const AddTrackDialog = observer(function ({

package/src/components/dialogs/DomainDialog.tsx

@@ -3,11 +3,11 @@ import React, { useState } from 'react'
 import { Dialog } from '@jbrowse/core/ui'
 import { Tab, Tabs } from '@mui/material'
 
-import InterProScanPanel from './InterProScanDialog'
-import TabPanel from './TabPanel'
-import UserProvidedResultPanel from './UserProvidedDomainsDialog'
+import InterProScanPanel from './InterProScanDialog.tsx'
+import TabPanel from './TabPanel.tsx'
+import UserProvidedResultPanel from './UserProvidedDomainsDialog.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 export default function LaunchDomainViewDialog({
   handleClose,

package/src/components/dialogs/ExportSVGDialog.tsx

@@ -15,9 +15,9 @@ import {
   useTheme,
 } from '@mui/material'
 
-import Checkbox2 from '../Checkbox2'
+import Checkbox2 from '../Checkbox2.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 export default function ExportSVGDialog({
   model,

package/src/components/dialogs/FeatureDialog.tsx

@@ -4,9 +4,9 @@ import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { getPalette } from '../../ggplotPalettes'
+import { getPalette } from '../../ggplotPalettes.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const Toggles = observer(function ({ model }: { model: MsaViewModel }) {
   const { featureFilters } = model

package/src/components/dialogs/InterProScanDialog.tsx

@@ -5,9 +5,9 @@ import { getSession } from '@jbrowse/core/util'
 import { Button, DialogActions, DialogContent, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { launchInterProScan } from '../../launchInterProScan'
+import { launchInterProScan } from '../../launchInterProScan.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const InterProScanDialog = observer(function ({
   handleClose,

package/src/components/dialogs/MetadataDialog.tsx

@@ -6,9 +6,9 @@ import { Dialog } from '@jbrowse/core/ui'
 import { DialogContent } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import SequenceTextArea from '../SequenceTextArea'
+import SequenceTextArea from '../SequenceTextArea.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MetadataDialog = observer(function ({
   model,

package/src/components/dialogs/SettingsDialog.tsx

@@ -13,10 +13,10 @@ import {
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import colorSchemes from '../../colorSchemes'
-import Checkbox2 from '../Checkbox2'
+import colorSchemes from '../../colorSchemes.ts'
+import Checkbox2 from '../Checkbox2.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()(theme => ({
   field: {

package/src/components/dialogs/TrackInfoDialog.tsx

@@ -2,10 +2,11 @@ import React, { useState } from 'react'
 
 import { Dialog } from '@jbrowse/core/ui'
 import { Button, DialogActions, DialogContent } from '@mui/material'
-import copy from 'copy-to-clipboard'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
+import copy from '../../vendor/copyToClipboard.ts'
+
 const useStyles = makeStyles()(theme => ({
   textArea: {
     padding: theme.spacing(2),

package/src/components/dialogs/UserProvidedDomainsDialog.tsx

@@ -15,10 +15,10 @@ import {
 } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import { jsonfetch } from '../../fetchUtils'
+import { jsonfetch } from '../../fetchUtils.ts'
 
-import type { InterProScanResponse } from '../../launchInterProScan'
-import type { MsaViewModel } from '../../model'
+import type { InterProScanResponse } from '../../launchInterProScan.ts'
+import type { MsaViewModel } from '../../model.ts'
 
 const UserProvidedDomainsDialog = observer(function ({
   handleClose,

package/src/components/header/GappynessSlider.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { Slider, Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const GappynessSlider = observer(function GappynessSlider({
   model,

package/src/components/header/Header.tsx

@@ -5,19 +5,19 @@ import Help from '@mui/icons-material/Help'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import GappynessSlider from './GappynessSlider'
-import HeaderInfoArea from './HeaderInfoArea'
-import HeaderMenu from './HeaderMenu'
-import HeaderStatusArea from './HeaderStatusArea'
-import MultiAlignmentSelector from './MultiAlignmentSelector'
-import SettingsMenu from './SettingsMenu'
-import ZoomControls from './ZoomControls'
-import ZoomMenu from './ZoomMenu'
-import ZoomStar from './ZoomStar'
+import GappynessSlider from './GappynessSlider.tsx'
+import HeaderInfoArea from './HeaderInfoArea.tsx'
+import HeaderMenu from './HeaderMenu.tsx'
+import HeaderStatusArea from './HeaderStatusArea.tsx'
+import MultiAlignmentSelector from './MultiAlignmentSelector.tsx'
+import SettingsMenu from './SettingsMenu.tsx'
+import ZoomControls from './ZoomControls.tsx'
+import ZoomMenu from './ZoomMenu.tsx'
+import ZoomStar from './ZoomStar.tsx'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
-const AboutDialog = lazy(() => import('../dialogs/AboutDialog'))
+const AboutDialog = lazy(() => import('../dialogs/AboutDialog.tsx'))
 
 const Header = observer(function ({ model }: { model: MsaViewModel }) {
   const [ref, { height }] = useMeasure()

package/src/components/header/HeaderInfoArea.tsx

@@ -4,7 +4,7 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()({
   margin: {

package/src/components/header/HeaderMenu.tsx

@@ -12,17 +12,19 @@ import Sort from '@mui/icons-material/Sort'
 import Visibility from '@mui/icons-material/Visibility'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 // lazies
-const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog'))
-const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog'))
-const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog'))
-const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog'))
+const MetadataDialog = lazy(() => import('../dialogs/MetadataDialog.tsx'))
+const ExportSVGDialog = lazy(() => import('../dialogs/ExportSVGDialog.tsx'))
+const FeatureFilterDialog = lazy(() => import('../dialogs/FeatureDialog.tsx'))
+const SettingsDialog = lazy(() => import('../dialogs/SettingsDialog.tsx'))
 const UserProvidedDomainsDialog = lazy(
-  () => import('../dialogs/UserProvidedDomainsDialog'),
+  () => import('../dialogs/UserProvidedDomainsDialog.tsx'),
+)
+const InterProScanDialog = lazy(
+  () => import('../dialogs/InterProScanDialog.tsx'),
 )
-const InterProScanDialog = lazy(() => import('../dialogs/InterProScanDialog'))
 
 const HeaderMenu = observer(({ model }: { model: MsaViewModel }) => {
   const {

package/src/components/header/HeaderStatusArea.tsx

@@ -5,7 +5,7 @@ import { Typography } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()({
   margin: {

package/src/components/header/MultiAlignmentSelector.tsx

@@ -3,7 +3,7 @@ import React from 'react'
 import { MenuItem, TextField } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const MultiAlignmentSelector = observer(function ({
   model,

package/src/components/header/SettingsMenu.tsx

@@ -6,9 +6,9 @@ import Palette from '@mui/icons-material/Palette'
 import Settings from '@mui/icons-material/Settings'
 import { observer } from 'mobx-react'
 
-import colorSchemes from '../../colorSchemes'
+import colorSchemes from '../../colorSchemes.ts'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const SettingsMenu = observer(function ({ model }: { model: MsaViewModel }) {
   const {

package/src/components/header/ZoomControls.tsx

@@ -5,7 +5,7 @@ import ZoomOut from '@mui/icons-material/ZoomOut'
 import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const ZoomControls = observer(function ZoomControls({
   model,

package/src/components/header/ZoomMenu.tsx

@@ -5,7 +5,7 @@ import MoreVert from '@mui/icons-material/MoreVert'
 import RestartAlt from '@mui/icons-material/RestartAlt'
 import { observer } from 'mobx-react'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const ZoomMenu = observer(function ({ model }: { model: MsaViewModel }) {
   return (

package/src/components/header/ZoomStar.tsx

@@ -5,7 +5,7 @@ import { IconButton } from '@mui/material'
 import { observer } from 'mobx-react'
 import { makeStyles } from 'tss-react/mui'
 
-import type { MsaViewModel } from '../../model'
+import type { MsaViewModel } from '../../model.ts'
 
 const useStyles = makeStyles()(theme => ({
   dpad: {