diff --git a/.eslintignore b/.eslintignore
index 71f4f8a..7eee4d9 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,3 +1,4 @@
 dist
 json/disks/index.js
 node_modules
+tmp
diff --git a/.eslintrc.json b/.eslintrc.json
index f615dee..dca0508 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,6 +1,11 @@
 {
+    // Global
+    "root": true,
     "parser": "@typescript-eslint/parser",
-    "plugins": ["@typescript-eslint/eslint-plugin"],
+    "extends": [
+        "eslint:recommended",
+        "plugin:jest/recommended"
+    ],
     "rules": {
         "indent": [
             "error",
@@ -17,32 +22,15 @@
             "error",
             "unix"
         ],
+        "eqeqeq": [
+            "error",
+            "smart"
+        ],
         "prefer-const": [
             "error"
         ],
-        "semi": [
-            "error",
-            "always"
-        ],
+        "no-var": "error",
         "no-use-before-define": "off",
-        "@typescript-eslint/no-floating-promises": "error",
-        "@typescript-eslint/no-use-before-define": [
-            "error",
-            {
-                "functions": false,
-                "classes": false
-            }
-        ],
-        "no-unused-vars": "off",
-        "@typescript-eslint/no-unused-vars": [
-          "error",
-          {
-              "argsIgnorePattern": "^_"
-          }
-        ],
-        "no-redeclare": "off",
-        "@typescript-eslint/no-redeclare": ["error"],
-        "no-dupe-class-members": "off",
         "no-console": [
             "error",
             {
@@ -52,6 +40,17 @@
                     "error"
                 ]
             }
+        ],
+        // Jest configuration
+        "jest/expect-expect": [
+            "error",
+            {
+                "assertFunctionNames": [
+                    "expect*",
+                    "checkImageData",
+                    "testCode"
+                ]
+            }
         ]
     },
     "env": {
@@ -59,20 +58,101 @@
         "browser": true,
         "es6": true
     },
-    "parserOptions": {
-        "sourceType": "module",
-        "project": "./tsconfig.json"
-    },
-    "extends": "eslint:recommended",
     "overrides": [
+        // All overrides matching a file are applied in-order, with the last
+        // taking precedence.
+        //
+        // TypeScript/TSX-specific configuration
         {
             "files": [
-                "**/*.ts"
+                "*.ts",
+                "*.tsx"
+            ],
+            "plugins": [
+                "@typescript-eslint/eslint-plugin"
+            ],
+            "extends": [
+                "plugin:react/recommended",
+                "plugin:react-hooks/recommended",
+                "plugin:@typescript-eslint/recommended",
+                "plugin:@typescript-eslint/recommended-requiring-type-checking"
             ],
             "rules": {
-                "no-var": "error"
+                // recommended is just "warn"
+                "@typescript-eslint/no-explicit-any": "error",
+                // enforce semicolons at ends of statements
+                "semi": "off",
+                "@typescript-eslint/semi": [
+                    "error",
+                    "always"
+                ],
+                // enforce semicolons to separate members
+                "@typescript-eslint/member-delimiter-style": [
+                    "error",
+                    {
+                        "multiline": {
+                            "delimiter": "semi",
+                            "requireLast": true
+                        },
+                        "singleline": {
+                            "delimiter": "semi",
+                            "requireLast": false
+                        }
+                    }
+                ],
+                // definitions must come before uses for variables
+                "@typescript-eslint/no-use-before-define": [
+                    "error",
+                    {
+                        "functions": false,
+                        "classes": false
+                    }
+                ],
+                // no used variables
+                "no-unused-vars": "off",
+                "@typescript-eslint/no-unused-vars": [
+                    "error",
+                    {
+                        "argsIgnorePattern": "^_"
+                    }
+                ],
+                // no redeclaration of classes, members or variables
+                "no-redeclare": "off",
+                "@typescript-eslint/no-redeclare": [
+                    "error"
+                ],
+                // allow empty interface definitions and empty extends
+                "@typescript-eslint/no-empty-interface": "off",
+                // allow explicit type declaration
+                "@typescript-eslint/no-inferrable-types": "off",
+                // allow some non-string types in templates
+                "@typescript-eslint/restrict-template-expressions": [
+                    "error",
+                    {
+                        "allowNumber": true,
+                        "allowBoolean": true
+                    }
+                ],
+                // react rules
+                "react-hooks/rules-of-hooks": "error",
+                "react-hooks/exhaustive-deps": "error"
+            },
+            "parserOptions": {
+                "sourceType": "module",
+                "project": "./tsconfig.json"
             }
         },
+        // UI elements
+        {
+            "files": [
+                "js/ui/**.ts"
+            ],
+            "rules": {
+                // allow non-null assertions since these classes reference the DOM
+                "@typescript-eslint/no-non-null-assertion": "off"
+            }
+        },
+        // JS Node configuration
         {
             "files": [
                 "bin/*",
@@ -88,6 +168,7 @@
                 "browser": false
             }
         },
+        // Test configuration
         {
             "files": [
                 "test/**/*"
@@ -101,16 +182,18 @@
                 "no-console": 0
             }
         },
+        // Entry point configuration
         {
             "files": [
-                "js/entry2.js",
-                "js/entry2e.js",
+                "js/entry2.ts",
+                "js/entry2e.ts",
                 "jest.config.js"
             ],
             "env": {
                 "commonjs": true
             }
         },
+        // Worker configuration
         {
             "files": [
                 "workers/*"
@@ -120,5 +203,13 @@
             }
         }
     ],
-    "ignorePatterns": ["coverage/**/*"]
+    "ignorePatterns": [
+        "coverage/**/*"
+    ],
+    "settings": {
+        "react": {
+            "pragma": "h",
+            "version": "16"
+        }
+    }
 }
diff --git a/.github/workflows/nodejs.yml b/.github/workflows/nodejs.yml
index 7cc77c0..755a8d0 100644
--- a/.github/workflows/nodejs.yml
+++ b/.github/workflows/nodejs.yml
@@ -9,7 +9,7 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [14.x]
 
     steps:
     - uses: actions/checkout@v2
diff --git a/.stylelintignore b/.stylelintignore
new file mode 100644
index 0000000..1c4b846
--- /dev/null
+++ b/.stylelintignore
@@ -0,0 +1,2 @@
+css/apple2.css
+coverage
diff --git a/.stylelintrc.json b/.stylelintrc.json
new file mode 100644
index 0000000..a3c7063
--- /dev/null
+++ b/.stylelintrc.json
@@ -0,0 +1,10 @@
+{
+  "extends": [
+    "stylelint-config-standard",
+    "stylelint-config-css-modules"
+  ],
+  "rules": {
+    "indentation": 4,
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9_-]+$"
+  }
+}
diff --git a/LICENSE b/LICENSE
index 7a90e4c..b66f6b5 100644
--- a/LICENSE
+++ b/LICENSE
@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013-2019 Will Scullin
+Copyright (c) 2010-2021 Will Scullin and contributors
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in
diff --git a/apple2js.html b/apple2js.html
index eef9fbf..c82318a 100644
--- a/apple2js.html
+++ b/apple2js.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
- Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
+ Copyright 2010-2021 Will Scullin and contributors
 
  Permission to use, copy, modify, distribute, and sell this software and its
  documentation for any purpose is hereby granted without fee, provided that
@@ -46,7 +46,7 @@
     </div>
     <div id="display">
       <div class="overscan">
-        <canvas id="screen" width="592" height="416"></canvas>
+        <canvas id="screen" width="592" height="416" tabindex="-1"></canvas>
       </div>
     </div>
     <div class="inset">
@@ -96,7 +96,7 @@
       <button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
         <i class="fas fa-info"></i>
       </button>
-      <button onclick="Apple2.openOptions()" title="Options">
+      <button onclick="Apple2.openOptions()" title="Options (F4)">
         <i class="fas fa-cog"></i>
       </button>
     </div>
@@ -265,7 +265,7 @@
           </button>
         </header>
         <main class="modal__content" id="printer-modal-content">
-          <div class="paper"></div>
+          <div class="paper" tabindex="-1"></div>
         </main>
         <footer class="modal__footer">
           <a id="raw_printer_output" class="button">Download Raw Output</a>
diff --git a/apple2jse.html b/apple2jse.html
index 0cef29e..3e152a0 100644
--- a/apple2jse.html
+++ b/apple2jse.html
@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <!--
- Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
+ Copyright 2010-2021 Will Scullin and contributors
 
  Permission to use, copy, modify, distribute, and sell this software and its
  documentation for any purpose is hereby granted without fee, provided that
@@ -46,7 +46,7 @@
     </div>
     <div id="display">
       <div class="overscan">
-        <canvas id="screen" width="592" height="416"></canvas>
+        <canvas id="screen" width="592" height="416" tabindex="-1"></canvas>
       </div>
     </div>
     <div class="inset">
@@ -97,7 +97,7 @@
         <button onclick="window.open('https://github.com/whscullin/apple2js#readme', 'blank')" title="About">
           <i class="fas fa-info"></i>
         </button>
-        <button onclick="Apple2.openOptions()" title="Options">
+        <button onclick="Apple2.openOptions()" title="Options (F4)">
           <i class="fas fa-cog"></i>
         </button>
       </div>
@@ -270,7 +270,7 @@
           </button>
         </header>
         <main class="modal__content" id="printer-modal-content">
-          <div class="paper"></div>
+          <div class="paper" tabindex="-1"></div>
         </main>
         <footer class="modal__footer">
           <a id="raw_printer_output" class="button">Download Raw Output</a>
diff --git a/asm/mouse.s b/asm/mouse.s
new file mode 100644
index 0000000..75199b7
--- /dev/null
+++ b/asm/mouse.s
@@ -0,0 +1,88 @@
+;
+; Minimal mouse support. Only firmware routines are supported, no
+; I/O hooks or softswitches. This is enough to work with titles
+; that follow the documentation's recommendations to use the
+; firmware routines like Dazzle Draw and Apple II DeskTop
+;
+		ORG	$C700
+
+; Constants for future reference
+
+CLAMP_X_LOW	EQU	$478
+CLAMP_Y_LOW	EQU	$4F8
+CLAMP_X_HIGH	EQU	$578
+CLAMP_Y_HIGH	EQU	$5F8
+
+X_LOW		EQU	$478
+Y_LOW		EQU	$4F8
+X_HIGH		EQU	$578
+Y_HIGH		EQU	$5F8
+RESERVED1	EQU	$678
+RESERVED2	EQU	$67F
+STATUS		EQU	$778
+MODE		EQU	$7F8
+
+STATUS_DOWN	EQU	$80
+STATUS_LAST	EQU	$40
+INT_SCREEN	EQU	$08
+INT_BUTTON	EQU	$04
+INT_MOUSE	EQU	$02
+
+ROMRTS		EQU 	$FF58
+
+		DFB	$00		; $00
+		DFB	$00		; $01
+		DFB	$00		; $02
+		DFB	$00		; $03
+		DFB	$00		; $04
+; Cx05 - Pascal ID byte
+		DFB	$38		; $05
+		DFB	$00		; $06
+; Cx07 - Pascal ID byte
+		DFB	$18		; $07
+		DFB	$00		; $08
+		DFB	$00		; $09
+		DFB	$00		; $0A
+; Cx0B - Generic signature byte of firmware cards
+		DFB	$01		; $0B
+; Cx0C - 2 = X-Y pointing device; 0 = identification code
+ID1		DFB	$20		; $0C
+		DFB	$00		; $0D
+		DFB	$00		; $0E
+		DFB	$00		; $0F
+		DFB	$00		; $10
+		DFB	$00		; $11
+; The firmware routines point to individual RTS opcodes
+; that are intercepted by the card implementation which
+; manipulates memory and processor state directly
+		DFB	$20		; $12 SETMOUSE
+		DFB	$21		; $13 SERVEMOUSE
+		DFB	$22		; $14 READMOUSE
+		DFB	$23		; $15 CLEARMOUSE
+		DFB	$24		; $16 POSMOUSE
+		DFB	$25		; $17 CLAMPMOUSE
+		DFB	$26		; $18 HOMEMOUSE
+		DFB	$27		; $19 INITMOUSE
+		DFB	$00		; $1A
+		DFB	$00		; $1B
+		DFB	$00		; $1C
+		DFB	$00		; $1D
+		DFB	$00		; $1E
+		DFB	$00		; $1F
+		RTS			; $20 SETMOUSE
+		RTS			; $21 SERVEMOUSE
+		RTS			; $22 READMOUSE
+		RTS			; $23 CLEARMOUSE
+		RTS			; $24 POSMOUSE
+		RTS			; $25 CLAMPMOUSE
+		RTS			; $26 HOMEMOUSE
+		RTS			; $27 INITMOUSE
+PADDING		DS	$C7FB - PADDING
+		ORG	$C7FB
+; CxFB - A mouse identification byte
+ID2		DFB	$D6		; $FB
+	        DFB     $00		; $FC
+		DFB	$00		; $FD
+		DFB	$00		; $FE
+		DFB	$00		; $FF
+		END
diff --git a/babel.config.js b/babel.config.js
index 442aa3c..69cbd06 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -9,5 +9,19 @@ module.exports = {
                 },
             },
         ],
+        [
+            '@babel/typescript',
+            {
+                jsxPragma: 'h'
+            }
+        ],
     ],
+    plugins: [
+        [
+            '@babel/plugin-transform-react-jsx', {
+                pragma: 'h',
+                pragmaFrag: 'Fragment',
+            }
+        ]
+    ]
 };
diff --git a/bin/index b/bin/index
index 13e1fdc..2b4c3f0 100755
--- a/bin/index
+++ b/bin/index
@@ -14,6 +14,7 @@ for (const fileName of dir.sort()) {
         const json = fs.readFileSync(path.resolve(diskPath, fileName));
         const data = JSON.parse(json);
         if (data.private) { continue; }
+        if (!data.name || !data.category) { continue; }
 
         const entry = {
             filename: `json/disks/${fileName}`,
@@ -26,7 +27,7 @@ for (const fileName of dir.sort()) {
     }
 }
 
-index.sort((x,y) => {
+index.sort((x, y) => {
     const xc = x.category.toLowerCase();
     const yc = y.category.toLowerCase();
     const xn = x.name.toLowerCase();
@@ -49,3 +50,8 @@ fs.writeFileSync(
     path.resolve(diskPath, 'index.js'),
     `disk_index = ${JSON.stringify(index, null, 2)};`
 );
+
+fs.writeFileSync(
+    path.resolve(diskPath, 'index.json'),
+    JSON.stringify(index, null, 2)
+);
diff --git a/css/apple2.css b/css/apple2.css
index 2936444..ff90928 100644
--- a/css/apple2.css
+++ b/css/apple2.css
@@ -1,5 +1,3 @@
-/* Copyright 2010-2019 Will Scullin */
-
 #header {
   width: 580px;
   margin: auto;
@@ -11,6 +9,7 @@ img {
 
 #badge {
     cursor: pointer;
+    user-select: none;
 }
 
 #subtitle {
@@ -20,6 +19,7 @@ img {
     font-family: "Adobe Garamond Pro",Garamond,Times;
     font-size: 13px;
     font-weight: normal;
+    user-select: none;
 }
 
 .motter {
@@ -124,6 +124,10 @@ body {
     height: 16px;
 }
 
+.disk-light.on {
+    background-image: url(red-on-16.png);
+}
+
 .disk-label {
     color: #000;
     font-family: sans-serif;
@@ -133,6 +137,7 @@ body {
     overflow: hidden;
     white-space: nowrap;
     flex-grow: 1;
+    user-select: none;
 }
 
 .code {
@@ -162,9 +167,6 @@ th {
 
 .inset button {
     min-width: 36px;
-}
-
-.inset button {
     margin: 0 2px;
 }
 
@@ -181,11 +183,13 @@ th {
     color: #0f0;
     border: 2px inset #888;
     border-radius: 4px;
+    user-select: none;
 }
 
 canvas {
   display: block;
   float: left;
+  image-rendering: pixelated;
 }
 
 .mono {
@@ -194,7 +198,8 @@ canvas {
 
 .scanlines:after {
     display: block;
-    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, #000 1px, #000 2px);
+    pointer-events: none;
+    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 1px, rgba(0,0,0,0.5) 1px, rgba(0,0,0,0.5) 2px);
     content: '';
     position: absolute;
     top: 0;
@@ -203,6 +208,10 @@ canvas {
     right: 0;
 }
 
+.full-page .scanlines:after {
+    background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 0.25vh, rgba(0,0,0,0.5) 0.25vh, rgba(0,0,0,0.5) 0.5vh);
+}
+
 #screen {
     cursor: crosshair;
     -moz-image-rendering: -moz-crisp-edges;
@@ -210,14 +219,20 @@ canvas {
     image-rendering: optimizeSpeed;
     width: 592px;
     height: 416px;
+    touch-action: manipulation;
+    user-select: none;
+}
+
+#screen.mouseMode {
+    cursor: none;
 }
 
 #screen:-webkit-full-screen {
     background-color: black;
     top: 0;
     left: 0;
-    width: 100%;
-    height: 100%;
+    width: 100vw;
+    height: 100vh;
 }
 
 #about {
@@ -297,6 +312,7 @@ canvas {
     padding: 5px 11px;
     border: 1px outset #66594E;
     border-radius: 3px;
+    user-select: none;
 }
 
 .modal__title {
@@ -327,28 +343,34 @@ canvas {
 
 .modal__footer {
     text-align: right;
+    user-select: none;
 }
 
-button {
+button,
+a.button {
     background: #44372C;
     color: #fff;
     padding: 2px 8px;
     border: 1px outset #66594E;
     border-radius: 3px;
     font-size: 15px;
+    text-decoration: none;
 }
 
-button:hover {
+button:hover,
+a.button:hover {
     background-color: #55473D;
     border: 1px outset #66594E;
 }
 
-button:active {
+button:active,
+a.button:active {
     background-color: #22150A;
     border: 1px outset #44372C;
 }
 
-button:focus {
+button:focus,
+a.button:hover {
     outline: none;
 }
 
@@ -576,6 +598,7 @@ button:focus {
 
 #reset-row .inset {
     margin: 0;
+    width: 604px;
 }
 
 #reset {
@@ -592,6 +615,9 @@ button:focus {
     padding: 0;
     margin-left: 10px;
     width: 42px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 }
 
 #reset:hover {
@@ -600,8 +626,11 @@ button:focus {
 }
 
 #reset:active {
-  background: #22150A;
-  border: 5px outset #44372C;
+    background-color: #22150A;
+    border-left: 3px solid #44372C;
+    border-top: 3px solid #44372C;
+    border-right: 3px solid #000000;
+    border-bottom: 3px solid #000000;
 }
 
 #keyboard .key-OPEN_APPLE.active div {
@@ -643,7 +672,6 @@ button:focus {
 
 #options-modal {
     width: 300px;
-    line-height: 1.75em;
 }
 
 #options-modal h3 {
diff --git a/css/green-off-16.png b/css/green-off-16.png
new file mode 100644
index 0000000..a237a20
Binary files /dev/null and b/css/green-off-16.png differ
diff --git a/css/green-off-32.png b/css/green-off-32.png
new file mode 100644
index 0000000..2be3a66
Binary files /dev/null and b/css/green-off-32.png differ
diff --git a/css/green-on-16.png b/css/green-on-16.png
new file mode 100644
index 0000000..3f196b3
Binary files /dev/null and b/css/green-on-16.png differ
diff --git a/css/green-on-32.png b/css/green-on-32.png
new file mode 100644
index 0000000..3ead6ca
Binary files /dev/null and b/css/green-on-32.png differ
diff --git a/css/red-off-16.png b/css/red-off-16.png
old mode 100755
new mode 100644
diff --git a/css/red-off-32.png b/css/red-off-32.png
new file mode 100644
index 0000000..861d3b9
Binary files /dev/null and b/css/red-off-32.png differ
diff --git a/css/red-on-16.png b/css/red-on-16.png
old mode 100755
new mode 100644
diff --git a/css/red-on-32.png b/css/red-on-32.png
new file mode 100644
index 0000000..c2798d7
Binary files /dev/null and b/css/red-on-32.png differ
diff --git a/index.html b/index.html
new file mode 100644
index 0000000..241933b
--- /dev/null
+++ b/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+
+<head>
+  <title>PreApple II</title>
+  <meta name="viewport" content="width=640, user-scalable=no" />
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta charset="utf-8" />
+
+  <link rel="apple-touch-icon" href="img/webapp-iphone.png" />
+  <link rel="apple-touch-icon" size="72x72" href="img/webapp-ipad.png" />
+  <link rel="shortcut icon" href="img/logoicon.png" />
+  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v6.1.1/css/all.css" />
+</head>
+
+<body>
+  <div id="app"></div>
+  <svg width="0" height="0" xmlns="http://www.w3.org/2000/svg">
+    <filter id="green">
+      <feColorMatrix type="matrix" values="0.0 0.0 0.0 0.0 0
+                    0.0 1.0 0.0 0.0 0
+                    0.0 0.0 0.5 0.0 0
+                    0.0 0.0 0.0 1.0 0" />
+    </filter>
+  </svg>
+  <script src="dist/preact.bundle.js"></script>
+</body>
diff --git a/jest.config.js b/jest.config.js
index 7df423e..700cc1b 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,21 +2,22 @@ module.exports = {
     'moduleNameMapper': {
         '^js/(.*)': '<rootDir>/js/$1',
         '^test/(.*)': '<rootDir>/test/$1',
+        '\\.css$': 'identity-obj-proxy',
     },
     'roots': [
         'js/',
         'test/',
     ],
     'testMatch': [
-        '**/?(*.)+(spec|test).+(ts|js)'
+        '**/?(*.)+(spec|test).+(ts|js|tsx)'
     ],
-
     'transform': {
         '^.+\\.js$': 'babel-jest',
-        '^.+\\.ts$': 'ts-jest'
+        '^.+\\.ts$': 'ts-jest',
+        '^.*\\.tsx$': 'ts-jest',
     },
     'setupFilesAfterEnv': [
-        '<rootDir>/test/jest-setup.js'
+        '<rootDir>/test/jest-setup.ts'
     ],
     'coveragePathIgnorePatterns': [
         '/node_modules/',
diff --git a/js/apple2.ts b/js/apple2.ts
index 98eaf00..6da9c44 100644
--- a/js/apple2.ts
+++ b/js/apple2.ts
@@ -17,43 +17,48 @@ import {
 } from './gl';
 import ROM from './roms/rom';
 import { Apple2IOState } from './apple2io';
-import CPU6502, { CpuState } from './cpu6502';
+import CPU6502, {
+    CpuState,
+    FLAVOR_6502,
+    FLAVOR_ROCKWELL_65C02,
+} from './cpu6502';
 import MMU, { MMUState } from './mmu';
 import RAM, { RAMState } from './ram';
 
 import SYMBOLS from './symbols';
 import Debugger, { DebuggerContainer } from './debugger';
 
-import { Restorable, rom } from './types';
+import { ReadonlyUint8Array, Restorable, rom } from './types';
 import { processGamepad } from './ui/gamepad';
 
 export interface Apple2Options {
     characterRom: string;
-    enhanced: boolean,
-    e: boolean,
-    gl: boolean,
-    rom: string,
-    canvas: HTMLCanvasElement,
-    tick: () => void,
+    enhanced: boolean;
+    e: boolean;
+    gl: boolean;
+    rom: string;
+    canvas: HTMLCanvasElement;
+    tick: () => void;
 }
 
 export interface Stats {
-    frames: number,
-    renderedFrames: number,
+    cycles: number;
+    frames: number;
+    renderedFrames: number;
 }
 
-interface State {
-    cpu: CpuState,
-    vm: VideoModesState,
-    io: Apple2IOState,
-    mmu?: MMUState,
-    ram?: RAMState[],
+export interface State {
+    cpu: CpuState;
+    vm: VideoModesState;
+    io: Apple2IOState;
+    mmu: MMUState | undefined;
+    ram: RAMState[] | undefined;
 }
 
 export class Apple2 implements Restorable<State>, DebuggerContainer {
     private paused = false;
 
-    private theDebugger?: Debugger;
+    private theDebugger: Debugger | undefined;
 
     private runTimer: number | null = null;
     private runAnimationFrame: number | null = null;
@@ -74,25 +79,28 @@ export class Apple2 implements Restorable<State>, DebuggerContainer {
     private tick: () => void;
 
     private stats: Stats = {
+        cycles: 0,
         frames: 0,
         renderedFrames: 0
     };
 
-    public ready: Promise<void>
+    public ready: Promise<void>;
 
     constructor(options: Apple2Options) {
         this.ready = this.init(options);
     }
 
     async init(options: Apple2Options) {
-        const romImportPromise = import(`./roms/system/${options.rom}`);
-        const characterRomImportPromise = import(`./roms/character/${options.characterRom}`);
+        const romImportPromise = import(`./roms/system/${options.rom}`) as Promise<{ default: new () => ROM }>;
+        const characterRomImportPromise = import(`./roms/character/${options.characterRom}`) as Promise<{ default: ReadonlyUint8Array }>;
 
         const LoresPage = options.gl ? LoresPageGL : LoresPage2D;
         const HiresPage = options.gl ? HiresPageGL : HiresPage2D;
         const VideoModes = options.gl ? VideoModesGL : VideoModes2D;
 
-        this.cpu = new CPU6502({ '65C02': options.enhanced });
+        this.cpu = new CPU6502({
+            flavor: options.enhanced ? FLAVOR_ROCKWELL_65C02 : FLAVOR_6502
+        });
         this.vm = new VideoModes(options.canvas, options.e);
 
         const [{ default: Apple2ROM }, { default: characterRom }] = await Promise.all([
@@ -144,7 +152,7 @@ export class Apple2 implements Restorable<State>, DebuggerContainer {
             return; // already running
         }
 
-        this.theDebugger = new Debugger(this);
+        this.theDebugger = new Debugger(this.cpu, this);
         this.theDebugger.addSymbols(SYMBOLS);
 
         const interval = 30;
@@ -180,6 +188,7 @@ export class Apple2 implements Restorable<State>, DebuggerContainer {
                     this.stats.renderedFrames++;
                 }
             }
+            this.stats.cycles = this.cpu.getCycles();
             this.stats.frames++;
             this.io.tick();
             this.tick();
@@ -208,6 +217,10 @@ export class Apple2 implements Restorable<State>, DebuggerContainer {
         this.runAnimationFrame = null;
     }
 
+    isRunning() {
+        return !this.paused;
+    }
+
     getState(): State {
         const state: State = {
             cpu: this.cpu.getState(),
diff --git a/js/apple2io.ts b/js/apple2io.ts
index aaec8fb..316411c 100644
--- a/js/apple2io.ts
+++ b/js/apple2io.ts
@@ -1,34 +1,18 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import CPU6502 from './cpu6502';
 import { Card, Memory, MemoryPages, TapeData, byte, Restorable } from './types';
 import { debug, garbage } from './util';
 import { VideoModes } from './videomodes';
 
-type slot = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
-type button = 0 | 1 | 2;
-type paddle = 0 | 1 | 2 | 3;
-type annunciator = 0 | 1 | 2 | 3;
+export type slot = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
+export type button = 0 | 1 | 2;
+export type paddle = 0 | 1 | 2 | 3;
+export type annunciator = 0 | 1 | 2 | 3;
 
-interface Annunciators {
-    0: boolean,
-    1: boolean,
-    2: boolean,
-    3: boolean,
-}
+type Annunciators = Record<annunciator, boolean>;
 
 export interface Apple2IOState {
     annunciators: Annunciators;
-    cards: Array<any | null>
+    cards: Array<unknown | null>;
 }
 
 export type SampleListener = (sample: number[]) => void;
@@ -68,7 +52,7 @@ const LOC = {
 };
 
 export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState> {
-    private _slot: Array<Card | null> = new Array(7).fill(null);
+    private _slot: Array<Card | null> = new Array<Card | null>(7).fill(null);
     private _auxRom: Memory | null = null;
 
     private _khz = 1023;
@@ -97,7 +81,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
     private _annunciators: Annunciators = [false, false, false, false];
 
     private _tape: TapeData = [];
-    private _tapeOffset = 0;
+    private _tapeOffset: number = 0;
     private _tapeNext: number = 0;
     private _tapeCurrent = false;
 
@@ -109,7 +93,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
         this._calcSampleRate();
     }
 
-    _debug(..._args: any[]) {
+    _debug(..._args: unknown[]) {
         // debug.apply(this, arguments);
     }
 
@@ -122,7 +106,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
                 if (this._audioListener) {
                     this._audioListener(this._sample);
                 }
-                this._sample = new Array(this._sample_size);
+                this._sample = new Array<number>(this._sample_size);
                 this._sampleIdx = 0;
             }
         }
@@ -233,7 +217,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
                 }
                 break;
             case LOC.TAPEIN:
-                if (this._tapeOffset == -1) {
+                if (this._tapeOffset === -1) {
                     this._tapeOffset = 0;
                     this._tapeNext = now;
                 }
@@ -242,7 +226,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
                     this._tapeCurrent = this._tape[this._tapeOffset][1];
                     while (now >= this._tapeNext) {
                         if ((this._tapeOffset % 1000) === 0) {
-                            debug('Read ' + (this._tapeOffset / 1000));
+                            debug(`Read ${this._tapeOffset / 1000}`);
                         }
                         this._tapeCurrent = this._tape[this._tapeOffset][1];
                         this._tapeNext += this._tape[this._tapeOffset++][0];
@@ -264,7 +248,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
                         }
                         if (this._buffer.length > 0) {
                             let val = this._buffer.shift() as string;
-                            if (val == '\n') {
+                            if (val === '\n') {
                                 val = '\r';
                             }
                             this._key = val.charCodeAt(0) | 0x80;
@@ -359,7 +343,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
             case 0xc7:
                 slot = page & 0x0f;
                 card = this._slot[slot];
-                if (this._auxRom != card) {
+                if (this._auxRom !== card) {
                 // _debug('Setting auxRom to slot', slot);
                     this._auxRom = card;
                 }
@@ -395,7 +379,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
             case 0xc7:
                 slot = page & 0x0f;
                 card = this._slot[slot];
-                if (this._auxRom != card) {
+                if (this._auxRom !== card) {
                 // _debug('Setting auxRom to slot', slot);
                     this._auxRom = card;
                 }
@@ -428,6 +412,10 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
         this._slot[slot] = card;
     }
 
+    getSlot(slot: slot): Card | null {
+        return this._slot[slot];
+    }
+
     keyDown(ascii: byte) {
         this._keyDown = true;
         this._key = ascii | 0x80;
@@ -437,8 +425,8 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
         this._keyDown = false;
     }
 
-    buttonDown(b: button) {
-        this._button[b] = true;
+    buttonDown(b: button, state = true) {
+        this._button[b] = state;
     }
 
     buttonUp(b: button) {
@@ -467,7 +455,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
     }
 
     setTape(tape: TapeData) {
-        debug('Tape length: ' + tape.length);
+        debug(`Tape length: ${tape.length}`);
         this._tape = tape;
         this._tapeOffset = -1;
     }
@@ -475,7 +463,7 @@ export default class Apple2IO implements MemoryPages, Restorable<Apple2IOState>
     sampleRate(rate: number, sample_size: number) {
         this._rate = rate;
         this._sample_size = sample_size;
-        this._sample = new Array(this._sample_size);
+        this._sample = new Array<number>(this._sample_size);
         this._sampleIdx = 0;
         this._calcSampleRate();
     }
diff --git a/js/applesoft/compiler.ts b/js/applesoft/compiler.ts
index 5ffba6c..6b7917c 100644
--- a/js/applesoft/compiler.ts
+++ b/js/applesoft/compiler.ts
@@ -1,288 +1,319 @@
-import { byte, KnownKeys, KnownValues, Memory, word } from '../types';
+import { byte, KnownValues, Memory, word } from '../types';
+import { STRING_TO_TOKEN } from './tokens';
+import { TXTTAB, PRGEND, VARTAB, ARYTAB, STREND } from './zeropage';
 
-/** Map from keyword to token. */
-const TOKENS = {
-    'END': 0x80,
-    'FOR': 0x81,
-    'NEXT': 0x82,
-    'DATA': 0x83,
-    'INPUT': 0x84,
-    'DEL': 0x85,
-    'DIM': 0x86,
-    'READ': 0x87,
-    'GR': 0x88,
-    'TEXT': 0x89,
-    'PR#': 0x8a,
-    'IN#': 0x8b,
-    'CALL': 0x8c,
-    'PLOT': 0x8d,
-    'HLIN': 0x8e,
-    'VLIN': 0x8f,
-    'HGR2': 0x90,
-    'HGR': 0x91,
-    'HCOLOR=': 0x92,
-    'HPLOT': 0x93,
-    'DRAW': 0x94,
-    'XDRAW': 0x95,
-    'HTAB': 0x96,
-    'HOME': 0x97,
-    'ROT=': 0x98,
-    'SCALE=': 0x99,
-    'SHLOAD': 0x9a,
-    'TRACE': 0x9b,
-    'NOTRACE': 0x9c,
-    'NORMAL': 0x9d,
-    'INVERSE': 0x9e,
-    'FLASH': 0x9f,
-    'COLOR=': 0xa0,
-    'POP=': 0xa1,
-    'VTAB': 0xa2,
-    'HIMEM:': 0xa3,
-    'LOMEM:': 0xa4,
-    'ONERR': 0xa5,
-    'RESUME': 0xa6,
-    'RECALL': 0xa7,
-    'STORE': 0xa8,
-    'SPEED=': 0xa9,
-    'LET': 0xaa,
-    'GOTO': 0xab,
-    'RUN': 0xac,
-    'IF': 0xad,
-    'RESTORE': 0xae,
-    '&': 0xaf,
-    'GOSUB': 0xb0,
-    'RETURN': 0xb1,
-    'REM': 0xb2,
-    'STOP': 0xb3,
-    'ON': 0xb4,
-    'WAIT': 0xb5,
-    'LOAD': 0xb6,
-    'SAVE': 0xb7,
-    'DEF': 0xb8,
-    'POKE': 0xb9,
-    'PRINT': 0xba,
-    'CONT': 0xbb,
-    'LIST': 0xbc,
-    'CLEAR': 0xbd,
-    'GET': 0xbe,
-    'NEW': 0xbf,
-    'TAB(': 0xc0,
-    'TO': 0xc1,
-    'FN': 0xc2,
-    'SPC(': 0xc3,
-    'THEN': 0xc4,
-    'AT': 0xc5,
-    'NOT': 0xc6,
-    'STEP': 0xc7,
-    '+': 0xc8,
-    '-': 0xc9,
-    '*': 0xca,
-    '/': 0xcb,
-    '^': 0xcc,
-    'AND': 0xcd,
-    'OR': 0xce,
-    '>': 0xcf,
-    '=': 0xd0,
-    '<': 0xd1,
-    'SGN': 0xd2,
-    'INT': 0xd3,
-    'ABS': 0xd4,
-    'USR': 0xd5,
-    'FRE': 0xd6,
-    'SCRN(': 0xd7,
-    'PDL': 0xd8,
-    'POS': 0xd9,
-    'SQR': 0xda,
-    'RND': 0xdb,
-    'LOG': 0xdc,
-    'EXP': 0xdd,
-    'COS': 0xde,
-    'SIN': 0xdf,
-    'TAN': 0xe0,
-    'ATN': 0xe1,
-    'PEEK': 0xe2,
-    'LEN': 0xe3,
-    'STR$': 0xe4,
-    'VAL': 0xe5,
-    'ASC': 0xe6,
-    'CHR$': 0xe7,
-    'LEFT$': 0xe8,
-    'RIGHT$': 0xe9,
-    'MID$': 0xea
-} as const;
-
-const LOMEM = 0x69;
-const ARRAY_START = 0x6B;
-const ARRAY_END = 0x6D;
+/** Default address for program start */
 const PROGRAM_START = 0x801;
 
-const STATES = {
-    NORMAL: 0,
-    STRING: 1,
-    COMMENT: 2,
-    DATA: 3
-} as const;
+/** Parse states. Starts in `NORMAL`. */
+enum STATES {
+    /**
+     * Tries to tokenize the input. Transitions:
+     *   * `"`: `STRING`
+     *   * `REM`: `COMMENT`
+     *   * `DATA`: `DATA`
+     */
+    NORMAL = 0,
+    /**
+     * Stores the input exactly. Tranistions:
+     *   * `"`: `NORMAL`
+     */
+    STRING = 1,
+    /** Stores the input exactly up until the end of the line. No transitions. */
+    COMMENT = 2,
+    /**
+     * Stores the input exactly. Transitions:
+     *   * `:`: `NORMAL`
+     *   * `"`: `DATA_QUOTE`
+     */
+    DATA = 3,
+    /**
+     * Stores the input exactly. Transitions:
+     *   * `"`: `DATA`
+     */
+    DATA_QUOTE = 4,
+}
 
-export default class ApplesoftCompiler {
-    constructor(private mem: Memory) { }
+function writeByte(mem: Memory, addr: word, val: byte) {
+    const page = addr >> 8;
+    const off = addr & 0xff;
 
-    private writeByte(addr: word, val: byte) {
-        const page = addr >> 8;
-        const off = addr & 0xff;
+    return mem.write(page, off, val);
+}
 
-        return this.mem.write(page, off, val);
+function writeWord(mem: Memory, addr: word, val: byte) {
+    const lsb = val & 0xff;
+    const msb = val >> 8;
+
+    writeByte(mem, addr, lsb);
+    writeByte(mem, addr + 1, msb);
+}
+
+class LineBuffer implements IterableIterator<string> {
+    private prevChar: number = 0;
+    constructor(private readonly line: string, private curChar: number = 0) { }
+
+    [Symbol.iterator](): IterableIterator<string> {
+        return this;
     }
 
-    private writeWord(addr: word, val: byte) {
-        const lsb = val & 0xff;
-        const msb = val >> 8;
+    clone(): LineBuffer {
+        return new LineBuffer(this.line, this.curChar);
+    }
 
-        this.writeByte(addr, lsb);
-        this.writeByte(addr + 1, msb);
+    next(): IteratorResult<string, string | undefined> {
+        if (this.atEnd()) {
+            return { done: true, value: undefined };
+        }
+        this.prevChar = this.curChar;
+        return { done: false, value: this.line[this.curChar++] };
+    }
+
+    /**
+     * Tries to match the input token at the current buffer location. If
+     * the token matches, the current buffer location is advanced passed
+     * the token and this method returns `true`. Otherwise, this method
+     * returns `false`.
+     *
+     * The input is assumed to be an all-uppercase string and the tokens
+     * in the buffer are uppercased before the comparison.
+     *
+     * @param token An all-uppercase string to match.
+     */
+    lookingAtToken(token: string): boolean {
+        const oldCurChar = this.curChar;
+        const oldPrevChar = this.prevChar;
+        let possibleToken = '';
+        for (const char of this) {
+            if (char === ' ') {
+                continue;
+            }
+            possibleToken += char;
+            if (possibleToken.length === token.length) {
+                break;
+            }
+        }
+        if (possibleToken.toUpperCase() === token) {
+            // Matched; set prevChar to before the match.
+            this.prevChar = oldCurChar;
+            return true;
+        }
+        // No match; restore state.
+        this.curChar = oldCurChar;
+        this.prevChar = oldPrevChar;
+        return false;
+    }
+
+    backup() {
+        this.curChar = this.prevChar;
+    }
+
+    peek(): string {
+        if (this.atEnd()) {
+            throw new RangeError(`Reading past the end of ${this.line}`);
+        }
+        return this.line[this.curChar];
+    }
+
+    atEnd(): boolean {
+        return this.curChar >= this.line.length;
+    }
+}
+
+export default class ApplesoftCompiler {
+    private lines: Map<number, byte[]> = new Map();
+
+    /**
+     * Loads an Applesoft BASIC program into memory.
+     *
+     * @param mem Memory, including zero page, into which the program is
+     *     loaded.
+     * @param program A string with a BASIC program to compile (tokenize).
+     * @param programStart Optional start address of the program. Defaults to
+     *     standard Applesoft program address, 0x801.
+     */
+    static compileToMemory(mem: Memory, program: string, programStart: word = PROGRAM_START) {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile(program);
+        const compiledProgram: Uint8Array = compiler.program(programStart);
+
+        for (let i = 0; i < compiledProgram.byteLength; i++) {
+            writeByte(mem, programStart + i, compiledProgram[i]);
+        }
+        // Set zero page locations. Applesoft is weird because, when a line
+        // is inserted, PRGEND is copied to VARTAB in the beginning, but then
+        // VARTAB is manipulated to make space for the line, then PRGEND is
+        // set from VARTAB. There's also a bug in NEW at D657 where the carry
+        // flag is not cleared, so it can add 2 or 3. The upshot, though, is
+        // that PRGEND and VARTAB end up being 1 or 2 bytes past the end of
+        // the program. From my tests is the emulator, it's usually 1, so
+        // that's what we're going with here.
+        const prgend = programStart + compiledProgram.byteLength + 1;
+        writeWord(mem, TXTTAB, programStart);
+        writeWord(mem, PRGEND, prgend);
+        writeWord(mem, VARTAB, prgend);
+        writeWord(mem, ARYTAB, prgend);
+        writeWord(mem, STREND, prgend);
+    }
+
+    private readLineNumber(lineBuffer: LineBuffer): number {
+        let lineNoStr = '';
+
+        for (const character of lineBuffer) {
+            if (/\d/.test(character)) {
+                lineNoStr += character;
+            } else {
+                lineBuffer.backup();
+                break;
+            }
+        }
+        if (lineNoStr.length === 0) {
+            throw new Error('Missing line number');
+        }
+
+        return parseInt(lineNoStr, 10);
+    }
+
+    private readToken(lineBuffer: LineBuffer): byte {
+        // Try to match a token
+        for (const possibleToken in STRING_TO_TOKEN) {
+            if (lineBuffer.lookingAtToken(possibleToken)) {
+                // NOTE(flan): This special token-preference
+                // logic is straight from the Applesoft BASIC
+                // code (D5BE-D5CA in the Apple //e ROM).
+
+                // Found a token
+                if (possibleToken === 'AT' && !lineBuffer.atEnd()) {
+                    const lookAhead = lineBuffer.peek();
+                    // ATN takes precedence over AT
+                    if (lookAhead === 'N') {
+                        lineBuffer.next();
+                        return STRING_TO_TOKEN['ATN'];
+                    }
+                    // TO takes precedence over AT
+                    if (lookAhead === 'O') {
+                        // Backup to before the token
+                        lineBuffer.backup();
+                        // and emit the 'A' (upper- or lower-case)
+                        return lineBuffer.next().value?.charCodeAt(0) ?? 0;
+                    }
+                }
+                return STRING_TO_TOKEN[possibleToken];
+            }
+        }
+
+        // If not a token, output the character upper-cased
+        return lineBuffer.next().value?.toUpperCase().charCodeAt(0) ?? 0;
+    }
+
+    private compileLine(line: string | null | undefined) {
+        const result: byte[] = [];
+        if (!line) {
+            return;
+        }
+
+        const lineBuffer = new LineBuffer(line);
+        let state: KnownValues<typeof STATES> = STATES.NORMAL;
+
+        const lineNumber = this.readLineNumber(lineBuffer);
+        if (lineNumber < 0 || lineNumber > 65535) {
+            throw new Error('Line number out of range');
+        }
+
+        // Read the rest of the line
+        for (const character of lineBuffer) {
+            const charCode = character.charCodeAt(0);
+            switch (state) {
+                case STATES.NORMAL:
+                    // Skip spaces
+                    if (character === ' ') {
+                        break;
+                    }
+
+                    // Transition to parsing a string
+                    if (character === '"') {
+                        result.push(charCode);
+                        state = STATES.STRING;
+                        break;
+                    }
+
+                    // Shorthand for PRINT (D580 in Apple //e ROM)
+                    if (character === '?') {
+                        result.push(STRING_TO_TOKEN['PRINT']);
+                        break;
+                    }
+
+                    // Try to parse a token or character
+                    lineBuffer.backup();
+                    {
+                        const token = this.readToken(lineBuffer);
+                        if (token === STRING_TO_TOKEN['REM']) {
+                            state = STATES.COMMENT;
+                        }
+                        if (token === STRING_TO_TOKEN['DATA']) {
+                            state = STATES.DATA;
+                        }
+                        result.push(token);
+                    }
+                    break;
+                case STATES.COMMENT:
+                    result.push(character.charCodeAt(0));
+                    break;
+                case STATES.STRING:
+                    if (character === '"') {
+                        state = STATES.NORMAL;
+                    }
+                    result.push(character.charCodeAt(0));
+                    break;
+                case STATES.DATA:
+                    if (character === ':') {
+                        state = STATES.NORMAL;
+                    }
+                    if (character === '"') {
+                        state = STATES.DATA_QUOTE;
+                    }
+                    result.push(character.charCodeAt(0));
+                    break;
+                case STATES.DATA_QUOTE:
+                    if (character === '"') {
+                        state = STATES.DATA;
+                    }
+                    result.push(character.charCodeAt(0));
+                    break;
+            }
+        }
+
+        this.lines.set(lineNumber, result);
     }
 
     compile(program: string) {
-        const lineNos: { [line: string]: byte[]} = {};
-
-        function compileLine(line: string | null | undefined, offset: number) {
-            if (!line) {
-                return [];
-            }
-
-            let state: KnownValues<typeof STATES> = STATES.NORMAL;
-            const result = [0, 0, 0, 0];
-            let curChar = 0;
-            let character;
-            let lineNoStr = '';
-
-            while (line.length) {
-                character = line.charAt(curChar);
-                if (/\d/.test(character)) {
-                    lineNoStr += character;
-                    curChar++;
-                } else {
-                    break;
-                }
-            }
-
-            while (curChar < line.length) {
-                character = line.charAt(curChar).toUpperCase();
-                switch (state) {
-                    case STATES.NORMAL:
-                        if (character !== ' ') {
-                            if (character === '"') {
-                                result.push(character.charCodeAt(0));
-                                state = STATES.STRING;
-                                curChar++;
-                            } else {
-                                let foundToken = '';
-                                let tokenIdx = -1;
-                                for (const possibleToken in TOKENS) {
-                                    if (possibleToken.charAt(0) == character) {
-                                        tokenIdx = curChar + 1;
-                                        let idx = 1;
-                                        while (idx < possibleToken.length) {
-                                            if (line.charAt(tokenIdx) !== ' ') {
-                                                if (line.charAt(tokenIdx).toUpperCase() !== possibleToken.charAt(idx)) {
-                                                    break;
-                                                }
-                                                idx++;
-                                            }
-                                            tokenIdx++;
-                                        }
-                                        if (idx === possibleToken.length) {
-                                            // Found a token
-                                            if (possibleToken === 'AT') {
-                                                const lookAhead = line.charAt(tokenIdx + 1).toUpperCase();
-                                                // ATN takes precedence over AT
-                                                if (lookAhead === 'N') {
-                                                    foundToken = 'ATN';
-                                                    tokenIdx++;
-                                                }
-                                                // TO takes precedence over AT
-                                                if (lookAhead === 'O') {
-                                                    result.push(lookAhead.charCodeAt(0));
-                                                    foundToken = 'TO';
-                                                    tokenIdx++;
-                                                }
-                                            }
-                                            foundToken = possibleToken;
-                                        }
-                                    }
-                                    if (foundToken) {
-                                        break;
-                                    }
-                                }
-                                if (foundToken) {
-                                    result.push(TOKENS[foundToken as KnownKeys<typeof TOKENS>]);
-                                    curChar = tokenIdx;
-                                    if (foundToken === 'REM') {
-                                        state = STATES.COMMENT;
-                                    }
-                                } else {
-                                    result.push(character.charCodeAt(0));
-                                    curChar++;
-                                }
-                            }
-                        } else {
-                            curChar++;
-                        }
-                        break;
-                    case STATES.COMMENT:
-                        result.push(character.charCodeAt(0));
-                        curChar++;
-                        break;
-                    case STATES.STRING:
-                        result.push(character.charCodeAt(0));
-                        if (character == '"') {
-                            state = STATES.NORMAL;
-                        }
-                        curChar++;
-                        break;
-                }
-            }
-
-            if (lineNoStr.length) {
-                const lineNo = parseInt(lineNoStr, 10);
-                if (lineNo < 0 || lineNo > 65535) {
-                    throw new Error('Line number out of range');
-                }
-                if (lineNos[lineNoStr]) {
-                    throw new Error('Duplicate line number');
-                }
-                lineNos[lineNoStr] = result;
-
-                // Next line pointer
-                result.push(0);
-                const nextLine = offset + result.length;
-                result[0] = nextLine & 0xff;
-                result[1] = nextLine >> 8;
-
-                // Line number
-                result[2] = lineNo & 0xff;
-                result[3] = lineNo >> 8;
-            } else {
-                throw new Error('Missing line number');
-            }
-
-            return result;
-        }
-
-        let compiled: number[] = [];
         const lines = program.split(/[\r\n]+/g);
 
         while (lines.length) {
             const line = lines.shift();
-            const compiledLine = compileLine(line, PROGRAM_START + compiled.length);
-            compiled = compiled.concat(compiledLine);
+            this.compileLine(line);
         }
-        compiled.push(0, 0);
+    }
 
-        for (let idx = 0; idx < compiled.length; idx++) {
-            this.writeByte(PROGRAM_START + idx, compiled[idx]);
+    /** Returns the compiled program at the given start address. */
+    program(programStart: word = PROGRAM_START): Uint8Array {
+        const result: byte[] = [];
+
+        // Lines can be inserted out of order, but they should be in order
+        // when tokenized.
+        const lineNumbers = [...this.lines.keys()].sort();
+
+        for (const lineNo of lineNumbers) {
+            const lineBytes = this.lines.get(lineNo) || [];
+            const nextLineAddr = programStart + result.length + 4
+                + lineBytes.length + 1; // +1 for the zero at end of line
+            result.push(nextLineAddr & 0xff, nextLineAddr >> 8);
+            result.push(lineNo & 0xff, lineNo >> 8);
+            result.push(...lineBytes);
+            result.push(0x00);
         }
-        this.writeWord(LOMEM, PROGRAM_START + compiled.length);
-        this.writeWord(ARRAY_START, PROGRAM_START + compiled.length);
-        this.writeWord(ARRAY_END, PROGRAM_START + compiled.length);
+        result.push(0x00, 0x00);
+
+        return new Uint8Array(result);
     }
 }
diff --git a/js/applesoft/decompiler.ts b/js/applesoft/decompiler.ts
index d06d5e5..85a28b5 100644
--- a/js/applesoft/decompiler.ts
+++ b/js/applesoft/decompiler.ts
@@ -1,4 +1,7 @@
-import { byte, KnownKeys, Memory, word } from '../types';
+import { byte, word, ReadonlyUint8Array, Memory } from '../types';
+import { toHex } from 'js/util';
+import { TOKEN_TO_STRING, STRING_TO_TOKEN } from './tokens';
+import { TXTTAB, PRGEND } from './zeropage';
 
 const LETTERS =
     '                                ' +
@@ -6,166 +9,334 @@ const LETTERS =
     '@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_' +
     '`abcdefghijklmnopqrstuvwxyz{|}~ ';
 
-const TOKENS = {
-    0x80: 'END',
-    0x81: 'FOR',
-    0x82: 'NEXT',
-    0x83: 'DATA',
-    0x84: 'INPUT',
-    0x85: 'DEL',
-    0x86: 'DIM',
-    0x87: 'READ',
-    0x88: 'GR',
-    0x89: 'TEXT',
-    0x8a: 'PR#',
-    0x8b: 'IN#',
-    0x8c: 'CALL',
-    0x8d: 'PLOT',
-    0x8e: 'HLIN',
-    0x8f: 'VLIN',
-    0x90: 'HGR2',
-    0x91: 'HGR',
-    0x92: 'HCOLOR=',
-    0x93: 'HPLOT',
-    0x94: 'DRAW',
-    0x95: 'XDRAW',
-    0x96: 'HTAB',
-    0x97: 'HOME',
-    0x98: 'ROT=',
-    0x99: 'SCALE=',
-    0x9a: 'SHLOAD',
-    0x9b: 'TRACE',
-    0x9c: 'NOTRACE',
-    0x9d: 'NORMAL',
-    0x9e: 'INVERSE',
-    0x9f: 'FLASH',
-    0xa0: 'COLOR=',
-    0xa1: 'POP=',
-    0xa2: 'VTAB',
-    0xa3: 'HIMEM:',
-    0xa4: 'LOMEM:',
-    0xa5: 'ONERR',
-    0xa6: 'RESUME',
-    0xa7: 'RECALL',
-    0xa8: 'STORE',
-    0xa9: 'SPEED=',
-    0xaa: 'LET',
-    0xab: 'GOTO',
-    0xac: 'RUN',
-    0xad: 'IF',
-    0xae: 'RESTORE',
-    0xaf: '&',
-    0xb0: 'GOSUB',
-    0xb1: 'RETURN',
-    0xb2: 'REM',
-    0xb3: 'STOP',
-    0xb4: 'ON',
-    0xb5: 'WAIT',
-    0xb6: 'LOAD',
-    0xb7: 'SAVE',
-    0xb8: 'DEF',
-    0xb9: 'POKE',
-    0xba: 'PRINT',
-    0xbb: 'CONT',
-    0xbc: 'LIST',
-    0xbd: 'CLEAR',
-    0xbe: 'GET',
-    0xbf: 'NEW',
-    0xc0: 'TAB(',
-    0xc1: 'TO',
-    0xc2: 'FN',
-    0xc3: 'SPC(',
-    0xc4: 'THEN',
-    0xc5: 'AT',
-    0xc6: 'NOT',
-    0xc7: 'STEP',
-    0xc8: '+',
-    0xc9: '-',
-    0xca: '*',
-    0xcb: '/',
-    0xcc: '^',
-    0xcd: 'AND',
-    0xce: 'OR',
-    0xcf: '>',
-    0xd0: '=',
-    0xd1: '<',
-    0xd2: 'SGN',
-    0xd3: 'INT',
-    0xd4: 'ABS',
-    0xd5: 'USR',
-    0xd6: 'FRE',
-    0xd7: 'SCRN(',
-    0xd8: 'PDL',
-    0xd9: 'POS',
-    0xda: 'SQR',
-    0xdb: 'RND',
-    0xdc: 'LOG',
-    0xdd: 'EXP',
-    0xde: 'COS',
-    0xdf: 'SIN',
-    0xe0: 'TAN',
-    0xe1: 'ATN',
-    0xe2: 'PEEK',
-    0xe3: 'LEN',
-    0xe4: 'STR$',
-    0xe5: 'VAL',
-    0xe6: 'ASC',
-    0xe7: 'CHR$',
-    0xe8: 'LEFT$',
-    0xe9: 'RIGHT$',
-    0xea: 'MID$'
-} as const;
+/**
+ * Resolves a token value to a token string or character.
+ *
+ * @param token
+ * @returns string representing token
+ */
+const resolveToken = (token: byte) => {
+    let tokenString;
+    if (token >= 0x80 && token <= 0xea) {
+        tokenString = TOKEN_TO_STRING[token];
+    } else if (LETTERS[token] !== undefined) {
+        tokenString = LETTERS[token];
+    } else {
+        tokenString = `[${toHex(token)}]`;
+    }
+    return tokenString;
+};
 
-export default class ApplesoftDump {
-    constructor(private mem: Memory) { }
+interface ListOptions {
+    apple2: 'e' | 'plus';
+    columns: number; // usually 40 or 80
+}
 
-    private readByte(addr: word): byte {
-        const page = addr >> 8;
-        const off = addr & 0xff;
+const DEFAULT_LIST_OPTIONS: ListOptions = {
+    apple2: 'e',
+    columns: 40,
+};
 
-        return this.mem.read(page, off);
+interface DecompileOptions {
+    style: 'compact' | 'pretty';
+}
+
+const DEFAULT_DECOMPILE_OPTIONS: DecompileOptions = {
+    style: 'pretty',
+};
+
+const MAX_LINES = 32768;
+
+export default class ApplesoftDecompiler {
+
+    /**
+     * Returns a decompiler for the program in the given memory.
+     *
+     * The memory is assumed to have set `TXTTAB` and `PRGEND` correctly.
+     */
+    static decompilerFromMemory(ram: Memory): ApplesoftDecompiler {
+        const program: byte[] = [];
+
+        const start = ram.read(0x00, TXTTAB) + (ram.read(0x00, TXTTAB + 1) << 8);
+        const end = ram.read(0x00, PRGEND) + (ram.read(0x00, PRGEND + 1) << 8);
+        if (start >= 0xc000 || end >= 0xc000) {
+            throw new Error(`Program memory ${toHex(start, 4)}-${toHex(end, 4)} out of range`);
+        }
+        for (let addr = start; addr <= end; addr++) {
+            program.push(ram.read(addr >> 8, addr & 0xff));
+        }
+
+        return new ApplesoftDecompiler(new Uint8Array(program), start);
     }
 
-    private readWord(addr: word): word {
-        const lsb = this.readByte(addr);
-        const msb = this.readByte(addr + 1);
-
-        return (msb << 8) | lsb;
+    /**
+     * Constructs a decompiler for the given program data. The data is
+     * assumed to be a dump of memory beginning at `base`. If the data
+     * does not cover the whole program, attempting to decompile will
+     * fail.
+     *
+     * @param program The program bytes.
+     * @param base Address of start of program, or 0 to compute start
+     */
+    constructor(
+        private readonly program: ReadonlyUint8Array,
+        private readonly base: word = 0x801
+    ) {
+        if (this.base === 0) {
+            // Signals that we're loading a file from disk, and
+            // addresses are arbitrarily absolute, so we compute
+            // base by taking the next line address and adjusting it to
+            // the actual beginning of the next line.
+            const nextLine = this.wordAt(0);
+            // Start at beginning of first line
+            let nextLineIndex = 4;
+            // Find 0 at end of line
+            while (program[nextLineIndex]) {
+                nextLineIndex++;
+            }
+            // Move to beginning of next line
+            nextLineIndex++;
+            // Adjust base
+            this.base = nextLine - nextLineIndex;
+        }
     }
 
-    toString() {
-        let str = '';
-        const start = this.readWord(0x67); // Start
-        const end = this.readWord(0xaf); // End of program
-        let addr = start;
-        do {
-            let line = '';
-            const next = this.readWord(addr);
-            addr += 2;
-            const lineno = this.readWord(addr);
-            addr += 2;
+    /** Returns the 2-byte word at the given offset. */
+    private wordAt(offset: word): word {
+        return this.program[offset] + (this.program[offset + 1] << 8);
+    }
 
-            line += lineno;
-            line += ' ';
-            let val = 0;
-            do {
-                if (addr < start || addr > end)
-                    return str;
+    /**
+     * Iterates through the lines of the given program in the order of
+     * the linked list of lines, starting from the first line. This
+     * does _not_ mean that all lines in memory will
+     *
+     * @param from First line for which to call the callback.
+     * @param to Last line for which to call the callback.
+     * @param callback A function to call for each line. The first parameter
+     *     is the offset of the line number of the line; the tokens follow.
+     */
+    private forEachLine(
+        from: number, to: number,
+        callback: (offset: word) => void): void {
+        let count = 0;
+        let offset = 0;
+        let nextLineAddr = this.wordAt(offset);
+        let nextLineNo = this.wordAt(offset + 2);
+        while (nextLineAddr !== 0 && nextLineNo < from) {
+            if (++count > MAX_LINES) {
+                throw new Error('Loop detected in listing');
+            }
+            offset = nextLineAddr;
+            nextLineAddr = this.wordAt(offset);
+            nextLineNo = this.wordAt(offset + 2);
+        }
+        while (nextLineAddr !== 0 && nextLineNo <= to) {
+            if (++count > MAX_LINES) {
+                throw new Error('Loop detected in listing');
+            }
+            callback(offset + 2);
+            offset = nextLineAddr - this.base;
+            nextLineAddr = this.wordAt(offset);
+            nextLineNo = this.wordAt(offset + 2);
+        }
+    }
 
-                val = this.readByte(addr++);
-                if (val >= 0x80) {
-                    line += ' ';
-                    line += TOKENS[val as KnownKeys<typeof TOKENS>];
-                    line += ' ';
-                }
-                else
-                    line += LETTERS[val];
-            } while (val);
-            line += '\n';
-            str += line;
-            addr = next;
-        } while (addr && addr >= start && addr < end);
+    /** Lists a single line like an Apple II. */
+    listLine(offset: word, options: ListOptions): string {
+        const lines: string[] = [];
+        let line = '';
 
-        return str;
+        const lineNo = this.wordAt(offset);
+        // The Apple //e prints a space before each line number to make
+        // it easier to edit the lines.  The change is at the subroutine
+        // called at D6F9: on the //e it is SPCLIN (F7AA), on the ][+ it
+        // is LINPRT (ED24).
+        if (options.apple2 === 'e') {
+            line += ' '; // D6F9: JSR SPCLIN
+        }
+        line += `${lineNo} `; // D6FC, always 1 space after line number
+        offset += 2;
+
+        // In the original ROM, the line length is checked immediately
+        // after the line number is printed. For simplicity, this method
+        // always assumes that there is space for one token—which would
+        // have been the case on a realy Apple.
+        while (this.program[offset] !== 0) {
+            if (offset >= this.program.length) {
+                lines.unshift('Unterminated line: ');
+                break;
+            }
+            const token = this.program[offset];
+            if (token >= 0x80 && token <= 0xea) {
+                line += ' '; // D750, always put a space in front of token
+                line += resolveToken(token);
+                line += ' '; // D762, always put a trailing space
+            } else {
+                line += resolveToken(token);
+            }
+            offset++;
+
+            // The Apple //e and ][+ differ in how they choose to break
+            // long lines. In the ][+, D705 prints a newline if the
+            // current column (MON_CH, $24) is greater than or equal to
+            // 33. In the //e, control is passed to GETCH (F7B4), which
+            // uses column 33 in 40-column mode and column 73 in 80-column
+            // mode.
+            //
+            // The ][+ behaves more like a //e when there is an 80-column
+            // card active (programs wrap at column 73).  From what I can
+            // tell (using Virtual ]['s inspector), the 80-column card
+            // keeps MON_CH at zero until the actual column is >= 71, when
+            // it sets it to the actual cursor position - 40.  In the
+            // Videx Videoterm ROM, this fixup happens in BASOUT (CBCD) at
+            // CBE6 by getting the 80-column horizontal cursor position and
+            // subtracting 0x47 (71). If the result is less than zero, then
+            // 0x00 is stored in MON_CH, otherwise 31 is added back and the
+            // result is stored in MON_CH. (The manual is archived at
+            // http://www.apple-iigs.info/doc/fichiers/videoterm.pdf, among
+            // other places.)
+            //
+            // For out purposes, we're just going to use the number of
+            // columns - 7.
+            if (line.length >= options.columns - 7) {
+                line += '\n';
+                lines.push(line);
+                line = '     ';
+            }
+        }
+        lines.push(line + '\n');
+        return lines.join('');
+    }
+
+    /**
+     * Lists the program in the same format that an Apple II prints to the
+     * screen.
+     *
+     * This method also accepts a starting and ending line number. Like on
+     * an Apple II, this will print all of the lines between `from` and `to`
+     * (inclusive) regardless of the actual line numbers between them.
+     *
+     * To list a single line, pass the same number for both `from` and `to`.
+     *
+     * @param options The options for formatting the output.
+     * @param from The first line to print (default 0).
+     * @param to The last line to print (default end of program).
+     */
+    list(options: Partial<ListOptions> = {},
+        from: number = 0, to: number = 65536): string {
+        const allOptions = { ...DEFAULT_LIST_OPTIONS, ...options };
+
+        let result = '';
+        this.forEachLine(from, to, offset => {
+            result += this.listLine(offset, allOptions);
+        });
+        return result;
+    }
+
+    /**
+     * Returns a single line for the given compiled line in as little
+     * space as possible.
+     */
+    compactLine(offset: word): string {
+        let result = '';
+        let spaceIf: (nextToken: string) => boolean = () => false;
+
+        const lineNo = this.wordAt(offset);
+        result += lineNo;
+        spaceIf = (nextToken: string) => /^\d/.test(nextToken);
+        offset += 2;
+
+        while (this.program[offset] !== 0) {
+            if (offset >= this.program.length) {
+                return 'Unterminated line: ' + result;
+            }
+            const token = this.program[offset];
+            let tokenString = resolveToken(token);
+            if (tokenString === 'PRINT') {
+                tokenString = '?';
+            }
+            if (spaceIf(tokenString)) {
+                result += ' ';
+            }
+
+            result += tokenString;
+
+            spaceIf = () => false;
+            if (token === STRING_TO_TOKEN['AT']) {
+                spaceIf = (nextToken) => nextToken.toUpperCase().startsWith('N');
+            }
+
+            offset++;
+        }
+        return result;
+    }
+
+    /**
+     * Returns a single line for the compiled line, but with even spacing:
+     *   * space after line number (not before)
+     *   * space before and after colons (`:`)
+     *   * space around equality and assignment operators (`=`, `<=`, etc.)
+     *   * space after tokens, unless it looks like a function call
+     *   * space after commas, but not before
+     */
+    prettyLine(offset: word): string {
+        let result = '';
+        let inString = false;
+        let spaceIf: (char: byte) => boolean = () => false;
+
+        const lineNo = this.wordAt(offset);
+        result += `${lineNo} `;
+        offset += 2;
+
+        while (this.program[offset] !== 0) {
+            if (offset >= this.program.length) {
+                return 'Unterminated line: ' + result;
+            }
+            const token = this.program[offset];
+            const tokenString = resolveToken(token);
+            if (tokenString === '"') {
+                inString = !inString;
+            }
+
+            if (spaceIf(token) || (!inString && tokenString === ':')) {
+                result += ' ';
+            }
+
+            result += tokenString;
+
+            if (!inString && tokenString === ':') {
+                spaceIf = () => true;
+            } else if (!inString && tokenString === ',') {
+                spaceIf = () => true;
+            } else if (token >= 0xcf && token <= 0xd1) {
+                // For '<', '=', '>', don't add a space between them.
+                spaceIf = (token: byte) => token < 0xcf || token > 0xd1;
+            } else if (token > 0x80 && token < 0xea) {
+                // By default, if a token is followed by an open paren, don't
+                // add a space.
+                spaceIf = (token: byte) => token !== 0x28;
+            } else {
+                // By default, if a literal is followed by a token, add a space.
+                spaceIf = (token: byte) => token >= 0x80 && token <= 0xea;
+            }
+
+            offset++;
+        }
+        return result;
+    }
+
+    /**
+     * Decompiles the program based on the given options.
+     */
+    decompile(options: Partial<DecompileOptions> = {},
+        from: number = 0, to: number = 65536): string {
+        const allOptions = { ...DEFAULT_DECOMPILE_OPTIONS, ...options };
+
+        const results: string[] = [];
+        this.forEachLine(from, to, offset => {
+            results.push(allOptions.style === 'compact' ? this.compactLine(offset) : this.prettyLine(offset));
+        });
+        return results.join('\n');
     }
 }
diff --git a/js/applesoft/heap.ts b/js/applesoft/heap.ts
new file mode 100644
index 0000000..6228e53
--- /dev/null
+++ b/js/applesoft/heap.ts
@@ -0,0 +1,200 @@
+import { byte, word, Memory } from 'js/types';
+import { toHex } from 'js/util';
+import {
+    CURLINE,
+    ARG,
+    FAC,
+    ARYTAB,
+    STREND,
+    TXTTAB,
+    VARTAB
+} from './zeropage';
+
+export type ApplesoftValue = word | number | string | ApplesoftArray;
+export type ApplesoftArray = Array<ApplesoftValue>;
+
+export enum VariableType {
+    Float = 0,
+    String = 1,
+    Function = 2,
+    Integer = 3
+}
+
+export interface ApplesoftVariable {
+    name: string;
+    sizes?: number[];
+    type: VariableType;
+    value: ApplesoftValue | undefined;
+}
+
+
+export class ApplesoftHeap {
+    constructor(private mem: Memory) {}
+
+    private readByte(addr: word): byte {
+        const page = addr >> 8;
+        const off = addr & 0xff;
+
+        if (page >= 0xc0) {
+            throw new Error(`Address ${toHex(page)} out of range`);
+        }
+
+        return this.mem.read(page, off);
+    }
+
+    private readWord(addr: word): word {
+        const lsb = this.readByte(addr);
+        const msb = this.readByte(addr + 1);
+
+        return (msb << 8) | lsb;
+    }
+
+    private readInt(addr: word): word {
+        const msb = this.readByte(addr);
+        const lsb = this.readByte(addr + 1);
+
+        return (msb << 8) | lsb;
+    }
+
+    private readFloat(addr: word, { unpacked } = { unpacked: false }): number {
+        let exponent = this.readByte(addr);
+        if (exponent === 0) {
+            return 0;
+        }
+        exponent = (exponent & 0x80 ? 1 : -1) * ((exponent & 0x7F) - 1);
+
+        let msb = this.readByte(addr + 1);
+        const sb3 = this.readByte(addr + 2);
+        const sb2 = this.readByte(addr + 3);
+        const lsb = this.readByte(addr + 4);
+        let sign;
+        if (unpacked) {
+            const sb = this.readByte(addr + 5);
+            sign = sb & 0x80 ? -1 : 1;
+        } else {
+            sign = msb & 0x80 ? -1 : 1;
+        }
+        msb &= 0x7F;
+        const mantissa = (msb << 24) | (sb3 << 16) | (sb2 << 8) | lsb;
+
+        return sign * (1 + mantissa / 0x80000000) * Math.pow(2, exponent);
+    }
+
+    private readString(len: byte, addr: word): string {
+        let str = '';
+        for (let idx = 0; idx < len; idx++) {
+            str += String.fromCharCode(this.readByte(addr + idx) & 0x7F);
+        }
+        return str;
+    }
+
+    private readVar(addr: word) {
+        const firstByte = this.readByte(addr);
+        const lastByte = this.readByte(addr + 1);
+        const firstLetter = firstByte & 0x7F;
+        const lastLetter = lastByte & 0x7F;
+
+        const name =
+            String.fromCharCode(firstLetter) +
+            (lastLetter ? String.fromCharCode(lastLetter) : '');
+        const type = (lastByte & 0x80) >> 7 | (firstByte & 0x80) >> 6;
+
+        return { name, type };
+    }
+
+    private readArray(addr: word, type: byte, sizes: number[]): ApplesoftArray {
+        let strLen, strAddr;
+        let value;
+        const ary = [];
+        const len = sizes[0];
+
+        for (let idx = 0; idx < len; idx++) {
+            if (sizes.length > 1) {
+                value = this.readArray(addr, type, sizes.slice(1));
+            } else {
+                switch (type) {
+                    case 0: // Real
+                        value = this.readFloat(addr);
+                        addr += 5;
+                        break;
+                    case 1: // String
+                        strLen = this.readByte(addr);
+                        strAddr = this.readWord(addr + 1);
+                        value = this.readString(strLen, strAddr);
+                        addr += 3;
+                        break;
+                    case 3: // Integer
+                    default:
+                        value = this.readInt(addr);
+                        addr += 2;
+                        break;
+                }
+            }
+            ary[idx] = value;
+        }
+        return ary;
+    }
+
+    dumpInternals() {
+        return {
+            txttab: this.readWord(TXTTAB),
+            fac: this.readFloat(FAC, { unpacked: true }),
+            arg: this.readFloat(ARG, { unpacked: true }),
+            curline: this.readWord(CURLINE),
+        };
+    }
+
+    dumpVariables() {
+        const simpleVariableTable = this.readWord(VARTAB);
+        const arrayVariableTable = this.readWord(ARYTAB);
+        const variableStorageEnd = this.readWord(STREND);
+        // var stringStorageStart = readWord(0x6F);
+
+        let addr;
+        const vars: ApplesoftVariable[] = [];
+        let value;
+        let strLen, strAddr;
+
+        for (addr = simpleVariableTable; addr < arrayVariableTable; addr += 7) {
+            const { name, type } = this.readVar(addr);
+
+            switch (type) {
+                case VariableType.Float:
+                    value = this.readFloat(addr + 2);
+                    break;
+                case VariableType.String:
+                    strLen = this.readByte(addr + 2);
+                    strAddr = this.readWord(addr + 3);
+                    value = this.readString(strLen, strAddr);
+                    break;
+                case VariableType.Function:
+                    value = toHex(this.readWord(addr + 2));
+                    value += ',' + toHex(this.readWord(addr + 4));
+                    break;
+                case VariableType.Integer:
+                    value = this.readInt(addr + 2);
+                    break;
+            }
+            vars.push({ name, type, value });
+        }
+
+        while (addr < variableStorageEnd) {
+            const { name, type } = this.readVar(addr);
+            const off = this.readWord(addr + 2);
+            const dim = this.readByte(addr + 4);
+            const sizes = [];
+            for (let idx = 0; idx < dim; idx++) {
+                sizes[idx] = this.readInt(addr + 5 + idx * 2);
+            }
+            value = this.readArray(addr + 5 + dim * 2, type, sizes);
+            vars.push({ name, sizes, type, value });
+
+            if (off < 1) {
+                break;
+            }
+            addr += off;
+        }
+
+        return vars;
+    }
+}
diff --git a/js/applesoft/tokens.ts b/js/applesoft/tokens.ts
new file mode 100644
index 0000000..03115cf
--- /dev/null
+++ b/js/applesoft/tokens.ts
@@ -0,0 +1,223 @@
+import { byte } from 'js/types';
+
+/** Map from token to keyword */
+export const TOKEN_TO_STRING: Record<byte, string> = {
+    0x80: 'END',
+    0x81: 'FOR',
+    0x82: 'NEXT',
+    0x83: 'DATA',
+    0x84: 'INPUT',
+    0x85: 'DEL',
+    0x86: 'DIM',
+    0x87: 'READ',
+    0x88: 'GR',
+    0x89: 'TEXT',
+    0x8a: 'PR#',
+    0x8b: 'IN#',
+    0x8c: 'CALL',
+    0x8d: 'PLOT',
+    0x8e: 'HLIN',
+    0x8f: 'VLIN',
+    0x90: 'HGR2',
+    0x91: 'HGR',
+    0x92: 'HCOLOR=',
+    0x93: 'HPLOT',
+    0x94: 'DRAW',
+    0x95: 'XDRAW',
+    0x96: 'HTAB',
+    0x97: 'HOME',
+    0x98: 'ROT=',
+    0x99: 'SCALE=',
+    0x9a: 'SHLOAD',
+    0x9b: 'TRACE',
+    0x9c: 'NOTRACE',
+    0x9d: 'NORMAL',
+    0x9e: 'INVERSE',
+    0x9f: 'FLASH',
+    0xa0: 'COLOR=',
+    0xa1: 'POP=',
+    0xa2: 'VTAB',
+    0xa3: 'HIMEM:',
+    0xa4: 'LOMEM:',
+    0xa5: 'ONERR',
+    0xa6: 'RESUME',
+    0xa7: 'RECALL',
+    0xa8: 'STORE',
+    0xa9: 'SPEED=',
+    0xaa: 'LET',
+    0xab: 'GOTO',
+    0xac: 'RUN',
+    0xad: 'IF',
+    0xae: 'RESTORE',
+    0xaf: '&',
+    0xb0: 'GOSUB',
+    0xb1: 'RETURN',
+    0xb2: 'REM',
+    0xb3: 'STOP',
+    0xb4: 'ON',
+    0xb5: 'WAIT',
+    0xb6: 'LOAD',
+    0xb7: 'SAVE',
+    0xb8: 'DEF',
+    0xb9: 'POKE',
+    0xba: 'PRINT',
+    0xbb: 'CONT',
+    0xbc: 'LIST',
+    0xbd: 'CLEAR',
+    0xbe: 'GET',
+    0xbf: 'NEW',
+    0xc0: 'TAB(',
+    0xc1: 'TO',
+    0xc2: 'FN',
+    0xc3: 'SPC(',
+    0xc4: 'THEN',
+    0xc5: 'AT',
+    0xc6: 'NOT',
+    0xc7: 'STEP',
+    0xc8: '+',
+    0xc9: '-',
+    0xca: '*',
+    0xcb: '/',
+    0xcc: '^',
+    0xcd: 'AND',
+    0xce: 'OR',
+    0xcf: '>',
+    0xd0: '=',
+    0xd1: '<',
+    0xd2: 'SGN',
+    0xd3: 'INT',
+    0xd4: 'ABS',
+    0xd5: 'USR',
+    0xd6: 'FRE',
+    0xd7: 'SCRN(',
+    0xd8: 'PDL',
+    0xd9: 'POS',
+    0xda: 'SQR',
+    0xdb: 'RND',
+    0xdc: 'LOG',
+    0xdd: 'EXP',
+    0xde: 'COS',
+    0xdf: 'SIN',
+    0xe0: 'TAN',
+    0xe1: 'ATN',
+    0xe2: 'PEEK',
+    0xe3: 'LEN',
+    0xe4: 'STR$',
+    0xe5: 'VAL',
+    0xe6: 'ASC',
+    0xe7: 'CHR$',
+    0xe8: 'LEFT$',
+    0xe9: 'RIGHT$',
+    0xea: 'MID$'
+};
+
+/** Map from keyword to token. */
+export const STRING_TO_TOKEN: Record<string, byte> = {
+    'END': 0x80,
+    'FOR': 0x81,
+    'NEXT': 0x82,
+    'DATA': 0x83,
+    'INPUT': 0x84,
+    'DEL': 0x85,
+    'DIM': 0x86,
+    'READ': 0x87,
+    'GR': 0x88,
+    'TEXT': 0x89,
+    'PR#': 0x8a,
+    'IN#': 0x8b,
+    'CALL': 0x8c,
+    'PLOT': 0x8d,
+    'HLIN': 0x8e,
+    'VLIN': 0x8f,
+    'HGR2': 0x90,
+    'HGR': 0x91,
+    'HCOLOR=': 0x92,
+    'HPLOT': 0x93,
+    'DRAW': 0x94,
+    'XDRAW': 0x95,
+    'HTAB': 0x96,
+    'HOME': 0x97,
+    'ROT=': 0x98,
+    'SCALE=': 0x99,
+    'SHLOAD': 0x9a,
+    'TRACE': 0x9b,
+    'NOTRACE': 0x9c,
+    'NORMAL': 0x9d,
+    'INVERSE': 0x9e,
+    'FLASH': 0x9f,
+    'COLOR=': 0xa0,
+    'POP=': 0xa1,
+    'VTAB': 0xa2,
+    'HIMEM:': 0xa3,
+    'LOMEM:': 0xa4,
+    'ONERR': 0xa5,
+    'RESUME': 0xa6,
+    'RECALL': 0xa7,
+    'STORE': 0xa8,
+    'SPEED=': 0xa9,
+    'LET': 0xaa,
+    'GOTO': 0xab,
+    'RUN': 0xac,
+    'IF': 0xad,
+    'RESTORE': 0xae,
+    '&': 0xaf,
+    'GOSUB': 0xb0,
+    'RETURN': 0xb1,
+    'REM': 0xb2,
+    'STOP': 0xb3,
+    'ON': 0xb4,
+    'WAIT': 0xb5,
+    'LOAD': 0xb6,
+    'SAVE': 0xb7,
+    'DEF': 0xb8,
+    'POKE': 0xb9,
+    'PRINT': 0xba,
+    'CONT': 0xbb,
+    'LIST': 0xbc,
+    'CLEAR': 0xbd,
+    'GET': 0xbe,
+    'NEW': 0xbf,
+    'TAB(': 0xc0,
+    'TO': 0xc1,
+    'FN': 0xc2,
+    'SPC(': 0xc3,
+    'THEN': 0xc4,
+    'AT': 0xc5,
+    'NOT': 0xc6,
+    'STEP': 0xc7,
+    '+': 0xc8,
+    '-': 0xc9,
+    '*': 0xca,
+    '/': 0xcb,
+    '^': 0xcc,
+    'AND': 0xcd,
+    'OR': 0xce,
+    '>': 0xcf,
+    '=': 0xd0,
+    '<': 0xd1,
+    'SGN': 0xd2,
+    'INT': 0xd3,
+    'ABS': 0xd4,
+    'USR': 0xd5,
+    'FRE': 0xd6,
+    'SCRN(': 0xd7,
+    'PDL': 0xd8,
+    'POS': 0xd9,
+    'SQR': 0xda,
+    'RND': 0xdb,
+    'LOG': 0xdc,
+    'EXP': 0xdd,
+    'COS': 0xde,
+    'SIN': 0xdf,
+    'TAN': 0xe0,
+    'ATN': 0xe1,
+    'PEEK': 0xe2,
+    'LEN': 0xe3,
+    'STR$': 0xe4,
+    'VAL': 0xe5,
+    'ASC': 0xe6,
+    'CHR$': 0xe7,
+    'LEFT$': 0xe8,
+    'RIGHT$': 0xe9,
+    'MID$': 0xea
+};
diff --git a/js/applesoft/zeropage.ts b/js/applesoft/zeropage.ts
new file mode 100644
index 0000000..7b4b7dc
--- /dev/null
+++ b/js/applesoft/zeropage.ts
@@ -0,0 +1,27 @@
+/*
+ * Zero page locations used by Applesoft. The names come from
+ * the commented decompilation produced by the Merlin Pro
+ * assembler, revision 4/27/84. There is evidence from
+ * https://www.pagetable.com/?p=774 that the original Microsoft
+ * BASIC source code used these names as well.
+ */
+
+/** Start of program (word) */
+export const TXTTAB = 0x67;
+/** Start of variables (word) */
+export const VARTAB = 0x69;
+/** Start of arrays (word) */
+export const ARYTAB = 0x6B;
+/** End of strings (word). (Strings are allocated down from HIMEM.) */
+export const STREND = 0x6D;
+/** Current line */
+export const CURLINE = 0x75;
+/** Floating Point accumulator (float) */
+export const FAC = 0x9D;
+/** Floating Point arguments (float) */
+export const ARG = 0xA5;
+/**
+ * End of program (word). This is actually 1 or 2 bytes past the three
+ * zero bytes that end the program.
+ */
+export const PRGEND = 0xAF;
diff --git a/js/base64.ts b/js/base64.ts
index 4fc8e36..dbdc70e 100644
--- a/js/base64.ts
+++ b/js/base64.ts
@@ -111,10 +111,10 @@ export function base64_decode(data: string | null | undefined): memory | undefin
         o3 = bits & 0xff;
 
         tmp_arr[ac++] = o1;
-        if (h3 != 64) {
+        if (h3 !== 64) {
             tmp_arr[ac++] = o2;
         }
-        if (h4 != 64) {
+        if (h4 !== 64) {
             tmp_arr[ac++] = o3;
         }
     } while (i < data.length);
@@ -124,8 +124,8 @@ export function base64_decode(data: string | null | undefined): memory | undefin
 
 const DATA_URL_PREFIX = 'data:application/octet-stream;base64,';
 
-export function base64_json_parse(json: string) {
-    const reviver = (_key: string, value: any) => {
+export function base64_json_parse(json: string): unknown {
+    const reviver = (_key: string, value: unknown) => {
         if (typeof value ==='string' && value.startsWith(DATA_URL_PREFIX)) {
             return base64_decode(value.slice(DATA_URL_PREFIX.length));
         }
@@ -135,8 +135,8 @@ export function base64_json_parse(json: string) {
     return JSON.parse(json, reviver);
 }
 
-export function base64_json_stringify(json: any) {
-    const replacer = (_key: string, value: any) => {
+export function base64_json_stringify(json: unknown) {
+    const replacer = (_key: string, value: unknown) => {
         if (value instanceof Uint8Array) {
             return DATA_URL_PREFIX + base64_encode(value);
         }
diff --git a/js/canvas.ts b/js/canvas.ts
index 7ac43f4..18eb7f9 100644
--- a/js/canvas.ts
+++ b/js/canvas.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { byte, Color, memory, MemoryPages, rom } from './types';
 import { allocMemPages } from './util';
 import {
@@ -122,9 +111,9 @@ export class LoresPage2D implements LoresPage {
     private _refreshing = false;
     private _blink = false;
 
-    private highColorTextMode = false
+    private highColorTextMode = false;
 
-    dirty: Region = {...notDirty}
+    dirty: Region = { ...notDirty };
     imageData: ImageData;
 
     constructor(
@@ -159,7 +148,7 @@ export class LoresPage2D implements LoresPage {
         let inverse = false;
         if (this.e) {
             if (!this.vm._80colMode && !this.vm.altCharMode) {
-                inverse = ((val & 0xc0) == 0x40) && this._blink;
+                inverse = ((val & 0xc0) === 0x40) && this._blink;
             }
         } else {
             inverse = !((val & 0x80) || (val & 0x40) && this._blink);
@@ -203,7 +192,7 @@ export class LoresPage2D implements LoresPage {
         const base = addr & 0x3FF;
         let fore, back;
 
-        if (this._buffer[bank][base] == val && !this._refreshing) {
+        if (this._buffer[bank][base] === val && !this._refreshing) {
             return;
         }
         this._buffer[bank][base] = val;
@@ -299,7 +288,7 @@ export class LoresPage2D implements LoresPage {
                                 let color;
                                 if (colorMode) {
                                     if (b & 0x80) {
-                                        if ((b & 0x1c0) != 0x80) {
+                                        if ((b & 0x1c0) !== 0x80) {
                                             color = whiteCol;
                                         } else {
                                             color = odd ? violetCol : greenCol;
@@ -406,7 +395,7 @@ export class LoresPage2D implements LoresPage {
         this._blink = !this._blink;
         for (let idx = 0; idx < 0x400; idx++, addr++) {
             const b = this._buffer[0][idx];
-            if ((b & 0xC0) == 0x40) {
+            if ((b & 0xC0) === 0x40) {
                 this._write(addr >> 8, addr & 0xff, this._buffer[0][idx], 0);
             }
         }
@@ -496,7 +485,7 @@ export class LoresPage2D implements LoresPage {
 
 export class HiresPage2D implements HiresPage {
     public imageData: ImageData;
-    dirty: Region = {...notDirty};
+    dirty: Region = { ...notDirty };
 
     private _buffer: memory[] = [];
     private _refreshing = false;
@@ -586,7 +575,7 @@ export class HiresPage2D implements HiresPage {
         const addr = (page << 8) | off;
         const base = addr & 0x1FFF;
 
-        if (this._buffer[bank][base] == val && !this._refreshing) {
+        if (this._buffer[bank][base] === val && !this._refreshing) {
             return;
         }
         this._buffer[bank][base] = val;
@@ -604,7 +593,7 @@ export class HiresPage2D implements HiresPage {
 
         const data = this.imageData.data;
         let dx, dy;
-        if ((rowa < 24) && (col < 40) && this.vm.hiresMode) {
+        if ((rowa < 24) && (col < 40) && (this.vm.hiresMode || this._refreshing)) {
             let y = rowa << 4 | rowb << 1;
             if (y < this.dirty.top) { this.dirty.top = y; }
             y += 1;
@@ -615,7 +604,7 @@ export class HiresPage2D implements HiresPage {
             if (x > this.dirty.right) { this.dirty.right = x; }
 
             dy = rowa << 4 | rowb << 1;
-            let bz, b0, b1, b2, b3, b4, c, hb;
+            let bz, b0, b1, b2, b3, b4, c;
             if (this.oneSixtyMode && !this.vm.monoMode) {
                 // 1 byte = two pixels, but 3:4 ratio
                 const c3 = val & 0xf;
@@ -654,8 +643,8 @@ export class HiresPage2D implements HiresPage {
                     ((b2 & 0x40) >> 6) | ((b3 & 0x07) << 1), // 5
                     ((b3 & 0x78) >> 3), // 6
                     0
-                ], // 7
-                hb = [
+                ]; // 7
+                const hb = [
                     0,
                     b0 & 0x80, // 0
                     b0 & 0x80, // 1
@@ -706,16 +695,16 @@ export class HiresPage2D implements HiresPage {
                         } else if (this.colorDHRMode) {
                             this._drawHalfPixel(data, offset, dcolor);
                         } else if (
-                            ((c[idx] != c[idx - 1]) && (c[idx] != c[idx + 1])) &&
-                            (((bits & 0x1c) == 0x1c) ||
-                                ((bits & 0x70) == 0x70) ||
-                                ((bits & 0x38) == 0x38))
+                            ((c[idx] !== c[idx - 1]) && (c[idx] !== c[idx + 1])) &&
+                            (((bits & 0x1c) === 0x1c) ||
+                                ((bits & 0x70) === 0x70) ||
+                                ((bits & 0x38) === 0x38))
                         ) {
                             this._drawHalfPixel(data, offset, whiteCol);
                         } else if (
                             (bits & 0x38) ||
-                            (c[idx] == c[idx + 1]) ||
-                            (c[idx] == c[idx - 1])
+                            (c[idx] === c[idx + 1]) ||
+                            (c[idx] === c[idx - 1])
                         ) {
                             this._drawHalfPixel(data, offset, dcolor);
                         } else if (bits & 0x28) {
@@ -797,9 +786,9 @@ export class HiresPage2D implements HiresPage {
 
     refresh() {
         this.highColorHGRMode = !this.vm.an3State && this.vm.hiresMode && !this.vm._80colMode;
-        this.oneSixtyMode = this.vm.flag == 1 && this.vm.doubleHiresMode;
-        this.mixedDHRMode = this.vm.flag == 2 && this.vm.doubleHiresMode;
-        this.monoDHRMode = this.vm.flag == 3 && this.vm.doubleHiresMode;
+        this.oneSixtyMode = this.vm.flag === 1 && this.vm.doubleHiresMode;
+        this.mixedDHRMode = this.vm.flag === 2 && this.vm.doubleHiresMode;
+        this.monoDHRMode = this.vm.flag === 3 && this.vm.doubleHiresMode;
 
         let addr = 0x2000 * this.page;
         this._refreshing = true;
@@ -927,13 +916,21 @@ export class VideoModes2D implements VideoModes {
         this._hgrs[page - 1] = hires;
     }
 
+    getLoresPage(page: pageNo) {
+        return this._grs[page - 1];
+    }
+
+    getHiresPage(page: pageNo) {
+        return this._hgrs[page - 1];
+    }
+
     text(on: boolean) {
         const old = this.textMode;
         this.textMode = on;
         if (on) {
             this.flag = 0;
         }
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -944,7 +941,7 @@ export class VideoModes2D implements VideoModes {
         const old = this._80colMode;
         this._80colMode = on;
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -954,7 +951,7 @@ export class VideoModes2D implements VideoModes {
 
         const old = this.altCharMode;
         this.altCharMode = on;
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -966,7 +963,7 @@ export class VideoModes2D implements VideoModes {
             this.flag = 0;
         }
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -981,7 +978,7 @@ export class VideoModes2D implements VideoModes {
             this.flag = ((this.flag << 1) | (this._80colMode ? 0x0 : 0x1)) & 0x3;
         }
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -993,7 +990,7 @@ export class VideoModes2D implements VideoModes {
     mixed(on: boolean) {
         const old = this.mixedMode;
         this.mixedMode = on;
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -1001,7 +998,7 @@ export class VideoModes2D implements VideoModes {
     page(pageNo: pageNo) {
         const old = this.pageMode;
         this.pageMode = pageNo;
-        if (old != pageNo) {
+        if (old !== pageNo) {
             this._refresh();
         }
     }
@@ -1015,7 +1012,7 @@ export class VideoModes2D implements VideoModes {
     }
 
     isPage2() {
-        return this.pageMode == 2;
+        return this.pageMode === 2;
     }
 
     isHires() {
@@ -1095,8 +1092,8 @@ export class VideoModes2D implements VideoModes {
                 gr.imageData, gr.dirty
             );
         }
-        hgr.dirty = {...notDirty};
-        gr.dirty = {...notDirty};
+        hgr.dirty = { ...notDirty };
+        gr.dirty = { ...notDirty };
 
         return blitted;
     }
diff --git a/js/cards/cffa.ts b/js/cards/cffa.ts
index 5e1895c..b8c5262 100644
--- a/js/cards/cffa.ts
+++ b/js/cards/cffa.ts
@@ -1,26 +1,15 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import type { byte, Card, Restorable } from '../types';
 import { debug, toHex } from '../util';
 import { rom as readOnlyRom } from '../roms/cards/cffa';
-import { read2MGHeader } from '../formats/2mg';
+import { create2MGFromBlockDisk, HeaderData, read2MGHeader } from '../formats/2mg';
 import { ProDOSVolume } from '../formats/prodos';
 import createBlockDisk from '../formats/block';
-import { dump } from '../formats/prodos/utils';
 import {
     BlockDisk,
     BlockFormat,
     ENCODING_BLOCK,
     MassStorage,
+    MassStorageData,
 } from 'js/formats/types';
 
 const rom = new Uint8Array(readOnlyRom);
@@ -93,11 +82,10 @@ const IDENTITY = {
 };
 
 export interface CFFAState {
-    disks: Array<BlockDisk | null>
+    disks: Array<BlockDisk | null>;
 }
 
-type Partition = ReturnType<typeof ProDOSVolume>
-export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
+export default class CFFA implements Card, MassStorage<BlockFormat>, Restorable<CFFAState> {
 
     // CFFA internal Flags
 
@@ -134,7 +122,7 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
 
     // Disk data
 
-    private _partitions: Array<Partition|null> = [
+    private _partitions: Array<ProDOSVolume|null> = [
         // Drive 1
         null,
         // Drive 2
@@ -148,6 +136,9 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
         []
     ];
 
+    private _name: string[] = [];
+    private _metadata: Array<HeaderData|null> = [];
+
     constructor() {
         debug('CFFA');
 
@@ -164,7 +155,7 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
 
     // Verbose debug method
 
-    private _debug(..._args: any[]) {
+    private _debug(..._args: unknown[]) {
         // debug.apply(this, arguments);
     }
 
@@ -398,8 +389,9 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
                                 (block) => new Uint8Array(block)
                             ),
                             encoding: ENCODING_BLOCK,
+                            format: disk.format,
                             readOnly: disk.readOnly,
-                            name: disk.name,
+                            metadata: { ...disk.metadata },
                         };
                     }
                     return result;
@@ -424,6 +416,8 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
         drive = drive - 1;
 
         this._sectors[drive] = [];
+        this._name[drive] = '';
+        this._metadata[drive] = null;
 
         this._identity[drive][IDENTITY.SectorCountHigh] = 0;
         this._identity[drive][IDENTITY.SectorCountLow] = 0;
@@ -446,9 +440,9 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
         this._identity[drive][IDENTITY.SectorCountHigh] = this._sectors[0].length & 0xffff;
         this._identity[drive][IDENTITY.SectorCountLow] = this._sectors[0].length >> 16;
 
-        const prodos = ProDOSVolume(disk);
-        dump(prodos);
+        const prodos = new ProDOSVolume(disk);
 
+        this._name[drive] = disk.metadata.name;
         this._partitions[drive] = prodos;
 
         if (drive) {
@@ -466,8 +460,12 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
         const readOnly = false;
 
         if (ext === '2mg') {
-            const { bytes, offset } = read2MGHeader(rawData);
+            const headerData = read2MGHeader(rawData);
+            const { bytes, offset } = headerData;
+            this._metadata[drive - 1] = headerData;
             rawData = rawData.slice(offset, offset + bytes);
+        } else {
+            this._metadata[drive - 1] = null;
         }
         const options = {
             rawData,
@@ -475,8 +473,37 @@ export default class CFFA implements Card, MassStorage, Restorable<CFFAState> {
             volume,
             readOnly
         };
-        const disk = createBlockDisk(options);
+        const disk = createBlockDisk(ext, options);
 
         return this.setBlockVolume(drive, disk);
     }
+
+    getBinary(drive: number): MassStorageData | null {
+        drive = drive - 1;
+        const blockDisk = this._partitions[drive]?.disk();
+        if (!blockDisk) {
+            return null;
+        }
+        const { blocks, readOnly } = blockDisk;
+        const { name } = blockDisk.metadata;
+        let ext: '2mg' | 'po';
+        let data: ArrayBuffer;
+        if (this._metadata[drive]) {
+            ext = '2mg';
+            data = create2MGFromBlockDisk(this._metadata[drive - 1], blockDisk);
+        } else {
+            ext = 'po';
+            const dataArray = new Uint8Array(blocks.length * 512);
+            for (let idx = 0; idx < blocks.length; idx++) {
+                dataArray.set(blocks[idx], idx * 512);
+            }
+            data = dataArray.buffer;
+        }
+        return {
+            metadata: { name },
+            ext,
+            data,
+            readOnly,
+        };
+    }
 }
diff --git a/js/cards/disk2.ts b/js/cards/disk2.ts
index 9f96b6b..1b16d0d 100644
--- a/js/cards/disk2.ts
+++ b/js/cards/disk2.ts
@@ -1,21 +1,9 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { base64_encode} from '../base64';
+import { base64_encode } from '../base64';
 import type {
     byte,
     Card,
-    memory,
     nibble,
-    rom,
+    ReadonlyUint8Array,
 } from '../types';
 
 import {
@@ -26,11 +14,21 @@ import {
     DRIVE_NUMBERS,
     DriveNumber,
     JSONDisk,
-    ENCODING_NIBBLE,
     PROCESS_BINARY,
     PROCESS_JSON_DISK,
     PROCESS_JSON,
-    ENCODING_BITSTREAM,
+    MassStorage,
+    MassStorageData,
+    SupportedSectors,
+    FloppyDisk,
+    FloppyFormat,
+    WozDisk,
+    NibbleDisk,
+    isNibbleDisk,
+    isWozDisk,
+    NoFloppyDisk,
+    isNoFloppyDisk,
+    NO_DISK,
 } from '../formats/types';
 
 import {
@@ -38,8 +36,8 @@ import {
     createDiskFromJsonDisk
 } from '../formats/create_disk';
 
-import { debug, toHex } from '../util';
-import { jsonDecode, jsonEncode, readSector } from '../formats/format_utils';
+import { toHex } from '../util';
+import { jsonDecode, jsonEncode, readSector, _D13O, _DO, _PO } from '../formats/format_utils';
 
 import { BOOTSTRAP_ROM_16, BOOTSTRAP_ROM_13 } from '../roms/cards/disk2';
 import Apple2IO from '../apple2io';
@@ -130,6 +128,18 @@ const SEQUENCER_ROM_16 = [
     0xDD, 0x4D, 0xE0, 0xE0, 0x0A, 0x0A, 0x0A, 0x0A, 0x88, 0x88, 0x08, 0x08, 0x88, 0x88, 0x08, 0x08  // F
 ] as const;
 
+/** Contents of the P6 sequencer ROM. */
+const SEQUENCER_ROM: Record<SupportedSectors, ReadonlyArray<byte>> = {
+    13: SEQUENCER_ROM_13,
+    16: SEQUENCER_ROM_16,
+};
+
+/** Contents of the P5 ROM at 0xCnXX. */
+const BOOTSTRAP_ROM: Record<SupportedSectors, ReadonlyUint8Array> = {
+    13: BOOTSTRAP_ROM_13,
+    16: BOOTSTRAP_ROM_16,
+};
+
 type LssClockCycle = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7;
 type Phase = 0 | 1 | 2 | 3;
 
@@ -147,11 +157,10 @@ type Phase = 0 | 1 | 2 | 3;
  * head momentum.
  *
  * Examining the https://computerhistory.org/blog/apple-ii-dos-source-code/,
- * one finds that the SEEK routine on line 4831 of `appdos31.lst`. It uses
- * `ONTABLE` and `OFFTABLE` (each 12 bytes) to know exactly how many
- * microseconds to power on/off each coil as the head accelerates. At the end,
- * the final coil is left powered on 9.5 milliseconds to ensure the head has
- * settled.
+ * one finds the SEEK routine on line 4831 of `appdos31.lst`. It uses `ONTABLE`
+ * and `OFFTABLE` (each 12 bytes) to know exactly how many microseconds to
+ * power on/off each coil as the head accelerates. At the end, the final coil
+ * is left powered on 9.5 milliseconds to ensure the head has settled.
  *
  * https://embeddedmicro.weebly.com/apple-2iie.html shows traces of the boot
  * seek (which is slightly different) and a regular seek.
@@ -162,223 +171,186 @@ const PHASE_DELTA = [
     [-2, -1, 0, 1],
     [1, -2, -1, 0]
 ] as const;
+
+/**
+ * State of the controller.
+ */
+ interface ControllerState {
+    /** Sectors supported by the controller. */
+    sectors: SupportedSectors;
+
+    /** Is the active drive powered on? */
+    on: boolean;
+
+    /** The active drive. */
+    drive: DriveNumber;
+
+    /** The 8-cycle LSS clock. */
+    clock: LssClockCycle;
+    /** Current state of the Logic State Sequencer. */
+    state: nibble;
+
+    /** Q6 (Shift/Load) */
+    q6: boolean;
+    /** Q7 (Read/Write) */
+    q7: boolean;
+
+    /** Last data from the disk drive. */
+    latch: byte;
+    /** Last data written by the CPU to card softswitch 0x8D. */
+    bus: byte;
+}
+
+/** Callbacks triggered by events of the drive or controller. */
 export interface Callbacks {
+    /** Called when a drive turns on or off. */
     driveLight: (drive: DriveNumber, on: boolean) => void;
+    /**
+     * Called when a disk has been written to. For performance and integrity,
+     * this is only called when the drive stops spinning or is removed from
+     * the drive.
+     */
     dirty: (drive: DriveNumber, dirty: boolean) => void;
+    /** Called when a disk is inserted or removed from the drive. */
     label: (drive: DriveNumber, name?: string, side?: string) => void;
 }
 
 /** Common information for Nibble and WOZ disks. */
-
-interface BaseDrive {
-    /** Current disk format. */
-    format: NibbleFormat,
-    /** Current disk volume number. */
-    volume: byte,
-    /** Displayed disk name */
-    name: string,
-    /** (Optional) Disk side (Front/Back, A/B) */
-    side?: string,
-    /** Quarter track position of read/write head. */
-    track: byte,
-    /** Position of the head on the track. */
-    head: byte,
-    /** Current active coil in the head stepper motor. */
-    phase: Phase,
+interface Drive {
     /** Whether the drive write protect is on. */
-    readOnly: boolean,
+    readOnly: boolean;
+    /** Quarter track position of read/write head. */
+    track: byte;
+    /** Position of the head on the track. */
+    head: byte;
+    /** Current active coil in the head stepper motor. */
+    phase: Phase;
     /** Whether the drive has been written to since it was loaded. */
-    dirty: boolean,
-}
-
-/** WOZ format track data from https://applesaucefdc.com/woz/reference2/. */
-interface WozDrive extends BaseDrive {
-    /** Woz encoding */
-    encoding: typeof ENCODING_BITSTREAM
-    /** Maps quarter tracks to data in rawTracks; `0xFF` = random garbage. */
-    trackMap: byte[];
-    /** Unique track bitstreams. The index is arbitrary; it is NOT the track number. */
-    rawTracks: Uint8Array[];
-}
-
-/** Nibble format track data. */
-interface NibbleDrive extends BaseDrive {
-    /** Nibble encoding */
-    encoding: typeof ENCODING_NIBBLE
-    /** Nibble data. The index is the track number. */
-    tracks: memory[];
-}
-
-type Drive = WozDrive | NibbleDrive;
-
-function isNibbleDrive(drive: Drive): drive is NibbleDrive  {
-    return drive.encoding === ENCODING_NIBBLE;
-}
-
-function isWozDrive(drive: Drive): drive is WozDrive {
-    return drive.encoding === ENCODING_BITSTREAM;
+    dirty: boolean;
 }
 
 interface DriveState {
-    format: NibbleFormat,
-    encoding: typeof ENCODING_BITSTREAM | typeof ENCODING_NIBBLE
-    volume: byte,
-    name: string,
-    side?: string,
-    tracks: memory[],
-    track: byte,
-    head: byte,
-    phase: Phase,
-    readOnly: boolean,
-    dirty: boolean,
-    trackMap: number[],
-    rawTracks: Uint8Array[],
+    disk: FloppyDisk;
+    readOnly: boolean;
+    track: byte;
+    head: byte;
+    phase: Phase;
+    dirty: boolean;
 }
 
+/** State of the controller for saving/restoring. */
+// TODO(flan): It's unclear whether reusing ControllerState here is a good idea.
 interface State {
     drives: DriveState[];
     skip: number;
-    latch: number;
-    writeMode: boolean;
-    on: boolean;
-    drive: DriveNumber;
+    controllerState: ControllerState;
 }
 
-function getDriveState(drive: Drive): DriveState {
-    const result: DriveState = {
-        format: drive.format,
-        encoding: drive.encoding,
-        volume: drive.volume,
-        name: drive.name,
-        side: drive.side,
-        tracks: [],
-        track: drive.track,
-        head: drive.head,
-        phase: drive.phase,
-        readOnly: drive.readOnly,
-        dirty: drive.dirty,
-        trackMap: [],
-        rawTracks: [],
-    };
-
-    if (isNibbleDrive(drive)) {
-        for (let idx = 0; idx < drive.tracks.length; idx++) {
-            result.tracks.push(new Uint8Array(drive.tracks[idx]));
-        }
+function getDiskState(disk: NoFloppyDisk): NoFloppyDisk;
+function getDiskState(disk: NibbleDisk): NibbleDisk;
+function getDiskState(disk: WozDisk): WozDisk;
+function getDiskState(disk: FloppyDisk): FloppyDisk;
+function getDiskState(disk: FloppyDisk): FloppyDisk {
+    if (isNoFloppyDisk(disk)) {
+        const { encoding, metadata, readOnly } = disk;
+        return {
+            encoding,
+            metadata: {...metadata},
+            readOnly,
+        };
     }
-    if (isWozDrive(drive)) {
-        result.trackMap = [...drive.trackMap];
-        for (let idx = 0; idx < drive.rawTracks.length; idx++) {
-            result.rawTracks.push(new Uint8Array(drive.rawTracks[idx]));
-        }
-    }
-    return result;
-}
-
-function setDriveState(state: DriveState) {
-    let result: Drive;
-    if (state.encoding === ENCODING_NIBBLE) {
-        result = {
-            format: state.format,
-            encoding: ENCODING_NIBBLE,
-            volume: state.volume,
-            name: state.name,
-            side: state.side,
+    if (isNibbleDisk(disk)) {
+        const { format, encoding, metadata, readOnly, volume, tracks } = disk;
+        const result: NibbleDisk = {
+            format,
+            encoding,
+            volume,
             tracks: [],
-            track: state.track,
-            head: state.head,
-            phase: state.phase,
-            readOnly: state.readOnly,
-            dirty: state.dirty,
+            readOnly,
+            metadata: { ...metadata },
         };
-        for (let idx = 0; idx < state.tracks.length; idx++) {
-            result.tracks.push(new Uint8Array(state.tracks[idx]));
-        }
-    } else {
-        result = {
-            format: state.format,
-            encoding: ENCODING_BITSTREAM,
-            volume: state.volume,
-            name: state.name,
-            side: state.side,
-            track: state.track,
-            head: state.head,
-            phase: state.phase,
-            readOnly: state.readOnly,
-            dirty: state.dirty,
-            trackMap: [...state.trackMap],
-            rawTracks: [],
-        };
-        for (let idx = 0; idx < state.rawTracks.length; idx++) {
-            result.rawTracks.push(new Uint8Array(state.rawTracks[idx]));
+        for (let idx = 0; idx < tracks.length; idx++) {
+            result.tracks.push(new Uint8Array(tracks[idx]));
         }
+        return result;
     }
-    return result;
+
+    if (isWozDisk(disk)) {
+        const { format, encoding, metadata, readOnly, trackMap, rawTracks } = disk;
+        const result: WozDisk = {
+            format,
+            encoding,
+            readOnly,
+            trackMap: [],
+            rawTracks: [],
+            metadata: { ...metadata },
+            info: disk.info,
+        };
+        result.trackMap = [...trackMap];
+        for (let idx = 0; idx < rawTracks.length; idx++) {
+            result.rawTracks.push(new Uint8Array(rawTracks[idx]));
+        }
+        return result;
+    }
+
+    throw new Error('Unknown drive state');
 }
 
 /**
  * Emulates the 16-sector and 13-sector versions of the Disk ][ drive and controller.
  */
-export default class DiskII implements Card {
+export default class DiskII implements Card<State>, MassStorage<NibbleFormat> {
 
-    private drives: Drive[] = [
-        {   // Drive 1
-            format: 'dsk',
-            encoding: ENCODING_NIBBLE,
-            volume: 254,
-            name: 'Disk 1',
-            tracks: [],
+    private drives: Record<DriveNumber, Drive> = {
+        1: {   // Drive 1
             track: 0,
             head: 0,
             phase: 0,
             readOnly: false,
             dirty: false,
         },
-        {   // Drive 2
-            format: 'dsk',
-            encoding: ENCODING_NIBBLE,
-            volume: 254,
-            name: 'Disk 2',
-            tracks: [],
+        2: {   // Drive 2
             track: 0,
             head: 0,
             phase: 0,
             readOnly: false,
             dirty: false,
-        }];
+        }
+    };
 
+    private disks: Record<DriveNumber, FloppyDisk> = {
+        1: {
+            encoding: NO_DISK,
+            readOnly: false,
+            metadata: { name: 'Disk 1' },
+        },
+        2: {
+            encoding: NO_DISK,
+            readOnly: false,
+            metadata: { name: 'Disk 2' },
+        }
+    };
+
+    private state: ControllerState;
+
+    /**
+     * When `1`, the next nibble will be available for read; when `0`,
+     * the card is pretending to wait for data to be shifted in by the
+     * sequencer.
+     */
     private skip = 0;
-    /** Last data written by the CPU to card softswitch 0x8D. */
-    private bus = 0;
-    /** Drive data register. */
-    private latch = 0;
     /** Drive off timeout id or null. */
     private offTimeout: number | null = null;
-    /** Q6 (Shift/Load): Used by WOZ disks. */
-    private q6 = 0;
-    /** Q7 (Read/Write): Used by WOZ disks. */
-    private q7: boolean = false;
-    /** Q7 (Read/Write): Used by Nibble disks. */
-    private writeMode = false;
-    /** Whether the selected drive is on. */
-    private on = false;
-    /** Current drive number (1, 2). */
-    private drive: DriveNumber = 1;
-    /** Current drive object. */
-    private cur = this.drives[this.drive - 1];
+    /** Current drive object. Must only be set by `updateActiveDrive()`. */
+    private curDrive: Drive;
+    /** Current disk object. Must only be set by `updateActiveDrive()`. */
+    private curDisk: FloppyDisk;
 
     /** Nibbles read this on cycle */
     private nibbleCount = 0;
 
-    /** Q0-Q3: Coil states. */
-    private q = [false, false, false, false];
-
-    /** The 8-cycle LSS clock. */
-    private clock: LssClockCycle = 0;
     /** Current CPU cycle count. */
     private lastCycles = 0;
-    /** Current state of the Logic State Sequencer. */
-    private state: nibble = 0;
     /**
      * Number of zeros read in a row. The Disk ][ can only read two zeros in a
      * row reliably; above that and the drive starts reporting garbage.  See
@@ -386,48 +358,105 @@ export default class DiskII implements Card {
      */
     private zeros = 0;
 
-    /** Contents of the P5 ROM at 0xCnXX. */
-    private bootstrapRom: rom;
-    /** Contents of the P6 ROM. */
-    private sequencerRom: typeof SEQUENCER_ROM_16 | typeof SEQUENCER_ROM_13;
-
     private worker: Worker;
 
     /** Builds a new Disk ][ card. */
-    constructor(private io: Apple2IO, private callbacks: Callbacks, private sectors = 16) {
+    constructor(private io: Apple2IO, private callbacks: Callbacks, private sectors: SupportedSectors = 16) {
         this.debug('Disk ][');
 
         this.lastCycles = this.io.cycles();
-        this.bootstrapRom = this.sectors == 16 ? BOOTSTRAP_ROM_16 : BOOTSTRAP_ROM_13;
-        this.sequencerRom = this.sectors == 16 ? SEQUENCER_ROM_16 : SEQUENCER_ROM_13;
+        this.state = {
+            sectors,
+            bus: 0,
+            latch: 0,
+            drive: 1,
+            on: false,
+            q6: false,
+            q7: false,
+            clock: 0,
+            // From the example in UtA2e, p. 9-29, col. 1, para. 1., this is
+            // essentially the start of the sequencer loop and produces
+            // correctly synced nibbles immediately.  Starting at state 0
+            // would introduce a spurrious 1 in the latch at the beginning,
+            // which requires reading several more sync bytes to sync up.
+            state: 2,
+        };
+
+        this.updateActiveDrive();
 
         this.initWorker();
     }
 
-    private debug(..._args: any[]) {
-        // debug.apply(this, arguments);
+    /** Updates the active drive based on the controller state. */
+    private updateActiveDrive() {
+        this.curDrive = this.drives[this.state.drive];
+        this.curDisk = this.disks[this.state.drive];
     }
 
-    // Only used for WOZ disks
+    private debug(..._args: unknown[]) {
+        // debug(..._args);
+    }
+
+    public head(): number {
+        return this.curDrive.head;
+    }
+
+    /**
+     * Spin the disk under the read/write head for WOZ images.
+     *
+     * This implementation emulates every clock cycle of the 2 MHz
+     * sequencer since the last time it was called in order to
+     * determine the current state. Because this is called on
+     * every access to the softswitches, the data in the latch
+     * will be correct on every read.
+     *
+     * The emulation of the disk makes a few simplifying assumptions:
+     *
+     * *   The motor turns on instantly.
+     * *   The head moves tracks instantly.
+     * *   The length (in bits) of each track of the WOZ image
+     *     represents one full rotation of the disk and that each
+     *     bit is evenly spaced.
+     * *   Writing will not change the track length. This means
+     *     that short tracks stay short.
+     * *   The read head picks up the next bit when the sequencer
+     *     clock === 4.
+     * *   Head position X on track T is equivalent to head position
+     *     X on track T′. (This is not the recommendation in the WOZ
+     *     spec.)
+     * *   Unspecified tracks contain a single zero bit. (A very
+     *     short track, indeed!)
+     * *   Two zero bits are sufficient to cause the MC3470 to freak
+     *     out. When freaking out, it returns 0 and 1 with equal
+     *     probability.
+     * *   Any softswitch changes happen before `moveHead`. This is
+     *     important because it means that if the clock is ever
+     *     advanced more than one cycle between calls, the
+     *     softswitch changes will appear to happen at the very
+     *     beginning, not just before the last cycle.
+     */
     private moveHead() {
+        // TODO(flan): Short-circuit if the drive is not on.
         const cycles = this.io.cycles();
 
         // Spin the disk the number of elapsed cycles since last call
         let workCycles = (cycles - this.lastCycles) * 2;
         this.lastCycles = cycles;
 
-        if (!isWozDrive(this.cur)) {
+        if (!isWozDisk(this.curDisk)) {
             return;
         }
         const track =
-            this.cur.rawTracks[this.cur.trackMap[this.cur.track]] || [0];
+            this.curDisk.rawTracks[this.curDisk.trackMap[this.curDrive.track]] || [0];
+        
+        const state = this.state;
 
         while (workCycles-- > 0) {
             let pulse: number = 0;
-            if (this.clock == 4) {
-                pulse = track[this.cur.head];
+            if (state.clock === 4) {
+                pulse = track[this.curDrive.head];
                 if (!pulse) {
-                    // More that 2 zeros can not be read reliably.
+                    // More than 2 zeros can not be read reliably.
                     if (++this.zeros > 2) {
                         pulse = Math.random() >= 0.5 ? 1 : 0;
                     }
@@ -438,88 +467,89 @@ export default class DiskII implements Card {
 
             let idx = 0;
             idx |= pulse ? 0x00 : 0x01;
-            idx |= this.latch & 0x80 ? 0x02 : 0x00;
-            idx |= this.q6 ? 0x04 : 0x00;
-            idx |= this.q7 ? 0x08 : 0x00;
-            idx |= this.state << 4;
+            idx |= state.latch & 0x80 ? 0x02 : 0x00;
+            idx |= state.q6 ? 0x04 : 0x00;
+            idx |= state.q7 ? 0x08 : 0x00;
+            idx |= state.state << 4;
 
-            const command = this.sequencerRom[idx];
+            const command = SEQUENCER_ROM[this.sectors][idx];
 
-            if (this.on && this.q7) {
-                debug('clock:', this.clock, 'command:', toHex(command), 'q6:', this.q6);
-            }
+            this.debug(`clock: ${state.clock} state: ${toHex(state.state)} pulse: ${pulse} command: ${toHex(command)} q6: ${state.q6} latch: ${toHex(state.latch)}`);
 
             switch (command & 0xf) {
                 case 0x0: // CLR
-                    this.latch = 0;
+                    state.latch = 0;
                     break;
                 case 0x8: // NOP
                     break;
                 case 0x9: // SL0
-                    this.latch = (this.latch << 1) & 0xff;
+                    state.latch = (state.latch << 1) & 0xff;
                     break;
                 case 0xA: // SR
-                    this.latch >>= 1;
-                    if (this.cur.readOnly) {
-                        this.latch |= 0x80;
+                    state.latch >>= 1;
+                    if (this.curDrive.readOnly) {
+                        state.latch |= 0x80;
                     }
                     break;
                 case 0xB: // LD
-                    this.latch = this.bus;
-                    debug('Loading', toHex(this.latch), 'from bus');
+                    state.latch = state.bus;
+                    this.debug('Loading', toHex(state.latch), 'from bus');
                     break;
                 case 0xD: // SL1
-                    this.latch = ((this.latch << 1) | 0x01) & 0xff;
+                    state.latch = ((state.latch << 1) | 0x01) & 0xff;
                     break;
+                default:
+                    this.debug(`unknown command: ${toHex(command & 0xf)}`);
             }
-            this.state = (command >> 4 & 0xF) as nibble;
+            state.state = (command >> 4 & 0xF) as nibble;
 
-            if (this.clock == 4) {
-                if (this.on) {
-                    if (this.q7) {
-                        track[this.cur.head] = this.state & 0x8 ? 0x01 : 0x00;
-                        debug('Wrote', this.state & 0x8 ? 0x01 : 0x00);
+            if (state.clock === 4) {
+                if (state.on) {
+                    if (state.q7) {
+                        track[this.curDrive.head] = state.state & 0x8 ? 0x01 : 0x00;
+                        this.debug('Wrote', state.state & 0x8 ? 0x01 : 0x00);
                     }
 
-                    if (++this.cur.head >= track.length) {
-                        this.cur.head = 0;
+                    if (++this.curDrive.head >= track.length) {
+                        this.curDrive.head = 0;
                     }
                 }
             }
 
-            if (++this.clock > 7) {
-                this.clock = 0;
+            if (++state.clock > 7) {
+                state.clock = 0;
             }
         }
     }
 
     // Only called for non-WOZ disks
     private readWriteNext() {
-        if (!isNibbleDrive(this.cur)) {
+        if (!isNibbleDisk(this.curDisk)) {
             return;
         }
-        if (this.on && (this.skip || this.writeMode)) {
-            const track = this.cur.tracks![this.cur.track >> 2];
+        const state = this.state;
+        if (state.on && (this.skip || state.q7)) {
+            const track = this.curDisk.tracks[this.curDrive.track >> 2];
             if (track && track.length) {
-                if (this.cur.head >= track.length) {
-                    this.cur.head = 0;
+                if (this.curDrive.head >= track.length) {
+                    this.curDrive.head = 0;
                 }
 
-                if (this.writeMode) {
-                    if (!this.cur.readOnly) {
-                        track[this.cur.head] = this.bus;
-                        if (!this.cur.dirty) {
-                            this.updateDirty(this.drive, true);
+                if (state.q7) {
+                    if (!this.curDrive.readOnly) {
+                        track[this.curDrive.head] = state.bus;
+                        if (!this.curDrive.dirty) {
+                            this.updateDirty(state.drive, true);
                         }
                     }
                 } else {
-                    this.latch = track[this.cur.head];
+                    state.latch = track[this.curDrive.head];
                 }
 
-                ++this.cur.head;
+                ++this.curDrive.head;
             }
         } else {
-            this.latch = 0;
+            state.latch = 0;
         }
         this.skip = (++this.skip % 2);
     }
@@ -531,31 +561,48 @@ export default class DiskII implements Card {
      * tracks by activating two neighboring coils at once.
      */
     private setPhase(phase: Phase, on: boolean) {
-        this.debug('phase ' + phase + (on ? ' on' : ' off'));
-        if (on) {
-            this.cur.track += PHASE_DELTA[this.cur.phase][phase] * 2;
-            this.cur.phase = phase;
+        // According to Sather, UtA2e, p. 9-12, Drive On/Off and Drive
+        // Select:
+        //     Turning a drive on ($C089,X) [...]:
+        //       1. [...]
+        //       5. [...] enables head positioning [...]
+        //
+        // Therefore do nothing if no drive is on.
+        if (!this.state.on) {
+            this.debug(`ignoring phase ${phase}${on ? ' on' : ' off'}`);
+            return;
         }
 
-        const maxTrack = isNibbleDrive(this.cur)
-            ? this.cur.tracks.length * 4 - 1
-            : this.cur.trackMap.length - 1;
-        if (this.cur.track > maxTrack) {
-            this.cur.track = maxTrack;
+        this.debug(`phase ${phase}${on ? ' on' : ' off'}`);
+        if (on) {
+            this.curDrive.track += PHASE_DELTA[this.curDrive.phase][phase] * 2;
+            this.curDrive.phase = phase;
         }
-        if (this.cur.track < 0x0) {
-            this.cur.track = 0x0;
+
+        // The emulator clamps the track to the valid track range available
+        // in the image, but real Disk II drives can seek past track 34 by
+        // at least a half track, usually a full track. Some 3rd party
+        // drives can seek to track 39.
+        const maxTrack = isNibbleDisk(this.curDisk)
+            ? this.curDisk.tracks.length * 4 - 1
+            : (isWozDisk(this.curDisk)
+                ? this.curDisk.trackMap.length - 1 
+                : 0);
+        if (this.curDrive.track > maxTrack) {
+            this.curDrive.track = maxTrack;
+        }
+        if (this.curDrive.track < 0x0) {
+            this.curDrive.track = 0x0;
         }
 
         // debug(
         //     'Drive', _drive, 'track', toHex(_cur.track >> 2) + '.' + (_cur.track & 0x3),
         //     '(' + toHex(_cur.track) + ')',
         //     '[' + phase + ':' + (on ? 'on' : 'off') + ']');
-
-        this.q[phase] = on;
     }
 
     private access(off: byte, val?: byte) {
+        const state = this.state;
         let result = 0;
         const readMode = val === undefined;
 
@@ -587,13 +634,13 @@ export default class DiskII implements Card {
 
             case LOC.DRIVEOFF: // 0x08
                 if (!this.offTimeout) {
-                    if (this.on) {
+                    if (state.on) {
                         // TODO(flan): This is fragile because it relies on
                         // wall-clock time instead of emulator time.
                         this.offTimeout = window.setTimeout(() => {
                             this.debug('Drive Off');
-                            this.on = false;
-                            this.callbacks.driveLight(this.drive, false);
+                            state.on = false;
+                            this.callbacks.driveLight(state.drive, false);
                             this.debug('nibbles read', this.nibbleCount);
                         }, 1000);
                     }
@@ -605,56 +652,56 @@ export default class DiskII implements Card {
                     window.clearTimeout(this.offTimeout);
                     this.offTimeout = null;
                 }
-                if (!this.on) {
+                if (!state.on) {
                     this.debug('Drive On');
                     this.nibbleCount = 0;
-                    this.on = true;
+                    state.on = true;
                     this.lastCycles = this.io.cycles();
-                    this.callbacks.driveLight(this.drive, true);
+                    this.callbacks.driveLight(state.drive, true);
                 }
                 break;
 
             case LOC.DRIVE1:  // 0x0a
                 this.debug('Disk 1');
-                this.drive = 1;
-                this.cur = this.drives[this.drive - 1];
-                if (this.on) {
+                state.drive = 1;
+                this.updateActiveDrive();
+                if (state.on) {
                     this.callbacks.driveLight(2, false);
                     this.callbacks.driveLight(1, true);
                 }
                 break;
             case LOC.DRIVE2:  // 0x0b
                 this.debug('Disk 2');
-                this.drive = 2;
-                this.cur = this.drives[this.drive - 1];
-                if (this.on) {
+                state.drive = 2;
+                this.updateActiveDrive();
+                if (state.on) {
                     this.callbacks.driveLight(1, false);
                     this.callbacks.driveLight(2, true);
                 }
                 break;
 
             case LOC.DRIVEREAD: // 0x0c (Q6L) Shift
-                this.q6 = 0;
-                if (this.writeMode) {
+                state.q6 = false;
+                if (state.q7) {
                     this.debug('clearing _q6/SHIFT');
                 }
-                if (isNibbleDrive(this.cur)) {
+                if (isNibbleDisk(this.curDisk)) {
                     this.readWriteNext();
                 }
                 break;
 
             case LOC.DRIVEWRITE: // 0x0d (Q6H) LOAD
-                this.q6 = 1;
-                if (this.writeMode) {
+                state.q6 = true;
+                if (state.q7) {
                     this.debug('setting _q6/LOAD');
                 }
-                if (isNibbleDrive(this.cur)) {
-                    if (readMode && !this.writeMode) {
-                        if (this.cur.readOnly) {
-                            this.latch = 0xff;
+                if (isNibbleDisk(this.curDisk)) {
+                    if (readMode && !state.q7) {
+                        if (this.curDrive.readOnly) {
+                            state.latch = 0xff;
                             this.debug('Setting readOnly');
                         } else {
-                            this.latch = this.latch >> 1;
+                            state.latch = state.latch >> 1;
                             this.debug('Clearing readOnly');
                         }
                     }
@@ -663,13 +710,11 @@ export default class DiskII implements Card {
 
             case LOC.DRIVEREADMODE:  // 0x0e (Q7L)
                 this.debug('Read Mode');
-                this.q7 = false;
-                this.writeMode = false;
+                state.q7 = false;
                 break;
             case LOC.DRIVEWRITEMODE: // 0x0f (Q7H)
                 this.debug('Write Mode');
-                this.q7 = false;
-                this.writeMode = true;
+                state.q7 = true;
                 break;
 
             default:
@@ -683,7 +728,7 @@ export default class DiskII implements Card {
             // used to read the data register onto the CPU bus, although some
             // also cause conflicts with the disk controller commands.
             if ((off & 0x01) === 0) {
-                result = this.latch;
+                result = state.latch;
                 if (result & 0x80) {
                     this.nibbleCount++;
                 }
@@ -693,14 +738,14 @@ export default class DiskII implements Card {
         } else {
             // It's not explicitly stated, but writes to any address set the
             // data register.
-            this.bus = val!;
+            state.bus = val;
         }
 
         return result;
     }
 
     private updateDirty(drive: DriveNumber, dirty: boolean) {
-        this.drives[drive - 1].dirty = dirty;
+        this.drives[drive].dirty = dirty;
         if (this.callbacks.dirty) {
             this.callbacks.dirty(drive, dirty);
         }
@@ -711,81 +756,99 @@ export default class DiskII implements Card {
     }
 
     read(_page: byte, off: byte) {
-        return this.bootstrapRom[off];
+        return BOOTSTRAP_ROM[this.sectors][off];
     }
 
-    write() { }
+    write() {
+        // not writable
+    }
 
     reset() {
-        if (this.on) {
-            this.callbacks.driveLight(this.drive, false);
-            this.writeMode = false;
-            this.on = false;
-            this.drive = 1;
-            this.cur = this.drives[this.drive - 1];
-        }
-        for (let idx = 0; idx < 4; idx++) {
-            this.q[idx] = false;
+        const state = this.state;
+        if (state.on) {
+            this.callbacks.driveLight(state.drive, false);
+            state.q7 = false;
+            state.on = false;
+            state.drive = 1;
         }
+        this.updateActiveDrive();
     }
 
     tick() {
         this.moveHead();
     }
 
-    getState() {
+    private getDriveState(drive: DriveNumber): DriveState {
+        const curDrive = this.drives[drive];
+        const curDisk = this.disks[drive];
+        const { readOnly, track, head, phase, dirty } = curDrive;
+        return {
+            disk: getDiskState(curDisk),
+            readOnly,
+            track,
+            head,
+            phase,
+            dirty,
+        };    
+    }
+
+    getState(): State {
         const result = {
             drives: [] as DriveState[],
             skip: this.skip,
-            latch: this.latch,
-            writeMode: this.writeMode,
-            on: this.on,
-            drive: this.drive
+            controllerState: { ...this.state },
         };
-        this.drives.forEach(function (drive, idx) {
-            result.drives[idx] = getDriveState(drive);
-        });
+        result.drives[1] = this.getDriveState(1);
+        result.drives[2] = this.getDriveState(2);
 
         return result;
     }
 
+    private setDriveState(drive: DriveNumber, state: DriveState) {
+        const { track, head, phase, readOnly, dirty } = state;
+        this.drives[drive] = {
+            track,
+            head,
+            phase,
+            readOnly,
+            dirty,
+        };
+        this.disks[drive] = getDiskState(state.disk);
+    }
+    
+
     setState(state: State) {
         this.skip = state.skip;
-        this.latch = state.latch;
-        this.writeMode = state.writeMode;
-        this.on = state.on;
-        this.drive = state.drive;
+        this.state = { ...state.controllerState };
         for (const d of DRIVE_NUMBERS) {
-            const idx = d - 1;
-            this.drives[idx] = setDriveState(state.drives[idx]);
-            const { name, side, dirty } = state.drives[idx];
+            this.setDriveState(d, state.drives[d]);
+            const { name, side } = state.drives[d].disk.metadata;
+            const { dirty } = state.drives[d];
             this.callbacks.label(d, name, side);
-            this.callbacks.driveLight(d, this.on);
+            this.callbacks.driveLight(d, this.state.on);
             this.callbacks.dirty(d, dirty);
         }
-        this.cur = this.drives[this.drive - 1];
+        this.updateActiveDrive();
     }
 
     getMetadata(driveNo: DriveNumber) {
-        const drive = this.drives[driveNo - 1];
+        const { track, head, phase, readOnly, dirty } = this.drives[driveNo];
         return {
-            format: drive.format,
-            volume: drive.volume,
-            track: drive.track,
-            head: drive.head,
-            phase: drive.phase,
-            readOnly: drive.readOnly,
-            dirty: drive.dirty
+            track,
+            head,
+            phase,
+            readOnly,
+            dirty,
         };
     }
 
-    // TODO(flan): Does not work on WOZ disks
+    /** Reads the given track and physical sector. */
     rwts(disk: DriveNumber, track: byte, sector: byte) {
-        const cur = this.drives[disk - 1];
-        if (!isNibbleDrive(cur)) {
+        const curDisk = this.disks[disk];
+        if (!isNibbleDisk(curDisk)) {
             throw new Error('Can\'t read WOZ disks');
         }
-        return readSector(cur, track, sector);
+        return readSector(curDisk, track, sector);
     }
 
     /** Sets the data for `drive` from `disk`, which is expected to be JSON. */
@@ -804,10 +867,7 @@ export default class DiskII implements Card {
         } else {
             const disk = createDiskFromJsonDisk(jsonDisk);
             if (disk) {
-                const cur = this.drives[drive - 1];
-                Object.assign(cur, disk);
-                this.updateDirty(drive, false);
-                this.callbacks.label(drive, disk.name, disk.side);
+                this.insertDisk(drive, disk);
                 return true;
             }
         }
@@ -815,11 +875,11 @@ export default class DiskII implements Card {
     }
 
     getJSON(drive: DriveNumber, pretty: boolean = false) {
-        const cur = this.drives[drive - 1];
-        if (!isNibbleDrive(cur)) {
+        const curDisk = this.disks[drive];
+        if (!isNibbleDisk(curDisk)) {
             throw new Error('Can\'t save WOZ disks to JSON');
         }
-        return jsonEncode(cur, pretty);
+        return jsonEncode(curDisk, pretty);
     }
 
     setJSON(drive: DriveNumber, json: string) {
@@ -833,13 +893,13 @@ export default class DiskII implements Card {
             };
             this.worker.postMessage(message);
         } else {
-            const cur = this.drives[drive - 1];
-            Object.assign(cur, jsonDecode(json));
+            const disk = jsonDecode(json);
+            this.insertDisk(drive, disk);
         }
         return true;
     }
 
-    setBinary(drive: DriveNumber, name: string, fmt: NibbleFormat, rawData: ArrayBuffer) {
+    setBinary(drive: DriveNumber, name: string, fmt: FloppyFormat, rawData: ArrayBuffer) {
         const readOnly = false;
         const volume = 254;
         const options = {
@@ -864,12 +924,7 @@ export default class DiskII implements Card {
         } else {
             const disk = createDisk(fmt, options);
             if (disk) {
-                const cur = this.drives[drive - 1];
-                const { name, side } = cur;
-                Object.assign(cur, disk);
-                this.updateDirty(drive, true);
-                this.callbacks.label(drive, name, side);
-
+                this.insertDisk(drive, disk);
                 return true;
             }
         }
@@ -877,68 +932,111 @@ export default class DiskII implements Card {
     }
 
     initWorker() {
-        this.worker = new Worker('dist/format_worker.bundle.js');
+        if (!window.Worker) {
+            return;
+        }
 
-        this.worker.addEventListener('message', (message: MessageEvent<FormatWorkerResponse>) => {
-            const { data } = message;
-            switch (data.type) {
-                case DISK_PROCESSED:
-                    {
-                        const { drive, disk } = data.payload;
-                        if (disk) {
-                            const cur = this.drives[drive - 1];
-                            Object.assign(cur, disk);
-                            const { name, side } = cur;
-                            this.updateDirty(drive, true);
-                            this.callbacks.label(drive, name, side);
+        try {
+            this.worker = new Worker('dist/format_worker.bundle.js');
+
+            this.worker.addEventListener('message', (message: MessageEvent<FormatWorkerResponse>) => {
+                const { data } = message;
+                switch (data.type) {
+                    case DISK_PROCESSED:
+                        {
+                            const { drive, disk } = data.payload;
+                            if (disk) {
+                                this.insertDisk(drive, disk);
+                            }
                         }
-                    }
-                    break;
-            }
-        });
+                        break;
+                }
+            });
+        } catch (e: unknown) {
+            console.error(e);
+        }
     }
 
-    // TODO(flan): Does not work with WOZ disks
-    getBinary(drive: DriveNumber) {
-        const cur = this.drives[drive - 1];
-        if (!isNibbleDrive(cur)) {
+    private insertDisk(drive: DriveNumber, disk: FloppyDisk) {
+        this.disks[drive] = disk;
+        this.drives[drive].head = 0;
+        this.updateActiveDrive();
+        const { name, side } = disk.metadata;
+        this.updateDirty(drive, true);
+        this.callbacks.label(drive, name, side);
+    }
+
+    /**
+     * Returns the binary image of the non-WOZ disk in the given drive.
+     * For WOZ disks, this method returns `null`. If the `ext` parameter
+     * is supplied, the returned data will match that format or an error
+     * will be thrown. If the `ext` parameter is not supplied, the
+     * original image format for the disk in the drive will be used. If
+     * the current data on the disk is no longer readable in that format,
+     * an error will be thrown. Using `ext == 'nib'` will always return
+     * an image.
+     */
+    getBinary(drive: DriveNumber, ext?: Exclude<NibbleFormat, 'woz'>): MassStorageData | null {
+        const curDisk = this.disks[drive];
+        if (!isNibbleDisk(curDisk)) {
             return null;
         }
-        // TODO(flan): Assumes 16-sectors
-        const len = (16 * cur.tracks.length * 256);
+        const { format, readOnly, tracks, volume } = curDisk;
+        const { name } = curDisk.metadata;
+        const len = format === 'nib' ?
+            tracks.reduce((acc, track) => acc + track.length, 0) :
+            this.sectors * tracks.length * 256;
         const data = new Uint8Array(len);
 
+        ext = ext ?? format;
         let idx = 0;
-        for (let t = 0; t < cur.tracks.length; t++) {
-            if (cur.format === 'nib') {
-                data.set(cur.tracks[t], idx);
-                idx += cur.tracks[t].length;
+        for (let t = 0; t < tracks.length; t++) {
+            if (ext === 'nib') {
+                data.set(tracks[t], idx);
+                idx += tracks[t].length;
             } else {
-                for (let s = 0; s < 0x10; s++) {
-                    const sector = readSector(cur, t, s);
+                let maxSector: SupportedSectors;
+                let sectorMap: typeof _PO | typeof _DO | typeof _D13O;
+                if (ext === 'd13') {
+                    maxSector = 13;
+                    sectorMap = _D13O;
+                } else {
+                    maxSector = 16;
+                    sectorMap = format === 'po' ? _PO : _DO;
+                }
+
+                for (let s = 0; s < maxSector; s++) {
+                    const _s = sectorMap[s];
+                    const sector = readSector({ ...curDisk, format: ext }, t, _s);
                     data.set(sector, idx);
                     idx += sector.length;
                 }
             }
         }
 
-        return data;
+        return {
+            ext,
+            metadata: { name },
+            data: data.buffer,
+            readOnly,
+            volume,
+        };
     }
 
-    // TODO(flan): Does not work with WOZ disks
+    // TODO(flan): Does not work with WOZ or D13 disks
     getBase64(drive: DriveNumber) {
-        const cur = this.drives[drive - 1];
-        if (!isNibbleDrive(cur)) {
+        const curDisk = this.disks[drive];
+        if (!isNibbleDisk(curDisk)) {
             return null;
         }
         const data: string[][] | string[] = [];
-        for (let t = 0; t < cur.tracks.length; t++) {
-            if (cur.format === 'nib') {
-                data[t] = base64_encode(cur.tracks[t]);
+        for (let t = 0; t < curDisk.tracks.length; t++) {
+            if (isNibbleDisk(curDisk)) {
+                data[t] = base64_encode(curDisk.tracks[t]);
             } else {
                 const track: string[] = [];
                 for (let s = 0; s < 0x10; s++) {
-                    track[s] = base64_encode(readSector(cur, t, s));
+                    track[s] = base64_encode(readSector(curDisk, t, s));
                 }
                 data[t] = track;
             }
diff --git a/js/cards/langcard.ts b/js/cards/langcard.ts
index 3775184..b9ac944 100644
--- a/js/cards/langcard.ts
+++ b/js/cards/langcard.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import RAM, { RAMState } from '../ram';
 import { debug } from '../util';
 import { Card, Memory, byte, Restorable } from '../types';
@@ -29,10 +18,10 @@ export default class LanguageCard implements Card, Restorable<LanguageCardState>
     private bank2: RAM;
     private ram: RAM;
 
-    private readbsr = false;
-    private writebsr = false;
-    private bsr2 = false;
-    private prewrite = false;
+    private _readbsr = false;
+    private _writebsr = false;
+    private _bsr2 = false;
+    private _prewrite = false;
 
     private read1: Memory;
     private read2: Memory;
@@ -54,21 +43,21 @@ export default class LanguageCard implements Card, Restorable<LanguageCardState>
         this.read2 = this.rom;
     }
 
-    private debug(..._args: any[]) {
+    private debug(..._args: unknown[]) {
         // debug.apply(null, args);
     }
 
     private updateBanks() {
-        if (this.readbsr) {
-            this.read1 = this.bsr2 ? this.bank2 : this.bank1;
+        if (this._readbsr) {
+            this.read1 = this._bsr2 ? this.bank2 : this.bank1;
             this.read2 = this.ram;
         } else {
             this.read1 = this.rom;
             this.read2 = this.rom;
         }
 
-        if (this.writebsr) {
-            this.write1 = this.bsr2 ? this.bank2 : this.bank1;
+        if (this._writebsr) {
+            this.write1 = this._bsr2 ? this.bank2 : this.bank1;
             this.write2 = this.ram;
         } else {
             this.write1 = this.rom;
@@ -101,35 +90,35 @@ export default class LanguageCard implements Card, Restorable<LanguageCardState>
 
         if (writeSwitch) { // $C081, $C083, $C089, $C08B
             if (readMode) {
-                this.writebsr = this.prewrite;
+                this._writebsr = this._prewrite;
             }
-            this.prewrite = readMode;
+            this._prewrite = readMode;
 
             if (offSwitch) { // $C083, $C08B
-                this.readbsr = true;
+                this._readbsr = true;
                 rwStr = 'Read/Write';
             } else { // $C081, $C089
-                this.readbsr = false;
+                this._readbsr = false;
                 rwStr = 'Write';
             }
         } else { // $C080, $C082, $C088, $C08A
-            this.writebsr = false;
-            this.prewrite = false;
+            this._writebsr = false;
+            this._prewrite = false;
 
             if (offSwitch) { // $C082, $C08A
-                this.readbsr = false;
+                this._readbsr = false;
                 rwStr = 'Off';
             } else { // $C080, $C088
-                this.readbsr = true;
+                this._readbsr = true;
                 rwStr = 'Read';
             }
         }
 
         if (bank1Switch) { // C08[8-C]
-            this.bsr2 = false;
+            this._bsr2 = false;
             bankStr = 'Bank 1';
         } else { // C08[0-3]
-            this.bsr2 = true;
+            this._bsr2 = true;
             bankStr = 'Bank 2';
         }
 
@@ -169,12 +158,24 @@ export default class LanguageCard implements Card, Restorable<LanguageCardState>
         }
     }
 
+    public get bsr2() {
+        return this._bsr2;
+    }
+
+    public get readbsr() {
+        return this._readbsr;
+    }
+
+    public get writebsr() {
+        return this._writebsr;
+    }
+
     getState() {
         return {
             readbsr: this.readbsr,
             writebsr: this.writebsr,
             bsr2: this.bsr2,
-            prewrite: this.prewrite,
+            prewrite: this._prewrite,
             ram: this.ram.getState(),
             bank1: this.bank1.getState(),
             bank2: this.bank2.getState()
@@ -182,10 +183,10 @@ export default class LanguageCard implements Card, Restorable<LanguageCardState>
     }
 
     setState(state: LanguageCardState) {
-        this.readbsr = state.readbsr;
-        this.writebsr = state.writebsr;
-        this.bsr2 = state.bsr2;
-        this.prewrite = state.prewrite;
+        this._readbsr = state.readbsr;
+        this._writebsr = state.writebsr;
+        this._bsr2 = state.bsr2;
+        this._prewrite = state.prewrite;
         this.ram.setState(state.ram);
         this.bank1.setState(state.bank1);
         this.bank2.setState(state.bank2);
diff --git a/js/cards/mouse.ts b/js/cards/mouse.ts
new file mode 100644
index 0000000..2c8a5b6
--- /dev/null
+++ b/js/cards/mouse.ts
@@ -0,0 +1,324 @@
+import { Card, byte, word, Restorable } from '../types';
+import CPU6502, { CpuState } from '../cpu6502';
+import { debug } from '../util';
+import { rom } from '../roms/cards/mouse';
+
+const CLAMP_MIN_LOW = 0x478;
+const CLAMP_MAX_LOW = 0x4F8;
+const CLAMP_MIN_HIGH = 0x578;
+const CLAMP_MAX_HIGH = 0x5F8;
+
+const X_LOW = 0x478;
+const Y_LOW = 0x4F8;
+const X_HIGH = 0x578;
+const Y_HIGH = 0x5F8;
+const STATUS = 0x778;
+const MODE = 0x7F8;
+
+const STATUS_DOWN = 0x80;
+const STATUS_LAST = 0x40;
+const STATUS_MOVED = 0x20;
+const INT_SCREEN = 0x08;
+const INT_PRESS = 0x04;
+const INT_MOVE = 0x02;
+
+const MODE_ON = 0x01;
+const MODE_INT_MOVE = 0x02;
+const MODE_INT_PRESS = 0x04;
+const MODE_INT_VBL = 0x08;
+
+/**
+ * Firmware routine offset pointers
+ */
+const ENTRIES = {
+    SET_MOUSE: 0x12,
+    SERVE_MOUSE: 0x13,
+    READ_MOUSE: 0x14,
+    CLEAR_MOUSE: 0x15,
+    POS_MOUSE: 0x16,
+    CLAMP_MOUSE: 0x17,
+    HOME_MOUSE: 0x18,
+    INIT_MOUSE: 0x19
+};
+
+interface MouseState {
+    clampXMin: word;
+    clampYMin: word;
+    clampXMax: word;
+    clampYMax: word;
+    x: word;
+    y: word;
+    mode: byte;
+    down: boolean;
+    lastDown: boolean;
+    lastX: word;
+    lastY: word;
+    serve: byte;
+    shouldIntMove: boolean;
+    shouldIntPress: boolean;
+    slot: byte;
+}
+
+export default class Mouse implements Card, Restorable<MouseState> {
+    /** Lowest mouse X */
+    private clampXMin: word = 0;
+    /** Lowest mouse Y */
+    private clampYMin: word = 0;
+    /** Highest mouse X */
+    private clampXMax: word = 0x3FF;
+    /** Highest mouse Y */
+    private clampYMax: word = 0x3FF;
+    /** Mouse X position */
+    private x: word = 0;
+    /** Mouse Y position */
+    private y: word = 0;
+    /** Mouse mode  */
+    private mode: byte = 0;
+    /** Mouse button down state */
+    private down = false;
+    /** Last mouse button down state */
+    private lastDown = false;
+    /** Last mouse Y Position */
+    private lastX: word = 0;
+    /** Last mouse X position  */
+    private lastY: word = 0;
+    /** Interrupt service flags */
+    private serve: byte = 0;
+    /** Move happened since last refresh */
+    private shouldIntMove = false;
+    /** Button press happened since last refresh */
+    private shouldIntPress = false;
+    /** Slot for screen hole indexing */
+    private slot = 0;
+
+    constructor(
+        private cpu: CPU6502,
+        private cbs: {
+            setMouse: (mouse: Mouse) => void;
+            mouseMode: (on: boolean) => void;
+        }
+    ) {
+        this.cbs.setMouse(this);
+    }
+
+    ioSwitch(_off: byte, _val?: byte) {
+        return undefined;
+    }
+
+    read(_page: byte, off: byte) {
+        let state = this.cpu.getState();
+
+        const holeWrite = (addr: word, val: byte) => {
+            this.cpu.write(addr >> 8, (addr & 0xff) + this.slot, val);
+        };
+
+        const holeRead = (addr: word) => {
+            return this.cpu.read(addr >> 8, addr & 0xff);
+        };
+
+        const clearCarry = (state: CpuState) => {
+            state.s &= 0xFE;
+            return state;
+        };
+
+        if (this.cpu.getSync()) {
+            switch (off) {
+                case rom[ENTRIES.SET_MOUSE]:
+                    {
+                        this.mode = state.a;
+                        this.cbs.mouseMode(!!(this.mode & MODE_ON));
+                        state = clearCarry(state);
+                        // debug(
+                        //     'setMouse ',
+                        //     (_mode & MODE_ON ? 'Mouse on ' : 'Mouse off '),
+                        //     (_mode & MODE_INT_MOVE ? 'Move interrupt ' : '') +
+                        //     (_mode & MODE_INT_PRESS ? 'Move press ' : '') +
+                        //     (_mode & MODE_INT_VBL ? 'Move VBL ' : '')
+                        // );
+                    }
+                    break;
+                case rom[ENTRIES.SERVE_MOUSE]:
+                    // debug('serveMouse');
+                    holeWrite(STATUS, this.serve);
+                    state = clearCarry(state);
+                    this.serve = 0;
+                    break;
+                case rom[ENTRIES.READ_MOUSE]:
+                    {
+                        const moved = (this.lastX !== this.x) || (this.lastY !== this.y);
+                        const status =
+                            (this.down ? STATUS_DOWN : 0) |
+                            (this.lastDown ? STATUS_LAST : 0) |
+                            (moved ? STATUS_MOVED : 0);
+                        const mouseXLow = this.x & 0xff;
+                        const mouseYLow = this.y & 0xff;
+                        const mouseXHigh = this.x >> 8;
+                        const mouseYHigh = this.y >> 8;
+
+                        // debug({ mouseXLow, mouseYLow, mouseXHigh, mouseYHigh });
+
+                        holeWrite(X_LOW, mouseXLow);
+                        holeWrite(Y_LOW, mouseYLow);
+                        holeWrite(X_HIGH, mouseXHigh);
+                        holeWrite(Y_HIGH, mouseYHigh);
+                        holeWrite(STATUS, status);
+                        holeWrite(MODE, this.mode);
+
+                        this.lastDown = this.down;
+                        this.lastX = this.x;
+                        this.lastY = this.y;
+
+                        state = clearCarry(state);
+                    }
+                    break;
+                case rom[ENTRIES.CLEAR_MOUSE]:
+                    debug('clearMouse');
+                    state = clearCarry(state);
+                    break;
+                case rom[ENTRIES.POS_MOUSE]:
+                    debug('posMouse');
+                    state = clearCarry(state);
+                    break;
+                case rom[ENTRIES.CLAMP_MOUSE]:
+                    {
+                        const clampY = state.a;
+                        if (clampY) {
+                            this.clampYMin = holeRead(CLAMP_MIN_LOW) | (holeRead(CLAMP_MIN_HIGH) << 8);
+                            this.clampYMax = holeRead(CLAMP_MAX_LOW) | (holeRead(CLAMP_MAX_HIGH) << 8);
+                            debug('clampMouse Y', this.clampYMin, this.clampYMax);
+                        } else {
+                            this.clampXMin = holeRead(CLAMP_MIN_LOW) | (holeRead(CLAMP_MIN_HIGH) << 8);
+                            this.clampXMax = holeRead(CLAMP_MAX_LOW) | (holeRead(CLAMP_MAX_HIGH) << 8);
+                            debug('clampMouse X', this.clampXMin, this.clampXMax);
+                        }
+                        state = clearCarry(state);
+                    }
+                    break;
+                case rom[ENTRIES.HOME_MOUSE]:
+                    {
+                        debug('homeMouse');
+                        this.x = this.clampXMin;
+                        this.y = this.clampYMin;
+                        state = clearCarry(state);
+                    }
+                    break;
+                case rom[ENTRIES.INIT_MOUSE]:
+                    {
+                        this.slot = state.y >> 4;
+                        debug('initMouse slot', this.slot);
+                        state = clearCarry(state);
+                    }
+                    break;
+            }
+
+            this.cpu.setState(state);
+        }
+
+        return rom[off];
+    }
+
+    write() {
+        // not writable
+    }
+
+    /**
+     * Triggers interrupts based on activity since the last tick
+     */
+
+    tick() {
+        if (this.mode & MODE_INT_VBL) {
+            this.serve |= INT_SCREEN;
+        }
+        if ((this.mode & MODE_INT_PRESS) && this.shouldIntPress) {
+            this.serve |= INT_PRESS;
+        }
+        if ((this.mode & MODE_INT_MOVE) && this.shouldIntMove) {
+            this.serve |= INT_MOVE;
+        }
+        if (this.serve) {
+            this.cpu.irq();
+        }
+        this.shouldIntMove = false;
+        this.shouldIntPress = false;
+    }
+
+    /**
+     * Scales mouse position and clamps to min and max,and flags
+     * potential mouse state change interrupt
+     *
+     * @param x Client mouse X position
+     * @param y Client mouse Y position
+     * @param w Client width
+     * @param h Client height
+     */
+
+    setMouseXY(x: number, y: number, w: number, h: number) {
+        const rangeX = this.clampXMax - this.clampXMin;
+        const rangeY = this.clampYMax - this.clampYMin;
+        this.x = (x * rangeX / w + this.clampXMin) & 0xffff;
+        this.y = (y * rangeY / h + this.clampYMin) & 0xffff;
+        this.shouldIntMove = true;
+    }
+
+    /**
+     * Tracks mouse button state and flags potential
+     * mouse state change interrupt
+     *
+     * @param down Mouse button down state
+     */
+
+    setMouseDown(down: boolean) {
+        this.shouldIntPress = this.down !== down;
+        this.down = down;
+    }
+
+    /**
+     * Restores saved state
+     *
+     * @param state stored state
+     */
+
+    setState(state: MouseState) {
+        this.clampXMin = state.clampXMin;
+        this.clampYMin = state.clampYMin;
+        this.clampXMax = state.clampXMax;
+        this.clampYMax = state.clampYMax;
+        this.x = state.x;
+        this.y = state.y;
+        this.mode = state.mode;
+        this.down = state.down;
+        this.lastDown = state.lastDown;
+        this.lastX = state.lastX;
+        this.lastY = state.lastY;
+        this.serve = state.serve;
+        this.shouldIntMove = state.shouldIntMove;
+        this.shouldIntPress = state.shouldIntPress;
+        this.slot = state.slot;
+    }
+
+    /**
+     * Saves state for restoration
+     *
+     * @returns restorable state
+     */
+
+    getState(): MouseState {
+        return {
+            clampXMin: this.clampXMin,
+            clampYMin: this.clampYMin,
+            clampXMax: this.clampXMax,
+            clampYMax: this.clampYMax,
+            x: this.x,
+            y: this.y,
+            mode: this.mode,
+            down: this.down,
+            lastDown: this.lastDown,
+            lastX: this.lastX,
+            lastY: this.lastY,
+            serve: this.serve,
+            shouldIntMove: this.shouldIntMove,
+            shouldIntPress: this.shouldIntPress,
+            slot: this.slot
+        };
+    }
+}
diff --git a/js/cards/nsc.js b/js/cards/nsc.js
deleted file mode 100644
index 9d6ea0e..0000000
--- a/js/cards/nsc.js
+++ /dev/null
@@ -1,126 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { debug } from '../util';
-
-export default function NoSlotClock(rom)
-{
-    var PATTERN = [
-        0xC5, 0x3A, 0xA3, 0x5C, 0xC5, 0x3A, 0xA3, 0x5C
-    ];
-    var A0 = 0x01;
-    var A2 = 0x04;
-
-    function _init() {
-        debug('NoSlotClock');
-    }
-
-    var _bits = [];
-    var _pattern = new Array(64);
-    var _patternIdx = 0;
-
-    function _patternMatch() {
-        for (var idx = 0; idx < 8; idx++) {
-            var byte = 0;
-            for (var jdx = 0; jdx < 8; jdx++) {
-                byte >>= 1;
-                byte |= _pattern.shift() ? 0x80 : 0x00;
-            }
-            if (byte !== PATTERN[idx]) {
-                return false;
-            }
-        }
-        return true;
-    }
-
-    function _calcBits() {
-        function shift(val) {
-            for (var idx = 0; idx < 4; idx++) {
-                _bits.push(val & 0x08 ? 0x01 : 0x00);
-                val <<= 1;
-            }
-        }
-        function shiftBCD(val) {
-            shift(parseInt(val / 10, 10));
-            shift(parseInt(val % 10, 10));
-        }
-
-        var now = new Date();
-        var year = now.getFullYear() % 100;
-        var day = now.getDate();
-        var weekday = now.getDay() + 1;
-        var month = now.getMonth() + 1;
-        var hour = now.getHours();
-        var minutes = now.getMinutes();
-        var seconds = now.getSeconds();
-        var hundredths = (now.getMilliseconds() / 10);
-
-        _bits = [];
-
-        shiftBCD(year);
-        shiftBCD(month);
-        shiftBCD(day);
-        shiftBCD(weekday);
-        shiftBCD(hour);
-        shiftBCD(minutes);
-        shiftBCD(seconds);
-        shiftBCD(hundredths);
-    }
-
-    _init();
-
-    function _access(off) {
-        if (off & A2) {
-            _patternIdx = 0;
-        } else {
-            var bit = off & A0;
-            _pattern[_patternIdx++] = bit;
-            if (_patternIdx === 64) {
-                if (_patternMatch()) {
-                    _calcBits();
-                }
-                _patternIdx = 0;
-            }
-        }
-    }
-
-    return {
-        start: function nsc_start()  {
-            return rom.start();
-        },
-
-        end: function nsc_end() {
-            return rom.end();
-        },
-
-        read: function nsc_read(page, off) {
-            if (_bits.length > 0) {
-                var bit = _bits.pop();
-                return bit;
-            } else {
-                _access(off);
-            }
-            return rom.read(page, off);
-        },
-
-        write: function nsc_write(page, off, val) {
-            _access(off);
-            rom.write(page, off, val);
-        },
-
-        getState() {
-            return {};
-        },
-
-        setState(_) {
-        }
-    };
-}
diff --git a/js/cards/nsc.ts b/js/cards/nsc.ts
new file mode 100644
index 0000000..94b3081
--- /dev/null
+++ b/js/cards/nsc.ts
@@ -0,0 +1,116 @@
+import ROM from 'js/roms/rom';
+import { bit, byte } from 'js/types';
+import { debug } from '../util';
+
+const PATTERN = [
+    0xC5, 0x3A, 0xA3, 0x5C, 0xC5, 0x3A, 0xA3, 0x5C
+];
+
+const A0 = 0x01;
+const A2 = 0x04;
+
+export default class NoSlotClock {
+    bits: bit[] = [];
+    pattern = new Array(64);
+    patternIdx: number = 0;
+
+    constructor(private rom: ROM) {
+        debug('NoSlotClock');
+    }
+
+
+    private patternMatch() {
+        for (let idx = 0; idx < 8; idx++) {
+            let byte = 0;
+            for (let jdx = 0; jdx < 8; jdx++) {
+                byte >>= 1;
+                byte |= this.pattern.shift() ? 0x80 : 0x00;
+            }
+            if (byte !== PATTERN[idx]) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    private calcBits() {
+        const shift = (val: byte) => {
+            for (let idx = 0; idx < 4; idx++) {
+                this.bits.push(val & 0x08 ? 0x01 : 0x00);
+                val <<= 1;
+            }
+        };
+        const shiftBCD = (val: byte) => {
+            shift(Math.floor(val / 10));
+            shift(Math.floor(val % 10));
+        };
+
+        const now = new Date();
+        const year = now.getFullYear() % 100;
+        const day = now.getDate();
+        const weekday = now.getDay() + 1;
+        const month = now.getMonth() + 1;
+        const hour = now.getHours();
+        const minutes = now.getMinutes();
+        const seconds = now.getSeconds();
+        const hundredths = (now.getMilliseconds() / 10);
+
+        this.bits = [];
+
+        shiftBCD(year);
+        shiftBCD(month);
+        shiftBCD(day);
+        shiftBCD(weekday);
+        shiftBCD(hour);
+        shiftBCD(minutes);
+        shiftBCD(seconds);
+        shiftBCD(hundredths);
+    }
+
+    access(off: byte) {
+        if (off & A2) {
+            this.patternIdx = 0;
+        } else {
+            const bit = off & A0;
+            this.pattern[this.patternIdx++] = bit;
+            if (this.patternIdx === 64) {
+                if (this.patternMatch()) {
+                    this.calcBits();
+                }
+                this.patternIdx = 0;
+            }
+        }
+    }
+
+    start() {
+        return this.rom.start();
+    }
+
+    end() {
+        return this.rom.end();
+    }
+
+    read(page: byte, off: byte) {
+        if (this.bits.length > 0) {
+            const bit = this.bits.pop();
+            return bit;
+        } else {
+            this.access(off);
+        }
+        return this.rom.read(page, off);
+    }
+
+    write(_page: byte, off: byte, _val: byte) {
+        this.access(off);
+        this.rom.write();
+    }
+
+    getState() {
+        return {};
+    }
+
+    setState(_: unknown) {
+        // Setting the state makes no sense.
+    }
+}
+
diff --git a/js/cards/parallel.ts b/js/cards/parallel.ts
index d340e8f..045f354 100644
--- a/js/cards/parallel.ts
+++ b/js/cards/parallel.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { debug } from '../util';
 import { Card, Restorable, byte } from '../types';
 import { rom } from '../roms/cards/parallel';
@@ -48,11 +37,15 @@ export default class Parallel implements Card, Restorable<ParallelState> {
         return rom[off];
     }
 
-    write() {}
+    write() {
+        // not writable
+    }
 
     getState() {
         return {};
     }
 
-    setState(_state: ParallelState) {}
+    setState(_state: ParallelState) {
+        // can't set the state
+    }
 }
diff --git a/js/cards/ramfactor.ts b/js/cards/ramfactor.ts
index f9e42a7..0376fad 100644
--- a/js/cards/ramfactor.ts
+++ b/js/cards/ramfactor.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { allocMem, debug } from '../util';
 import { Card, Restorable, byte, memory } from '../types';
 import { rom } from '../roms/cards/ramfactor';
@@ -27,9 +16,9 @@ const LOC = {
 } as const;
 
 export class RAMFactorState {
-    loc: number
-    firmware: byte
-    mem: memory
+    loc: number;
+    firmware: byte;
+    mem: memory;
 }
 
 export default class RAMFactor implements Card, Restorable<RAMFactorState> {
@@ -137,7 +126,9 @@ export default class RAMFactor implements Card, Restorable<RAMFactorState> {
         return rom[this.firmware << 12 | (page - 0xC0) << 8 | off];
     }
 
-    write() {}
+    write() {
+        // not writable
+    }
 
     reset() {
         this.firmware = 0;
diff --git a/js/cards/smartport.ts b/js/cards/smartport.ts
index adec9f1..1137e14 100644
--- a/js/cards/smartport.ts
+++ b/js/cards/smartport.ts
@@ -1,30 +1,28 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { debug, toHex } from '../util';
 import { rom as smartPortRom } from '../roms/cards/smartport';
 import { Card, Restorable, byte, word, rom } from '../types';
-import { MassStorage, BlockDisk, ENCODING_BLOCK } from '../formats/types';
+import { MassStorage, BlockDisk, ENCODING_BLOCK, BlockFormat, MassStorageData, DiskFormat } from '../formats/types';
 import CPU6502, { CpuState, flags } from '../cpu6502';
-import { read2MGHeader } from '../formats/2mg';
+import { create2MGFromBlockDisk, HeaderData, read2MGHeader } from '../formats/2mg';
 import createBlockDisk from '../formats/block';
+import { DriveNumber } from '../formats/types';
+
+const ID = 'SMARTPORT.J.S';
 
 export interface SmartPortState {
-    disks: BlockDisk[]
+    disks: BlockDisk[];
 }
 
 export interface SmartPortOptions {
     block: boolean;
 }
 
+export interface Callbacks {
+    driveLight: (drive: DriveNumber, on: boolean) => void;
+    dirty: (drive: DriveNumber, dirty: boolean) => void;
+    label: (drive: DriveNumber, name?: string, side?: string) => void;
+}
+
 class Address {
     lo: byte;
     hi: byte;
@@ -107,14 +105,40 @@ const DEVICE_OFFLINE = 0x2F;
 // const BAD_BUFFER_ADDRESS = 0x56;
 // const DUPLICATE_VOLUME_ONLINE = 0x57;
 
-export default class SmartPort implements Card, MassStorage, Restorable<SmartPortState> {
+// Type: Device
+// $00: Memory Expansion Card (RAM disk)
+// $01: 3.5" disk
+// $02: ProFile-type hard disk
+// $03: Generic SCSI
+// $04: ROM disk
+// $05: SCSI CD-ROM
+// $06: SCSI tape or other SCSI sequential device
+// $07: SCSI hard disk
+const DEVICE_TYPE_SCSI_HD = 0x07;
+// $08: Reserved
+// $09: SCSI printer
+// $0A: 5-1/4" disk
+// $0B: Reserved
+// $0C: Reserved
+// $0D: Printer
+// $0E: Clock
+// $0F: Modem
+export default class SmartPort implements Card, MassStorage<BlockFormat>, Restorable<SmartPortState> {
 
     private rom: rom;
     private disks: BlockDisk[] = [];
+    private busy: boolean[] = [];
+    private busyTimeout: ReturnType<typeof setTimeout>[] = [];
+    private ext: DiskFormat[] = [];
+    private metadata: Array<HeaderData | null> = [];
 
-    constructor(private cpu: CPU6502, options: SmartPortOptions) {
+    constructor(
+        private cpu: CPU6502,
+        private callbacks: Callbacks | null,
+        options: SmartPortOptions
+    ) {
         if (options?.block) {
-            const dumbPortRom =  new Uint8Array(smartPortRom);
+            const dumbPortRom = new Uint8Array(smartPortRom);
             dumbPortRom[0x07] = 0x3C;
             this.rom = dumbPortRom;
             debug('DumbPort card');
@@ -124,15 +148,27 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
         }
     }
 
-    private debug(..._args: any[]) {
+    private debug(..._args: unknown[]) {
         // debug.apply(this, arguments);
     }
 
+    private driveLight(drive: DriveNumber) {
+        if (!this.busy[drive]) {
+            this.busy[drive] = true;
+            this.callbacks?.driveLight(drive, true);
+        }
+        clearTimeout(this.busyTimeout[drive]);
+        this.busyTimeout[drive] = setTimeout(() => {
+            this.busy[drive] = false;
+            this.callbacks?.driveLight(drive, false);
+        }, 100);
+    }
+
     /*
      * dumpBlock
      */
 
-    dumpBlock(drive: number, block: number) {
+    dumpBlock(drive: DriveNumber, block: number) {
         let result = '';
         let b;
         let jdx;
@@ -141,7 +177,7 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
             result += toHex(idx << 4, 4) + ': ';
             for (jdx = 0; jdx < 16; jdx++) {
                 b = this.disks[drive].blocks[block][idx * 16 + jdx];
-                if (jdx == 8) {
+                if (jdx === 8) {
                     result += ' ';
                 }
                 result += toHex(b) + ' ';
@@ -149,7 +185,7 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
             result += '        ';
             for (jdx = 0; jdx < 16; jdx++) {
                 b = this.disks[drive].blocks[block][idx * 16 + jdx] & 0x7f;
-                if (jdx == 8) {
+                if (jdx === 8) {
                     result += ' ';
                 }
                 if (b >= 0x20 && b < 0x7f) {
@@ -167,7 +203,7 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
      * getDeviceInfo
      */
 
-    getDeviceInfo(state: CpuState, drive: number) {
+    getDeviceInfo(state: CpuState, drive: DriveNumber) {
         if (this.disks[drive]) {
             const blocks = this.disks[drive].blocks.length;
             state.x = blocks & 0xff;
@@ -185,10 +221,10 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
      * readBlock
      */
 
-    readBlock(state: CpuState, drive: number, block: number, buffer: Address) {
-        this.debug('read drive=' + drive);
-        this.debug('read buffer=' + buffer);
-        this.debug('read block=$' + toHex(block));
+    readBlock(state: CpuState, drive: DriveNumber, block: number, buffer: Address) {
+        this.debug(`read drive=${drive}`);
+        this.debug(`read buffer=${buffer.toString()}`);
+        this.debug(`read block=$${toHex(block)}`);
 
         if (!this.disks[drive]?.blocks.length) {
             debug('Drive', drive, 'is empty');
@@ -198,6 +234,7 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
         }
 
         // debug('read', '\n' + dumpBlock(drive, block));
+        this.driveLight(drive);
 
         for (let idx = 0; idx < 512; idx++) {
             buffer.writeByte(this.disks[drive].blocks[block][idx]);
@@ -212,10 +249,10 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
      * writeBlock
      */
 
-    writeBlock(state: CpuState, drive: number, block: number, buffer: Address) {
-        this.debug('write drive=' + drive);
-        this.debug('write buffer=' + buffer);
-        this.debug('write block=$' + toHex(block));
+    writeBlock(state: CpuState, drive: DriveNumber, block: number, buffer: Address) {
+        this.debug(`write drive=${drive}`);
+        this.debug(`write buffer=${buffer.toString()}`);
+        this.debug(`write block=$${toHex(block)}`);
 
         if (!this.disks[drive]?.blocks.length) {
             debug('Drive', drive, 'is empty');
@@ -232,20 +269,21 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
         }
 
         // debug('write', '\n' + dumpBlock(drive, block));
+        this.driveLight(drive);
 
         for (let idx = 0; idx < 512; idx++) {
             this.disks[drive].blocks[block][idx] = buffer.readByte();
             buffer = buffer.inc(1);
         }
         state.a = 0;
-        state.s &= flags.C;
+        state.s &= ~flags.C;
     }
 
     /*
      * formatDevice
      */
 
-    formatDevice(state: CpuState, drive: number) {
+    formatDevice(state: CpuState, drive: DriveNumber) {
         if (!this.disks[drive]?.blocks.length) {
             debug('Drive', drive, 'is empty');
             state.a = DEVICE_OFFLINE;
@@ -321,11 +359,11 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
             buffer = bufferAddr.readAddress();
             block = blockAddr.readWord();
 
-            this.debug('cmd=' + cmd);
+            this.debug(`cmd=${cmd}`);
             this.debug('unit=$' + toHex(unit));
 
-            this.debug('slot=' + driveSlot + ' drive=' + drive);
-            this.debug('buffer=' + buffer + ' block=$' + toHex(block));
+            this.debug(`slot=${driveSlot} drive=${drive}`);
+            this.debug(`buffer=${buffer.toString()} block=$${toHex(block)}`);
 
             switch (cmd) {
                 case 0: // INFO
@@ -341,47 +379,48 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
                     break;
 
                 case 3: // FORMAT
-                    this.formatDevice(state, unit);
+                    this.formatDevice(state, drive);
                     break;
             }
-        } else if (off == smartOff && this.cpu.getSync()) {
+        } else if (off === smartOff && this.cpu.getSync()) {
             this.debug('smartport entry');
             const stackAddr = new Address(this.cpu, state.sp + 1, 0x01);
             let blocks;
 
             const retVal = stackAddr.readAddress();
 
-            this.debug('return=' + retVal);
+            this.debug(`return=${retVal.toString()}`);
 
             const cmdBlockAddr = retVal.inc(1);
             cmd = cmdBlockAddr.readByte();
             const cmdListAddr = cmdBlockAddr.inc(1).readAddress();
 
-            this.debug('cmd=' + cmd);
-            this.debug('cmdListAddr=' + cmdListAddr);
+            this.debug(`cmd=${cmd}`);
+            this.debug(`cmdListAddr=${cmdListAddr.toString()}`);
 
             stackAddr.writeAddress(retVal.inc(3));
 
             const parameterCount = cmdListAddr.readByte();
             unit = cmdListAddr.inc(1).readByte();
+            const drive = unit ? 2 : 1;
             buffer = cmdListAddr.inc(2).readAddress();
             let status;
 
-            this.debug('parameterCount=' + parameterCount);
+            this.debug(`parameterCount=${parameterCount}`);
             switch (cmd) {
                 case 0x00: // INFO
                     status = cmdListAddr.inc(4).readByte();
-                    this.debug('info unit=' + unit);
-                    this.debug('info buffer=' + buffer);
-                    this.debug('info status=' + status);
+                    this.debug(`info unit=${unit}`);
+                    this.debug(`info buffer=${buffer.toString()}`);
+                    this.debug(`info status=${status}`);
                     switch (unit) {
                         case 0:
                             switch (status) {
                                 case 0:
                                     buffer.writeByte(2); // two devices
                                     buffer.inc(1).writeByte(1 << 6); // no interrupts
-                                    buffer.inc(2).writeByte(0); // reserved
-                                    buffer.inc(3).writeByte(0); // reserved
+                                    buffer.inc(2).writeByte(0x2); // Other vendor
+                                    buffer.inc(3).writeByte(0x0); // Other vendor
                                     buffer.inc(4).writeByte(0); // reserved
                                     buffer.inc(5).writeByte(0); // reserved
                                     buffer.inc(6).writeByte(0); // reserved
@@ -396,7 +435,7 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
                         default: // Unit 1
                             switch (status) {
                                 case 0:
-                                    blocks = this.disks[unit].blocks.length;
+                                    blocks = this.disks[unit]?.blocks.length ?? 0;
                                     buffer.writeByte(0xf0); // W/R Block device in drive
                                     buffer.inc(1).writeByte(blocks & 0xff); // 1600 blocks
                                     buffer.inc(2).writeByte((blocks & 0xff00) >> 8);
@@ -406,6 +445,24 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
                                     state.a = 0;
                                     state.s &= ~flags.C;
                                     break;
+                                case 3:
+                                    blocks = this.disks[unit]?.blocks.length ?? 0;
+                                    buffer.writeByte(0xf0); // W/R Block device in drive
+                                    buffer.inc(1).writeByte(blocks & 0xff); // Blocks low byte
+                                    buffer.inc(2).writeByte((blocks & 0xff00) >> 8); // Blocks middle byte
+                                    buffer.inc(3).writeByte((blocks & 0xff0000) >> 16); // Blocks high byte
+                                    buffer.inc(4).writeByte(ID.length); // Vendor ID length
+                                    for (let idx = 0; idx < ID.length; idx++) { // Vendor ID
+                                        buffer.inc(5 + idx).writeByte(ID.charCodeAt(idx));
+                                    }
+                                    buffer.inc(21).writeByte(DEVICE_TYPE_SCSI_HD); // Device Type
+                                    buffer.inc(22).writeByte(0x0); // Device Subtype
+                                    buffer.inc(23).writeWord(0x0101); // Version
+                                    state.x = 24;
+                                    state.y = 0;
+                                    state.a = 0;
+                                    state.s &= ~flags.C;
+                                    break;
                             }
                             break;
                     }
@@ -415,16 +472,16 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
 
                 case 0x01: // READ BLOCK
                     block = cmdListAddr.inc(4).readWord();
-                    this.readBlock(state, unit, block, buffer);
+                    this.readBlock(state, drive, block, buffer);
                     break;
 
                 case 0x02: // WRITE BLOCK
                     block = cmdListAddr.inc(4).readWord();
-                    this.writeBlock(state, unit, block, buffer);
+                    this.writeBlock(state, drive, block, buffer);
                     break;
 
                 case 0x03: // FORMAT
-                    this.formatDevice(state, unit);
+                    this.formatDevice(state, drive);
                     break;
 
                 case 0x04: // CONTROL
@@ -453,6 +510,7 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
     }
 
     write() {
+        // not writable
     }
 
     getState() {
@@ -464,8 +522,9 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
                             (block) => new Uint8Array(block)
                         ),
                         encoding: ENCODING_BLOCK,
+                        format: disk.format,
                         readOnly: disk.readOnly,
-                        name: disk.name,
+                        metadata: { ...disk.metadata },
                     };
                     return result;
                 }
@@ -481,20 +540,27 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
                         (block) => new Uint8Array(block)
                     ),
                     encoding: ENCODING_BLOCK,
+                    format: disk.format,
                     readOnly: disk.readOnly,
-                    name: disk.name,
+                    metadata: { ...disk.metadata },
                 };
                 return result;
             }
         );
     }
 
-    setBinary(drive: number, name: string, fmt: string, rawData: ArrayBuffer) {
-        const volume = 254;
-        const readOnly = false;
-        if (fmt == '2mg') {
-            const { bytes, offset } = read2MGHeader(rawData);
+    setBinary(drive: DriveNumber, name: string, fmt: BlockFormat, rawData: ArrayBuffer) {
+        let volume = 254;
+        let readOnly = false;
+        if (fmt === '2mg') {
+            const header = read2MGHeader(rawData);
+            this.metadata[drive] = header;
+            const { bytes, offset } = header;
+            volume = header.volume;
+            readOnly = header.readOnly;
             rawData = rawData.slice(offset, offset + bytes);
+        } else {
+            this.metadata[drive] = null;
         }
         const options = {
             rawData,
@@ -503,8 +569,37 @@ export default class SmartPort implements Card, MassStorage, Restorable<SmartPor
             volume,
         };
 
-        this.disks[drive] = createBlockDisk(options);
+        this.ext[drive] = fmt;
+        this.disks[drive] = createBlockDisk(fmt, options);
+        this.callbacks?.label(drive, name);
 
         return true;
     }
+
+    getBinary(drive: number): MassStorageData | null {
+        if (!this.disks[drive]) {
+            return null;
+        }
+        const disk = this.disks[drive];
+        const ext = this.ext[drive];
+        const { readOnly } = disk;
+        const { name } = disk.metadata;
+        let data: ArrayBuffer;
+        if (ext === '2mg') {
+            data = create2MGFromBlockDisk(this.metadata[drive], disk);
+        } else {
+            const { blocks } = disk;
+            const byteArray = new Uint8Array(blocks.length * 512);
+            for (let idx = 0; idx < blocks.length; idx++) {
+                byteArray.set(blocks[idx], idx * 512);
+            }
+            data = byteArray.buffer;
+        }
+        return {
+            metadata: { name },
+            ext,
+            data,
+            readOnly,
+        };
+    }
 }
diff --git a/js/cards/thunderclock.ts b/js/cards/thunderclock.ts
index 3244511..e684d2d 100644
--- a/js/cards/thunderclock.ts
+++ b/js/cards/thunderclock.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { debug, toHex } from '../util';
 import { Card, Restorable, byte } from '../types';
 import { rom } from '../roms/cards/thunderclock';
@@ -46,7 +35,7 @@ export default class Thunderclock implements Card, Restorable<ThunderclockState>
     private bits: boolean[] = [];
     private command: byte = COMMANDS.REGHOLD;
 
-    private debug(..._args: any[]) {
+    private debug(..._args: unknown[]) {
         // debug.apply(this, arguments);
     }
 
@@ -149,6 +138,7 @@ export default class Thunderclock implements Card, Restorable<ThunderclockState>
     }
 
     write() {
+        // not writable
     }
 
     ioSwitch(off: byte, val?: byte) {
@@ -159,5 +149,7 @@ export default class Thunderclock implements Card, Restorable<ThunderclockState>
         return {};
     }
 
-    setState() {}
+    setState(_state: ThunderclockState) {
+        // can't set the state
+    }
 }
diff --git a/js/cards/videoterm.ts b/js/cards/videoterm.ts
index 4c3054c..08328c1 100644
--- a/js/cards/videoterm.ts
+++ b/js/cards/videoterm.ts
@@ -1,25 +1,14 @@
-/* Copyright 2017 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { allocMemPages, debug } from '../util';
 import { Card, Restorable, byte, Color, memory, word } from '../types';
 import { ROM, VIDEO_ROM } from '../roms/cards/videoterm';
 
 interface VideotermState {
-    curReg: byte,
-    startPos: word,
-    cursorPos: word,
-    bank: byte,
-    buffer: memory,
-    regs: byte[],
+    curReg: byte;
+    startPos: word;
+    cursorPos: word;
+    bank: byte;
+    buffer: memory;
+    regs: byte[];
 }
 
 const LOC = {
@@ -175,7 +164,7 @@ export default class Videoterm implements Card, Restorable<VideotermState> {
         const startPos =
             this.regs[REGS.STARTPOS_HI] << 8 |
             this.regs[REGS.STARTPOS_LO];
-        if (this.startPos != startPos) {
+        if (this.startPos !== startPos) {
             this.startPos = startPos;
             this.shouldRefresh = true;
         }
diff --git a/js/components/App.tsx b/js/components/App.tsx
new file mode 100644
index 0000000..8e9e1fe
--- /dev/null
+++ b/js/components/App.tsx
@@ -0,0 +1,37 @@
+import 'preact/debug';
+import { h } from 'preact';
+import { Header } from './Header';
+import { Apple2 } from './Apple2';
+import { usePrefs } from './hooks/usePrefs';
+import { SYSTEM_TYPE_APPLE2E } from '../ui/system';
+import { SCREEN_GL } from '../ui/screen';
+import { defaultSystem, systemTypes } from './util/systems';
+
+import styles from './css/App.module.css';
+
+/**
+ * Top level application component, provides the parameters
+ * needed by the Apple2 component to bootstrap itself.
+ *
+ * @returns Application component
+ */
+export const App = () => {
+    const prefs = usePrefs();
+    const systemType = prefs.readPref(SYSTEM_TYPE_APPLE2E, 'apple2enh');
+    const gl = prefs.readPref(SCREEN_GL, 'true') === 'true';
+
+    const system = {
+        ...defaultSystem,
+        ...(systemTypes[systemType] || {})
+    };
+
+    return (
+        <div className={styles.container}>
+            <Header e={system.e} />
+            <Apple2
+                gl={gl}
+                {...system}
+            />
+        </div>
+    );
+};
diff --git a/js/components/Apple2.tsx b/js/components/Apple2.tsx
new file mode 100644
index 0000000..29fcaf2
--- /dev/null
+++ b/js/components/Apple2.tsx
@@ -0,0 +1,171 @@
+import { h } from 'preact';
+import cs from 'classnames';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { Apple2 as Apple2Impl } from '../apple2';
+import { ControlStrip } from './ControlStrip';
+import { Debugger } from './debugger/Debugger';
+import { ErrorModal } from './ErrorModal';
+import { Inset } from './Inset';
+import { Keyboard } from './Keyboard';
+import { LanguageCard } from './LanguageCard';
+import { Mouse } from './Mouse';
+import { Screen } from './Screen';
+import { Drives } from './Drives';
+import { Slinky } from './Slinky';
+import { ThunderClock } from './ThunderClock';
+import { Videoterm } from './Videoterm';
+import { spawn, Ready } from './util/promises';
+
+import styles from './css/Apple2.module.css';
+import { SupportedSectors } from 'js/formats/types';
+
+declare global {
+    interface Window {
+        apple2: Apple2Impl;
+    }
+}
+
+/**
+ * Interface for the Apple2 component.
+ */
+export interface Apple2Props {
+    characterRom: string;
+    enhanced: boolean;
+    e: boolean;
+    gl: boolean;
+    rom: string;
+    sectors: SupportedSectors;
+}
+
+/**
+ * Component to bind various UI components together to form
+ * the application layout. Includes the screen, drives,
+ * emulator controls and keyboard. Bootstraps the core
+ * Apple2 emulator.
+ *
+ * @param props Apple2 initialization props
+ * @returns
+ */
+export const Apple2 = (props: Apple2Props) => {
+    const { e, enhanced, sectors } = props;
+    const screenRef = useRef<HTMLCanvasElement>(null);
+    const [apple2, setApple2] = useState<Apple2Impl>();
+    const [error, setError] = useState<unknown>();
+    const [ready, setReady] = useState(false);
+    const [showDebug, setShowDebug] = useState(false);
+    const drivesReady = useMemo(() => new Ready(setError), []);
+
+    const io = apple2?.getIO();
+    const cpu = apple2?.getCPU();
+    const vm = apple2?.getVideoModes();
+    const rom = apple2?.getROM();
+
+    const doPaste = useCallback((event: Event) => {
+        if (
+            (document.activeElement !== screenRef.current) &&
+            (document.activeElement !== document.body)
+        ) {
+            return;
+        }
+        if (io) {
+            const paste = (event.clipboardData || window.clipboardData)?.getData('text');
+            if (paste) {
+                io.setKeyBuffer(paste);
+            }
+        }
+        event.preventDefault();
+    }, [io]);
+
+    const doCopy = useCallback((event: Event) => {
+        if (
+            (document.activeElement !== screenRef.current) &&
+            (document.activeElement !== document.body)
+        ) {
+            return;
+        }
+        if (vm) {
+            event.clipboardData?.setData('text/plain', vm.getText());
+        }
+        event.preventDefault();
+    }, [vm]);
+
+    useEffect(() => {
+        if (screenRef.current) {
+            const options = {
+                canvas: screenRef.current,
+                tick: () => { /* do nothing */ },
+                ...props,
+            };
+            const apple2 = new Apple2Impl(options);
+            const controller = spawn(async (signal) => {
+                try {
+                    await apple2.ready;
+                    if (signal.aborted) {
+                        return;
+                    }
+                    setApple2(apple2);
+                    await drivesReady.ready;
+                    if (signal.aborted) {
+                        setApple2(undefined);
+                        return;
+                    }
+                    apple2.reset();
+                    apple2.run();
+                } catch (e) {
+                    setError(e);
+                }
+                setReady(true);
+            });
+
+            window.apple2 = apple2;
+
+            return () => controller.abort();
+        }
+    }, [props, drivesReady]);
+
+    useEffect(() => {
+        const { current } = screenRef;
+
+        window.addEventListener('paste', doPaste);
+        window.addEventListener('copy', doCopy);
+
+        current?.addEventListener('paste', doPaste);
+        current?.addEventListener('copy', doCopy);
+
+        return () => {
+            window.removeEventListener('paste', doPaste);
+            window.removeEventListener('copy', doCopy);
+
+            current?.removeEventListener('paste', doPaste);
+            current?.removeEventListener('copy', doCopy);
+        };
+    }, [doCopy, doPaste]);
+
+    const toggleDebugger = useCallback(() => {
+        setShowDebug((on) => !on);
+    }, []);
+
+    return (
+        <div className={styles.container}>
+            <div
+                className={cs(styles.outer, { apple2e: e, [styles.ready]: ready })}
+            >
+                <Screen screenRef={screenRef} />
+                {!e ? <LanguageCard cpu={cpu} io={io} rom={rom} slot={0} /> : null}
+                <Slinky io={io} slot={2} />
+                {!e ? <Videoterm io={io} slot={3} /> : null}
+                <Mouse cpu={cpu} screenRef={screenRef} io={io} slot={4} />
+                <ThunderClock io={io} slot={5} />
+                <Inset>
+                    <Drives cpu={cpu} io={io} sectors={sectors} enhanced={enhanced} ready={drivesReady} />
+                </Inset>
+                <ControlStrip apple2={apple2} e={e} toggleDebugger={toggleDebugger} />
+                <Inset>
+                    <Keyboard apple2={apple2} e={e} />
+                </Inset>
+                <ErrorModal error={error} setError={setError} />
+            </div>
+            {showDebug ? <Debugger apple2={apple2} /> : null}
+        </div>
+    );
+};
diff --git a/js/components/AudioControl.tsx b/js/components/AudioControl.tsx
new file mode 100644
index 0000000..ce68b53
--- /dev/null
+++ b/js/components/AudioControl.tsx
@@ -0,0 +1,51 @@
+import { h } from 'preact';
+import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
+import { ControlButton } from './ControlButton';
+import { OptionsContext } from './OptionsContext';
+import { Audio, SOUND_ENABLED_OPTION } from '../ui/audio';
+import { Apple2 as Apple2Impl } from '../apple2';
+
+/**
+ * AudioControl component properties.
+ */
+export interface AudioControlProps {
+    apple2: Apple2Impl | undefined;
+}
+
+/**
+ * Control that instantiates the Audio object and provides
+ * a control to mute and unmute audio.
+ *
+ * @param apple2 The Apple2 object
+ * @returns AudioControl component
+ */
+export const AudioControl = ({ apple2 }: AudioControlProps) => {
+    const [audioEnabled, setAudioEnabled] = useState(false);
+    const [audio, setAudio] = useState<Audio>();
+    const options = useContext(OptionsContext);
+
+    useEffect(() => {
+        if (apple2) {
+            const io = apple2.getIO();
+            const audio = new Audio(io);
+            options.addOptions(audio);
+            setAudio(audio);
+            setAudioEnabled(audio.isEnabled());
+        }
+    }, [apple2, options]);
+
+    const doToggleSound = useCallback(() => {
+        const on = !audio?.isEnabled();
+        options.setOption(SOUND_ENABLED_OPTION, on);
+        setAudioEnabled(on);
+    }, [audio, options]);
+
+    return (
+        <ControlButton
+            onClick={doToggleSound}
+            title="Toggle Sound"
+            disabled={!audio}
+            icon={audioEnabled ? 'volume-up' : 'volume-off'}
+        />
+    );
+};
diff --git a/js/components/BlockDisk.tsx b/js/components/BlockDisk.tsx
new file mode 100644
index 0000000..18053d9
--- /dev/null
+++ b/js/components/BlockDisk.tsx
@@ -0,0 +1,101 @@
+import { h } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import cs from 'classnames';
+import { BLOCK_FORMATS } from 'js/formats/types';
+import SmartPort from '../cards/smartport';
+import { BlockFileModal } from './BlockFileModal';
+import { DiskDragTarget } from './DiskDragTarget';
+import { DownloadModal } from './DownloadModal';
+import { ErrorModal } from './ErrorModal';
+
+import styles from './css/BlockDisk.module.css';
+
+/**
+ * Storage structure for drive state returned via callbacks.
+ */
+export interface BlockDiskData {
+    number: 1 | 2;
+    on: boolean;
+    name?: string;
+}
+
+/**
+ * Interface for BlockDisk.
+ */
+export interface BlockDiskProps extends BlockDiskData {
+    smartPort: SmartPort;
+}
+
+/**
+ * BlockDisk component
+ *
+ * Includes drive light, disk name and side, and UI for loading disks.
+ *
+ * @param smartPort SmartPort object
+ * @param number Drive 1 or 2
+ * @param on Active state
+ * @param name Disk name identifier
+ * @param side Disk side identifier
+ * @returns BlockDisk component
+ */
+export const BlockDisk = ({ smartPort, number, on, name }: BlockDiskProps) => {
+    const [modalOpen, setModalOpen] = useState(false);
+    const [downloadModalOpen, setDownloadModalOpen] = useState(false);
+    const [error, setError] = useState<unknown>();
+
+    const doClose = useCallback(() => {
+        setModalOpen(false);
+    }, []);
+
+    const onOpenModal = useCallback(() => {
+        setModalOpen(true);
+    }, []);
+
+    const doCloseDownload = useCallback(() => {
+        setDownloadModalOpen(false);
+    }, []);
+
+    const onOpenDownloadModal = useCallback(() => {
+        setDownloadModalOpen(true);
+    }, []);
+
+    return (
+        <DiskDragTarget
+            className={styles.disk}
+            storage={smartPort}
+            drive={number}
+            formats={BLOCK_FORMATS}
+            onError={setError}
+        >
+            <ErrorModal error={error} setError={setError} />
+            <BlockFileModal
+                smartPort={smartPort}
+                number={number}
+                onClose={doClose}
+                isOpen={modalOpen}
+            />
+            <DownloadModal
+                number={number}
+                massStorage={smartPort}
+                isOpen={downloadModalOpen}
+                onClose={doCloseDownload}
+            />
+            <div
+                id={`disk${number}`}
+                className={cs(styles.diskLight, { [styles.on]: on })}
+            />
+            <button title="Load Disk" onClick={onOpenModal}>
+                <i className="fas fa-folder-open" />
+            </button>
+            <button title="Save Disk" onClick={onOpenDownloadModal}>
+                <i className="fas fa-save" />
+            </button>
+            <div
+                id={`disk-label${number}`}
+                className={styles.diskLabel}
+            >
+                {name}
+            </div>
+        </DiskDragTarget>
+    );
+};
diff --git a/js/components/BlockFileModal.tsx b/js/components/BlockFileModal.tsx
new file mode 100644
index 0000000..8b25413
--- /dev/null
+++ b/js/components/BlockFileModal.tsx
@@ -0,0 +1,77 @@
+import { h, Fragment } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import { DriveNumber, BLOCK_FORMATS } from '../formats/types';
+import { ErrorModal } from './ErrorModal';
+import { FileChooser } from './FileChooser';
+import { Modal, ModalContent, ModalFooter } from './Modal';
+import { loadLocalBlockFile, getHashParts, setHashParts } from './util/files';
+import SmartPort from 'js/cards/smartport';
+import { useHash } from './hooks/useHash';
+import { noAwait } from './util/promises';
+
+import styles from './css/BlockFileModal.module.css';
+
+const DISK_TYPES: FilePickerAcceptType[] = [
+    {
+        description: 'Disk Images',
+        accept: { 'application/octet-stream': BLOCK_FORMATS.map(x => '.' + x) },
+    }
+];
+
+interface BlockFileModalProps {
+    isOpen: boolean;
+    smartPort: SmartPort;
+    number: DriveNumber;
+    onClose: (closeBox?: boolean) => void;
+}
+
+export const BlockFileModal = ({ smartPort, number, onClose, isOpen } : BlockFileModalProps) => {
+    const [handles, setHandles] = useState<FileSystemFileHandle[]>();
+    const [busy, setBusy] = useState<boolean>(false);
+    const [empty, setEmpty] = useState<boolean>(true);
+    const [error, setError] = useState<unknown>();
+    const hash = useHash();
+
+    const doCancel = useCallback(() => onClose(true), [onClose]);
+
+    const doOpen = useCallback(async () => {
+        const hashParts = getHashParts(hash);
+
+        if (handles?.length === 1) {
+            hashParts[number] = '';
+            setBusy(true);
+            try {
+                await loadLocalBlockFile(smartPort, number, await handles[0].getFile());
+            } catch (error) {
+                setError(error);
+            } finally {
+                setBusy(false);
+                onClose();
+            }
+        }
+
+        setHashParts(hashParts);
+    }, [handles, hash, smartPort, number, onClose]);
+
+    const onChange = useCallback((handles: FileSystemFileHandle[]) => {
+        setEmpty(handles.length === 0);
+        setHandles(handles);
+    }, []);
+
+    return (
+        <>
+            <Modal title="Open File" isOpen={isOpen} onClose={onClose}>
+                <ModalContent>
+                    <div className={styles.modalContent}>
+                        <FileChooser onChange={onChange} accept={DISK_TYPES} />
+                    </div>
+                </ModalContent>
+                <ModalFooter>
+                    <button onClick={doCancel}>Cancel</button>
+                    <button onClick={noAwait(doOpen)} disabled={busy || empty}>Open</button>
+                </ModalFooter>
+            </Modal>
+            <ErrorModal error={error} setError={setError} />
+        </>
+    );
+};
diff --git a/js/components/CPUMeter.tsx b/js/components/CPUMeter.tsx
new file mode 100644
index 0000000..0691911
--- /dev/null
+++ b/js/components/CPUMeter.tsx
@@ -0,0 +1,74 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Apple2 as Apple2Impl } from '../apple2';
+import type { Stats } from '../apple2';
+
+import styles from './css/CPUMeter.module.css';
+
+/**
+ * Interface for CPUMeter.
+ */
+export interface CPUMeterProps {
+    apple2: Apple2Impl | undefined;
+}
+
+/**
+ * A simple display that can cycle between emulator Khz
+ * performance, frames/second and rendered frames/second.
+ *
+ * @param apple2 Apple2 object
+ * @returns CPU Meter component
+ */
+export const CPUMeter = ({ apple2 }: CPUMeterProps) => {
+    const lastStats = useRef<Stats>({
+        frames: 0,
+        renderedFrames: 0,
+        cycles: 0,
+    });
+    const lastTime = useRef<number>(Date.now());
+    const [khz, setKhz] = useState<number>(0);
+    const [fps, setFps] = useState<number>(0);
+    const [rps, setRps] = useState<number>(0);
+    const [mode, setMode] = useState<number>(0);
+
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const { cycles, frames, renderedFrames } = lastStats.current;
+            const stats = apple2?.getStats();
+            const time = Date.now();
+            const delta = time - lastTime.current;
+            if (stats) {
+                setKhz(
+                    Math.floor(
+                        (stats.cycles - cycles) / delta
+                    )
+                );
+                setFps(
+                    Math.floor(
+                        (stats.frames - frames) / delta * 1000
+                    )
+                );
+                setRps(
+                    Math.floor(
+                        (stats.renderedFrames - renderedFrames) / delta * 1000
+                    )
+                );
+                lastStats.current = { ...stats };
+                lastTime.current = time;
+            }
+        }, 1000);
+        return () => clearInterval(interval);
+    }, [apple2]);
+
+    const onClick = useCallback(() => {
+        setMode((mode) => (mode + 1) % 3);
+    }, []);
+
+    return (
+        <div className={styles.khz} onClick={onClick}>
+            {mode === 0 && `${khz} Khz`}
+            {mode === 1 && `${fps} fps`}
+            {mode === 2 && `${rps} rps`}
+        </div>
+    );
+};
diff --git a/js/components/ControlButton.tsx b/js/components/ControlButton.tsx
new file mode 100644
index 0000000..b3ddfd7
--- /dev/null
+++ b/js/components/ControlButton.tsx
@@ -0,0 +1,29 @@
+import { h, JSX } from 'preact';
+import cs from 'classnames';
+
+import styles from './css/ControlButton.module.css';
+
+/**
+ * Interface for ControlButton.
+ */
+export interface ControlButtonProps {
+    icon: string;
+    title: string;
+    disabled?: boolean;
+    active?: boolean;
+    onClick: JSX.MouseEventHandler<HTMLButtonElement>;
+}
+
+/**
+ * Simple button with an icon, tooltip text and a callback.
+ *
+ * @param icon FontAwesome icon name
+ * @param title Tooltip text
+ * @param onClick Click callback
+ * @returns Control Button component
+ */
+export const ControlButton = ({ active, icon, title, onClick, ...props }: ControlButtonProps) => (
+    <button onClick={onClick} title={title} {...props} >
+        <i className={cs('fas', `fa-${icon}`, { [styles.active]: active })}></i>
+    </button>
+);
diff --git a/js/components/ControlStrip.tsx b/js/components/ControlStrip.tsx
new file mode 100644
index 0000000..d0fe6b9
--- /dev/null
+++ b/js/components/ControlStrip.tsx
@@ -0,0 +1,104 @@
+import { h } from 'preact';
+import { useCallback, useContext, useEffect, useState } from 'preact/hooks';
+import { CPUMeter } from './CPUMeter';
+import { Inset } from './Inset';
+import { useHotKey } from './hooks/useHotKey';
+import { AudioControl } from './AudioControl';
+import { OptionsModal} from './OptionsModal';
+import { OptionsContext } from './OptionsContext';
+import { Printer } from './Printer';
+import { ControlButton } from './ControlButton';
+import { Apple2 as Apple2Impl } from '../apple2';
+import { JoyStick } from '../ui/joystick';
+import { Screen, SCREEN_FULL_PAGE } from '../ui/screen';
+import { System } from '../ui/system';
+
+import styles from './css/ControlStrip.module.css';
+import Apple2IO from 'js/apple2io';
+
+const README = 'https://github.com/whscullin/apple2js#readme';
+
+interface ControlStripProps {
+    apple2: Apple2Impl | undefined;
+    e: boolean;
+    toggleDebugger: () => void;
+}
+
+/**
+ * Strip containing containing controls for various system
+ * characteristics, like CPU speed, audio, and the system
+ * options panel.
+ *
+ * @param apple2 Apple2 object
+ * @param e Whether or not this is a //e
+ * @returns ControlStrip component
+ */
+export const ControlStrip = ({ apple2, e, toggleDebugger }: ControlStripProps) => {
+    const [showOptions, setShowOptions] = useState(false);
+    const [io, setIO] = useState<Apple2IO>();
+    const options = useContext(OptionsContext);
+
+    useEffect(() => {
+        if (apple2) {
+            const io = apple2.getIO();
+            const vm = apple2.getVideoModes();
+            setIO(io);
+
+            const system = new System(io, e);
+            options.addOptions(system);
+
+            const joystick = new JoyStick(io);
+            options.addOptions(joystick);
+
+            const screen = new Screen(vm);
+            options.addOptions(screen);
+        }
+    }, [apple2, e, options]);
+
+    const doReset = useCallback(() =>
+        apple2?.reset()
+    , [apple2]);
+
+    const doReadme = useCallback(() =>
+        window.open(README, '_blank')
+    , []);
+
+    const doShowOptions = useCallback(() =>
+        setShowOptions(true)
+    , []);
+
+    const doCloseOptions = useCallback(() =>
+        setShowOptions(false)
+    , []);
+
+    const doToggleFullPage = useCallback(() =>
+        options.setOption(
+            SCREEN_FULL_PAGE,
+            !options.getOption(SCREEN_FULL_PAGE)
+        )
+    , [options]);
+
+    useHotKey('F2', doToggleFullPage);
+    useHotKey('F4', doShowOptions);
+    useHotKey('F12', doReset);
+
+    return (
+        <div className={styles.resetRow}>
+            <OptionsModal isOpen={showOptions} onClose={doCloseOptions} />
+            <Inset>
+                <CPUMeter apple2={apple2} />
+                <ControlButton onClick={toggleDebugger} title="Toggle Debugger" icon="bug" />
+                <AudioControl apple2={apple2} />
+                <Printer io={io} slot={1} />
+                <div style={{flexGrow: 1}} />
+                <ControlButton onClick={doReadme} title="About" icon="info" />
+                <ControlButton onClick={doShowOptions} title="Options (F4)" icon="cog" />
+            </Inset>
+            {e && (
+                <div className={styles.reset} onClick={doReset}>
+                    Reset
+                </div>
+            )}
+        </div>
+    );
+};
diff --git a/js/components/DiskDragTarget.tsx b/js/components/DiskDragTarget.tsx
new file mode 100644
index 0000000..6494795
--- /dev/null
+++ b/js/components/DiskDragTarget.tsx
@@ -0,0 +1,97 @@
+import { BLOCK_FORMATS, DISK_FORMATS, DriveNumber, FLOPPY_FORMATS, MassStorage } from 'js/formats/types';
+import { h, JSX, RefObject } from 'preact';
+import { useEffect, useRef } from 'preact/hooks';
+import {  loadLocalFile } from './util/files';
+import { spawn } from './util/promises';
+
+export interface DiskDragTargetProps<T> extends JSX.HTMLAttributes<HTMLDivElement> {
+    storage: MassStorage<T> | undefined;
+    drive?: DriveNumber;
+    formats: typeof FLOPPY_FORMATS
+        | typeof BLOCK_FORMATS
+        | typeof DISK_FORMATS;
+    dropRef?: RefObject<HTMLElement>;
+    onError: (error: unknown) => void;
+}
+
+export const DiskDragTarget = ({
+    storage,
+    drive,
+    dropRef,
+    formats,
+    onError,
+    children,
+    ...props
+}: DiskDragTargetProps<unknown>) => {
+    const ref = useRef<HTMLDivElement>(null);
+
+    useEffect(() => {
+        const div = dropRef?.current || ref.current;
+        if (div) {
+            const onDragOver = (event: DragEvent) => {
+                event.preventDefault();
+                const dt = event.dataTransfer;
+                if (dt) {
+                    if (Array.from(dt.items).every((item) => item.kind === 'file')) {
+                        dt.dropEffect = 'copy';
+                    } else {
+                        dt.dropEffect = 'none';
+                    }
+                }
+            };
+
+            const onDragEnd = (event: DragEvent) => {
+                const dt = event.dataTransfer;
+                if (dt?.items) {
+                    for (let i = 0; i < dt.items.length; i++) {
+                        dt.items.remove(i);
+                    }
+                } else {
+                    dt?.clearData();
+                }
+            };
+
+            const onDrop = (event: DragEvent) => {
+                event.preventDefault();
+                event.stopPropagation();
+                const targetDrive = drive ?? 1;  //TODO(whscullin) Maybe pick available drive
+
+                const dt = event.dataTransfer;
+                if (dt?.files.length === 1 && storage) {
+                    spawn(async () => {
+                        try {
+                            await loadLocalFile(storage, formats, targetDrive, dt.files[0]);
+                        } catch (e) {
+                            onError(e);
+                        }
+                    });
+                } else if (dt?.files.length === 2 && storage) {
+                    spawn(async () => {
+                        try {
+                            await loadLocalFile(storage, formats, 1, dt.files[0]);
+                            await loadLocalFile(storage, formats, 2, dt.files[1]);
+                        } catch (e) {
+                            onError(e);
+                        }
+                    });
+                }
+            };
+
+            div.addEventListener('dragover', onDragOver);
+            div.addEventListener('dragend', onDragEnd);
+            div.addEventListener('drop', onDrop);
+
+            return () => {
+                div.removeEventListener('dragover', onDragOver);
+                div.removeEventListener('dragend', onDragEnd);
+                div.removeEventListener('drop', onDrop);
+            };
+        }
+    }, [drive, dropRef, formats, onError, storage]);
+
+    return (
+        <div ref={ref} {...props}>
+            {children}
+        </div>
+    );
+};
diff --git a/js/components/DiskII.tsx b/js/components/DiskII.tsx
new file mode 100644
index 0000000..400aa83
--- /dev/null
+++ b/js/components/DiskII.tsx
@@ -0,0 +1,92 @@
+import { h } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import cs from 'classnames';
+import Disk2 from '../cards/disk2';
+import { ErrorModal } from './ErrorModal';
+import { FileModal } from './FileModal';
+
+import styles from './css/DiskII.module.css';
+import { DiskDragTarget } from './DiskDragTarget';
+import { FLOPPY_FORMATS } from 'js/formats/types';
+import { DownloadModal } from './DownloadModal';
+
+/**
+ * Storage structure for Disk II state returned via callbacks.
+ */
+export interface DiskIIData {
+    number: 1 | 2;
+    on: boolean;
+    name: string;
+    side?: string | undefined;
+}
+
+/**
+ * Interface for Disk II component.
+ */
+export interface DiskIIProps extends DiskIIData {
+    disk2: Disk2;
+}
+
+/**
+ * Disk II component
+ *
+ * Includes drive light, disk name and side, and UI for loading disks.
+ *
+ * @param disk2 Disk2 object
+ * @param number Drive 1 or 2
+ * @param on Active state
+ * @param name Disk name identifier
+ * @param side Disk side identifier
+ * @returns DiskII component
+ */
+export const DiskII = ({ disk2, number, on, name, side }: DiskIIProps) => {
+    const label = side ? `${name} - ${side}` : name;
+    const [modalOpen, setModalOpen] = useState(false);
+    const [downloadModalOpen, setDownloadModalOpen] = useState(false);
+    const [error, setError] = useState<unknown>();
+
+    const doClose = useCallback(() => {
+        setModalOpen(false);
+    }, []);
+
+    const onOpenModal = useCallback(() => {
+        setModalOpen(true);
+    }, []);
+
+    const doCloseDownload = useCallback(() => {
+        setDownloadModalOpen(false);
+    }, []);
+
+    const onOpenDownloadModal = useCallback(() => {
+        setDownloadModalOpen(true);
+    }, []);
+
+    return (
+        <DiskDragTarget
+            className={styles.disk}
+            storage={disk2}
+            drive={number}
+            formats={FLOPPY_FORMATS}
+            onError={setError}
+        >
+            <FileModal disk2={disk2} number={number} onClose={doClose} isOpen={modalOpen} />
+            <DownloadModal
+                number={number}
+                massStorage={disk2}
+                isOpen={downloadModalOpen}
+                onClose={doCloseDownload}
+            />
+            <ErrorModal error={error} setError={setError} />
+            <div className={cs(styles.diskLight, { [styles.on]: on })} />
+            <button title="Load Disk" onClick={onOpenModal}>
+                <i className="fas fa-folder-open" />
+            </button>
+            <button title="Save Disk" onClick={onOpenDownloadModal}>
+                <i className="fas fa-save" />
+            </button>
+            <div className={styles.diskLabel}>
+                {label}
+            </div>
+        </DiskDragTarget>
+    );
+};
diff --git a/js/components/DownloadModal.tsx b/js/components/DownloadModal.tsx
new file mode 100644
index 0000000..fd337bb
--- /dev/null
+++ b/js/components/DownloadModal.tsx
@@ -0,0 +1,71 @@
+import { h, Fragment } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { DriveNumber, MassStorage } from '../formats/types';
+import { Modal, ModalContent, ModalFooter } from './Modal';
+
+import styles from './css/DownloadModal.module.css';
+
+interface DownloadModalProps {
+    isOpen: boolean;
+    massStorage: MassStorage<unknown>;
+    number: DriveNumber;
+    onClose: (closeBox?: boolean) => void;
+}
+
+export const DownloadModal = ({ massStorage, number, onClose, isOpen } : DownloadModalProps) => {
+    const [href, setHref] = useState('');
+    const [downloadName, setDownloadName] = useState('');
+    const doCancel = useCallback(() => onClose(true), [onClose]);
+
+    useEffect(() => {
+        if (isOpen) {
+            const storageData = massStorage.getBinary(number);
+            if (storageData) {
+                const { ext, data } = storageData;
+                const { name } = storageData.metadata;
+                if (data.byteLength) {
+                    const blob = new Blob(
+                        [data],
+                        { type: 'application/octet-stream' }
+                    );
+                    const href = window.URL.createObjectURL(blob);
+                    setHref(href);
+                    setDownloadName(`${name}.${ext}`);
+                    return;
+                }
+            }
+            setHref('');
+            setDownloadName('');
+        }
+    }, [isOpen, number, massStorage]);
+
+    return (
+        <>
+            <Modal title="Save File" isOpen={isOpen} onClose={onClose}>
+                <ModalContent>
+                    <div className={styles.modalContent}>
+                        { href
+                            ? (
+                                <>
+                                    <span>Disk Name: {downloadName}</span>
+                                    <a
+                                        role="button"
+                                        href={href}
+                                        download={downloadName}
+                                    >
+                                        Download
+                                    </a>
+                                </>
+                            ) : (
+                                <span>No Download Available</span>
+                            )
+                        }
+                    </div>
+                </ModalContent>
+                <ModalFooter>
+                    <button onClick={doCancel}>Close</button>
+                </ModalFooter>
+            </Modal>
+        </>
+    );
+};
diff --git a/js/components/Drives.tsx b/js/components/Drives.tsx
new file mode 100644
index 0000000..c44d6e2
--- /dev/null
+++ b/js/components/Drives.tsx
@@ -0,0 +1,200 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import Disk2, { Callbacks } from '../cards/disk2';
+import Apple2IO from '../apple2io';
+import { DiskII, DiskIIData } from './DiskII';
+import SmartPort from 'js/cards/smartport';
+import CPU6502 from 'js/cpu6502';
+import { BlockDisk } from './BlockDisk';
+import { ErrorModal } from './ErrorModal';
+import { ProgressModal } from './ProgressModal';
+import { loadHttpUnknownFile, getHashParts, loadJSON, SmartStorageBroker } from './util/files';
+import { useHash } from './hooks/useHash';
+import { DISK_FORMATS, DriveNumber, SupportedSectors } from 'js/formats/types';
+import { spawn, Ready } from './util/promises';
+
+import styles from './css/Drives.module.css';
+import { DiskDragTarget } from './DiskDragTarget';
+
+/**
+ * Storage device storage
+ */
+interface StorageDevices {
+    disk2: Disk2;
+    smartPort: SmartPort;
+    smartStorageBroker: SmartStorageBroker;
+}
+
+/**
+ * Interface for Drives component.
+ */
+export interface DrivesProps {
+    cpu: CPU6502 | undefined;
+    io: Apple2IO | undefined;
+    enhanced: boolean;
+    sectors: SupportedSectors;
+    ready: Ready;
+}
+
+/**
+ * Drive interface component. Presents the interface to load disks.
+ * Provides the callback to the Disk2 and SmartPort objects to update
+ * the DiskII and BlockDisk components.
+ * Handles initial loading of disks specified in the hash.
+ *
+ * @cpu CPU object
+ * @param io Apple I/O object
+ * @param sectors 13 or 16 sector rom mode
+ * @enhanced Whether to create a SmartPort ROM device
+ * @ready Signal disk availability
+ * @returns Drives component
+ */
+export const Drives = ({ cpu, io, sectors, enhanced, ready }: DrivesProps) => {
+    const [current, setCurrent] = useState(0);
+    const [error, setError] = useState<unknown>();
+    const [total, setTotal] = useState(0);
+    const bodyRef = useRef(document.body);
+    const onProgress = useCallback((current: number, total: number) => {
+        setCurrent(current);
+        setTotal(total);
+    }, []);
+
+    const [storageDevices, setStorageDevices] = useState<StorageDevices>();
+
+    const [data1, setData1] = useState<DiskIIData>({
+        on: false,
+        number: 1,
+        name: 'Disk 1',
+    });
+    const [data2, setData2] = useState<DiskIIData>({
+        on: false,
+        number: 2,
+        name: 'Disk 2',
+    });
+    const [smartData1, setSmartData1] = useState<DiskIIData>({
+        on: false,
+        number: 1,
+        name: 'HD 1'
+    });
+    const [smartData2, setSmartData2] = useState<DiskIIData>({
+        on: false,
+        number: 2,
+        name: 'HD 2'
+    });
+
+    const hash = useHash();
+
+    useEffect(() => {
+        if (storageDevices) {
+            const { smartStorageBroker, disk2 } = storageDevices;
+            const hashParts = getHashParts(hash);
+            const controllers: AbortController[] = [];
+            let loading = 0;
+            for (const drive of [1, 2] as DriveNumber[]) {
+                if (hashParts && hashParts[drive]) {
+                    const hashPart = decodeURIComponent(hashParts[drive]);
+                    const isHttp = hashPart.match(/^https?:/i);
+                    const isJson = hashPart.match(/\.json$/i);
+                    if (isHttp && !isJson) {
+                        loading++;
+                        controllers.push(spawn(async (signal) => {
+                            try {
+                                await loadHttpUnknownFile(
+                                    smartStorageBroker,
+                                    drive,
+                                    hashPart,
+                                    signal,
+                                    onProgress);
+                            } catch (e) {
+                                setError(e);
+                            }
+                            if (--loading === 0) {
+                                ready.onReady();
+                            }
+                            setCurrent(0);
+                            setTotal(0);
+                        }));
+                    } else {
+                        const url = isHttp ? hashPart : `json/disks/${hashPart}.json`;
+                        loadJSON(disk2, drive, url).catch((e) => setError(e));
+                    }
+                }
+            }
+            if (!loading) {
+                ready.onReady();
+            }
+            return () => controllers.forEach((controller) => controller.abort());
+        }
+    }, [hash, onProgress, ready, storageDevices]);
+
+    useEffect(() => {
+        const setData = [setData1, setData2];
+        const setSmartData = [setSmartData1, setSmartData2];
+        const callbacks: Callbacks = {
+            driveLight: (drive, on) => {
+                setData[drive - 1]?.(data => ({ ...data, on }));
+            },
+            label: (drive, name, side) => {
+                setData[drive - 1]?.(data => ({
+                    ...data,
+                    name: name ?? `Disk ${drive}`,
+                    side,
+                }));
+            },
+            dirty: () => {
+                // do nothing
+            }
+        };
+
+        const smartPortCallbacks: Callbacks = {
+            driveLight: (drive, on) => {
+                setSmartData[drive - 1]?.(data => ({ ...data, on }));
+            },
+            label: (drive, name, side) => {
+                setSmartData[drive - 1]?.(data => ({
+                    ...data,
+                    name: name ?? `HD ${drive}`,
+                    side,
+                }));
+            },
+            dirty: () => {/* Unused */ }
+        };
+
+        if (cpu && io) {
+            const disk2 = new Disk2(io, callbacks, sectors);
+            io.setSlot(6, disk2);
+            const smartPort = new SmartPort(cpu, smartPortCallbacks, { block: !enhanced });
+            io.setSlot(7, smartPort);
+
+            const smartStorageBroker = new SmartStorageBroker(disk2, smartPort);
+            setStorageDevices({ disk2, smartPort, smartStorageBroker });
+        }
+    }, [cpu, enhanced, io, sectors]);
+
+    if (!storageDevices) {
+        return null;
+    }
+
+    const { disk2, smartPort, smartStorageBroker } = storageDevices;
+
+    return (
+        <DiskDragTarget
+            storage={smartStorageBroker}
+            dropRef={bodyRef}
+            className={styles.drives}
+            onError={setError}
+            formats={DISK_FORMATS}
+        >
+            <ProgressModal current={current} total={total} title="Loading..." />
+            <ErrorModal error={error} setError={setError} />
+            <div className={styles.driveBay}>
+                <DiskII disk2={disk2} {...data1} />
+                <DiskII disk2={disk2} {...data2} />
+            </div>
+            <div className={styles.driveBay}>
+                <BlockDisk smartPort={smartPort} {...smartData1} />
+                <BlockDisk smartPort={smartPort} {...smartData2} />
+            </div>
+        </DiskDragTarget>
+    );
+};
diff --git a/js/components/ErrorModal.tsx b/js/components/ErrorModal.tsx
new file mode 100644
index 0000000..0c0b7bc
--- /dev/null
+++ b/js/components/ErrorModal.tsx
@@ -0,0 +1,47 @@
+import { h } from 'preact';
+import { useCallback } from 'preact/hooks';
+import { Modal, ModalContent, ModalFooter } from './Modal';
+
+import styles from './css/ErrorModal.module.css';
+
+export interface ErrorProps {
+    error: unknown | undefined;
+    setError: (error: string | undefined) => void;
+}
+
+export const ErrorModal = ({ error, setError }: ErrorProps) => {
+    const onClose = useCallback(() => setError(undefined), [setError]);
+    let errorStr = null;
+    if (error) {
+        if (error instanceof Error) {
+            errorStr = error.message;
+        } else if (typeof error === 'string') {
+            errorStr = error;
+        } else {
+            errorStr = 'Unknown Error';
+            console.error(error);
+        }
+    }
+
+    if (errorStr) {
+        return (
+            <Modal
+                title="Error"
+                icon="triangle-exclamation"
+                isOpen={true}
+                onClose={onClose}
+            >
+                <ModalContent>
+                    <div className={styles.errorModal}>
+                        {errorStr}
+                    </div>
+                </ModalContent>
+                <ModalFooter>
+                    <button onClick={onClose}>OK</button>
+                </ModalFooter>
+            </Modal>
+        );
+    } else {
+        return null;
+    }
+};
diff --git a/js/components/FileChooser.tsx b/js/components/FileChooser.tsx
new file mode 100644
index 0000000..e9d303c
--- /dev/null
+++ b/js/components/FileChooser.tsx
@@ -0,0 +1,200 @@
+import { h, Fragment } from 'preact';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import { noAwait } from './util/promises';
+
+export interface FilePickerAcceptType {
+    description?: string | undefined;
+    accept: Record<string, string | string[]>;
+}
+
+const ACCEPT_EVERYTHING_TYPE: FilePickerAcceptType = {
+    description: 'Any file',
+    accept: { '*/*': [] },
+};
+
+export interface FileChooserProps {
+    disabled?: boolean;
+    onChange: (handles: Array<FileSystemFileHandle>) => void;
+    accept?: FilePickerAcceptType[];
+    control?: typeof controlDefault;
+}
+
+const hasPicker = !!window.showOpenFilePicker;
+const controlDefault = hasPicker ? 'picker' : 'input';
+
+interface InputFileChooserProps {
+    disabled?: boolean;
+    onChange?: (files: FileList) => void;
+    accept?: FilePickerAcceptType[];
+}
+
+interface ExtraProps {
+    accept?: string;
+}
+
+const InputFileChooser = ({
+    disabled = false,
+    onChange = () => { /* do nothing */ },
+    accept = [],
+}: InputFileChooserProps) => {
+    const inputRef = useRef<HTMLInputElement>(null);
+    const filesRef = useRef<FileList>();
+
+    const onChangeInternal = useCallback(() => {
+        if (inputRef.current?.files) {
+            const newFiles = inputRef.current?.files;
+            if (filesRef.current !== newFiles) {
+                filesRef.current = newFiles;
+                onChange(newFiles);
+            }
+        }
+    }, [onChange]);
+
+    const extraProps = useMemo<ExtraProps>(() => {
+        // Accept all of the given MIME types and extensions. An argument
+        // could be made to throw out all of the MIME types and just keep
+        // the extensions, but this seemed to follow the intent in the
+        // spec:
+        //
+        // https://html.spec.whatwg.org/multipage/input.html#file-upload-state-(type=file)
+        //
+        // which allows pretty generous interpretations.
+        //
+        // Update(whscullin) - Adding the MIME type seems to block loading anything
+        // from iCloud when using Safari, so reverting to simply using extensions for
+        // now.
+        const newAccept = [];
+        for (const type of accept) {
+            for (const [/* typeString */, suffixes] of Object.entries(type.accept)) {
+                // newAccept.push(typeString);
+                if (Array.isArray(suffixes)) {
+                    newAccept.push(...suffixes);
+                } else {
+                    newAccept.push(suffixes);
+                }
+            }
+        }
+
+        const extraProps: { accept?: string } = {};
+        if (newAccept.length > 0) {
+            extraProps['accept'] = newAccept.join(',');
+        }
+
+        return extraProps;
+    }, [accept]);
+
+    return (
+        <input type="file" role='button' aria-label='Open file'
+            ref={inputRef}
+            onChange={onChangeInternal}
+            disabled={disabled}
+            {...extraProps} />
+    );
+};
+
+interface FilePickerChooserProps {
+    disabled?: boolean;
+    onChange?: (files: FileSystemFileHandle[]) => void;
+    accept?: FilePickerAcceptType[];
+}
+
+const FilePickerChooser = ({
+    disabled = false,
+    onChange = () => { /* do nothing */ },
+    accept = [ACCEPT_EVERYTHING_TYPE]
+}: FilePickerChooserProps) => {
+    const [busy, setBusy] = useState<boolean>(false);
+    const [selectedFilename, setSelectedFilename] = useState<string>();
+    const [fileHandles, setFileHandles] = useState<FileSystemFileHandle[]>();
+
+    const onClickInternal = useCallback(async () => {
+        if (busy) {
+            return;
+        }
+        setBusy(true);
+        try {
+            const pickedFiles = await window.showOpenFilePicker({
+                multiple: false,
+                excludeAcceptAllOption: true,
+                types: accept,
+            });
+            if (fileHandles !== pickedFiles) {
+                setFileHandles(pickedFiles);
+                onChange(pickedFiles);
+            }
+        } catch (e: unknown) {
+            console.error(e);
+        } finally {
+            setBusy(false);
+        }
+    }, [accept, busy, fileHandles, onChange]);
+
+    useEffect(() => {
+        setSelectedFilename(
+            fileHandles?.length
+                ? fileHandles[0].name
+                : 'No file selected');
+    }, [fileHandles]);
+
+    return (
+        <>
+            <button onClick={noAwait(onClickInternal)} disabled={disabled || busy}>
+                Choose File
+            </button>
+            &nbsp;
+            <span role="label">{selectedFilename}</span>
+        </>
+    );
+};
+
+/**
+ * File chooser component displayed as a button followed by the name of the
+ * chosen file (if any). When clicked, the button opens a native file chooser.
+ * If the browser supports the `window.showOpenFilePicker` function, this
+ * component uses it to open the file chooser. Otherwise, the component uses
+ * a regular file input element.
+ *
+ * Using `window.showOpenFilePicker` has the advantage of allowing read/write
+ * access to the file, whereas the regular input element only gives read
+ * access.
+ */
+export const FileChooser = ({
+    onChange,
+    control = controlDefault,
+    ...rest
+}: FileChooserProps) => {
+
+    const onChangeForInput = useCallback((files: FileList) => {
+        const handles: FileSystemFileHandle[] = [];
+        for (let i = 0; i < files.length; i++) {
+            const file = files.item(i);
+            if (file === null) {
+                continue;
+            }
+            handles.push({
+                kind: 'file',
+                name: file.name,
+                getFile: () => Promise.resolve(file),
+                createWritable: (_options) => Promise.reject('File not writable.'),
+                queryPermission: (descriptor) => Promise.resolve(descriptor === 'read' ? 'granted' : 'denied'),
+                requestPermission: (descriptor) => Promise.resolve(descriptor === 'read' ? 'granted' : 'denied'),
+                isSameEntry: (_unused) => Promise.resolve(false),
+                isDirectory: false,
+                isFile: true,
+            });
+        }
+        onChange(handles);
+    }, [onChange]);
+
+    const onChangeForPicker = useCallback((fileHandles: FileSystemFileHandle[]) => {
+        onChange(fileHandles);
+    }, [onChange]);
+
+    return control === 'picker'
+        ? (
+            <FilePickerChooser onChange={onChangeForPicker} {...rest} />
+        )
+        : (
+            <InputFileChooser onChange={onChangeForInput} {...rest} />
+        );
+};
diff --git a/js/components/FileModal.tsx b/js/components/FileModal.tsx
new file mode 100644
index 0000000..3a636d7
--- /dev/null
+++ b/js/components/FileModal.tsx
@@ -0,0 +1,158 @@
+import { h, Fragment, JSX } from 'preact';
+import { useCallback, useEffect, useState } from 'preact/hooks';
+import { DiskDescriptor, DriveNumber, FLOPPY_FORMATS, NibbleFormat } from '../formats/types';
+import { Modal, ModalContent, ModalFooter } from './Modal';
+import { loadLocalNibbleFile, loadJSON, getHashParts, setHashParts } from './util/files';
+import DiskII from '../cards/disk2';
+import { ErrorModal } from './ErrorModal';
+
+import { noAwait, spawn } from './util/promises';
+import { useHash } from './hooks/useHash';
+import { FileChooser, FilePickerAcceptType } from './FileChooser';
+
+import styles from './css/FileModal.module.css';
+
+const DISK_TYPES: FilePickerAcceptType[] = [
+    {
+        description: 'Disk Images',
+        accept: { 'application/octet-stream': FLOPPY_FORMATS.map(x => '.' + x) },
+    }
+];
+
+export type NibbleFileCallback = (
+    name: string,
+    fmt: NibbleFormat,
+    rawData: ArrayBuffer
+) => boolean;
+
+interface FileModalProps {
+    isOpen: boolean;
+    disk2: DiskII;
+    number: DriveNumber;
+    onClose: (closeBox?: boolean) => void;
+}
+
+interface IndexEntry {
+    filename: string;
+    name: string;
+    category: string;
+}
+
+export const FileModal = ({ disk2, number, onClose, isOpen }: FileModalProps) => {
+    const [busy, setBusy] = useState<boolean>(false);
+    const [empty, setEmpty] = useState<boolean>(true);
+    const [category, setCategory] = useState<string>();
+    const [handles, setHandles] = useState<FileSystemFileHandle[]>();
+    const [filename, setFilename] = useState<string>();
+    const [error, setError] = useState<unknown>();
+    const [index, setIndex] = useState<IndexEntry[]>();
+    const hash = useHash();
+
+    useEffect(() => {
+        spawn(async () => {
+            try {
+                const indexResponse = await fetch('json/disks/index.json');
+                const index = await indexResponse.json() as IndexEntry[];
+                setIndex(index);
+            } catch (error) {
+                setIndex([]);
+                setError(error);
+            }
+        });
+    }, []);
+
+    const doCancel = useCallback(() => onClose(true), [onClose]);
+
+    const doOpen = useCallback(async () => {
+        const hashParts = getHashParts(hash);
+        setBusy(true);
+
+        try {
+            if (handles?.length === 1) {
+                hashParts[number] = '';
+                await loadLocalNibbleFile(disk2, number, await handles[0].getFile());
+            }
+            if (filename) {
+                const name = filename.match(/\/([^/]+).json$/) || ['', ''];
+                hashParts[number] = name[1];
+                await loadJSON(disk2, number, filename);
+            }
+        } catch (e) {
+            setError(e);
+        } finally {
+            setHashParts(hashParts);
+            setBusy(false);
+            onClose();
+        }
+
+        setHashParts(hashParts);
+    }, [disk2, filename, number, onClose, handles, hash]);
+
+    const onChange = useCallback((handles: FileSystemFileHandle[]) => {
+        setEmpty(handles.length === 0);
+        setHandles(handles);
+    }, []);
+
+    const doSelectCategory = useCallback(
+        (event: JSX.TargetedMouseEvent<HTMLSelectElement>) =>
+            setCategory(event.currentTarget.value)
+        , []
+    );
+
+    const doSelectFilename = useCallback(
+        (event: JSX.TargetedMouseEvent<HTMLSelectElement>) => {
+            setEmpty(!event.currentTarget.value);
+            setFilename(event.currentTarget.value);
+        }, []
+    );
+
+    if (!index) {
+        return null;
+    }
+
+    const categories = index.reduce<Record<string, DiskDescriptor[]>>(
+        (
+            acc: Record<string, DiskDescriptor[]>,
+            disk: DiskDescriptor
+        ) => {
+            const category = disk.category || 'Misc';
+            acc[category] = [disk, ...(acc[category] || [])];
+
+            return acc;
+        },
+        {}
+    );
+    const categoryNames = Object.keys(categories).sort();
+
+    const disks = category ? categories[category].sort() : [];
+
+    return (
+        <>
+            <Modal title="Open File" isOpen={isOpen} onClose={onClose}>
+                <ModalContent>
+                    <div className={styles.loadModal}>
+                        <select multiple onChange={doSelectCategory}>
+                            {categoryNames.map((name) => (
+                                <option key={name}>{name}</option>
+                            ))}
+                        </select>
+                        <select multiple onChange={doSelectFilename}>
+                            {disks.map((disk) => (
+                                <option key={disk.filename} value={disk.filename}>
+                                    {disk.name}
+                                    {disk.disk ? ` - ${disk.disk}` : ''}
+                                </option>
+                            ))}
+                        </select>
+                    </div>
+                    <FileChooser onChange={onChange} accept={DISK_TYPES} />
+                </ModalContent>
+                <ModalFooter>
+                    <button onClick={doCancel}>Cancel</button>
+                    <button onClick={noAwait(doOpen)} disabled={busy || empty}>Open</button>
+                </ModalFooter>
+            </Modal>
+            <ErrorModal error={error} setError={setError} />
+        </>
+    );
+};
diff --git a/js/components/Header.tsx b/js/components/Header.tsx
new file mode 100644
index 0000000..841f68b
--- /dev/null
+++ b/js/components/Header.tsx
@@ -0,0 +1,30 @@
+import { h } from 'preact';
+
+import styles from './css/Header.module.css';
+
+const README = 'https://github.com/whscullin/apple2js#readme';
+
+/**
+ * Header component properties.
+ */
+export interface HeaderProps {
+    e: boolean;
+}
+
+/**
+ * Header component, which consists of a badge and title.
+ *
+ * @returns Header component
+ */
+export const Header = ({ e }: HeaderProps) => {
+    return (
+        <div className={styles.header}>
+            <a href={README} rel="noreferrer" target="_blank">
+                <img src="img/badge.png" className={styles.badge} />
+            </a>
+            <div className={styles.subtitle}>
+                An Apple {e ? '//e' : ']['} Emulator in JavaScript
+            </div>
+        </div>
+    );
+};
diff --git a/js/components/Inset.tsx b/js/components/Inset.tsx
new file mode 100644
index 0000000..31d8ee4
--- /dev/null
+++ b/js/components/Inset.tsx
@@ -0,0 +1,19 @@
+import { h, ComponentChildren, JSX } from 'preact';
+import cs from 'classnames';
+
+import styles from './css/Inset.module.css';
+
+interface InsetProps extends JSX.HTMLAttributes<HTMLDivElement> {
+    children: ComponentChildren;
+}
+
+/**
+ * Convenience component for a nice beveled border.
+ *
+ * @returns Inset component
+ */
+export const Inset = ({ children, className, ...props }: InsetProps) => (
+    <div className={cs(className, styles.inset)} {...props}>
+        {children}
+    </div>
+);
diff --git a/js/components/Keyboard.tsx b/js/components/Keyboard.tsx
new file mode 100644
index 0000000..4a4b126
--- /dev/null
+++ b/js/components/Keyboard.tsx
@@ -0,0 +1,266 @@
+import { h, Fragment, JSX } from 'preact';
+import cs from 'classnames';
+import { useCallback, useEffect, useMemo, useState } from 'preact/hooks';
+import { Apple2 as Apple2Impl } from '../apple2';
+import {
+    keys2,
+    keys2e,
+    mapMouseEvent,
+    keysAsTuples,
+    mapKeyboardEvent
+} from './util/keyboard';
+
+import styles from './css/Keyboard.module.css';
+
+/**
+ * Convenience function for massaging key labels for upper
+ * and lower case
+ *
+ * @param key Raw key label
+ * @returns Span representing that label
+ */
+const buildLabel = (key: string) => {
+    const small = key.length > 1 && !key.startsWith('&');
+    return (
+        <span
+            className={cs({[styles.small]: small})}
+            dangerouslySetInnerHTML={{ __html: key }}
+        />
+    );
+};
+
+/**
+ * Key properties
+ */
+interface KeyProps {
+    lower: string;
+    upper: string;
+    active: boolean;
+    pressed: boolean;
+    onMouseDown: (event: MouseEvent) => void;
+    onMouseUp: (event: MouseEvent) => void;
+}
+
+/**
+ * Individual Key components. Sets up DOM data attributes to be passed to mouse
+ * handlers
+ *
+ * @param lower Lower key symbol
+ * @param upper Upper key symbol
+ * @param active Active state for shift, control, lock
+ * @param pressed Pressed state
+ * @param onMouseDown mouse down callback
+ * @param onMouseUp mouse up callback
+ */
+export const Key = ({
+    lower,
+    upper,
+    active,
+    pressed,
+    onMouseDown,
+    onMouseUp
+}: KeyProps) => {
+    const keyName = lower.replace(/[&#;]/g, '');
+    const center =
+        lower === 'LOCK'
+            ? styles.vCenter2
+            : (upper === lower && upper.length > 1)
+                ? styles.vCenter
+                : '';
+    return (
+        <div
+            className={cs(
+                styles.key,
+                styles[`key-${keyName}`],
+                center,
+                {
+                    [styles.pressed]: pressed,
+                    [styles.active]: active,
+                },
+            )}
+            data-key1={lower}
+            data-key2={upper}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+        >
+            <div>
+                {buildLabel(upper)}
+                {upper !== lower && <><br />{buildLabel(lower)}</>}
+            </div>
+        </div>
+    );
+};
+
+/**
+ * Keyboard properties
+ */
+export interface KeyboardProps {
+    apple2: Apple2Impl | undefined;
+    e: boolean;
+}
+
+/**
+ * Keyboard component that can render an Apple ][ or //e keyboard
+ * and accept keyboard and mouse input. Relies heavily on the
+ * ancient keyboard css to achieve its appearance.
+ *
+ * @param apple2 Apple2 object
+ * @returns Keyboard component
+ */
+export const Keyboard = ({ apple2, e }: KeyboardProps) => {
+    const [pressed, setPressed] = useState<string[]>([]);
+    const [active, setActive] = useState<string[]>(['LOCK']);
+    const keys = useMemo(() => keysAsTuples(e ? keys2e : keys2 ), [e]);
+
+    // Set global keystroke handler
+    useEffect(() => {
+        const keyDown = (event: KeyboardEvent) => {
+            if (!apple2) {
+                return;
+            }
+
+            if (document.activeElement && document.activeElement !== document.body) {
+                return;
+            }
+
+            event.preventDefault();
+
+            const {key, keyCode, keyLabel} = mapKeyboardEvent(event, active.includes('LOCK'), active.includes('CTRL'));
+            setPressed(pressed => pressed.concat([keyLabel]));
+            setActive(active => active.concat([keyLabel]));
+
+            if (key === 'RESET') {
+                apple2.reset();
+                return;
+            }
+
+            const io = apple2.getIO();
+            if (key === 'OPEN_APPLE') {
+                io.buttonDown(0, true);
+                return;
+            }
+            if (key === 'CLOSED_APPLE') {
+                io.buttonDown(1, true);
+                return;
+            }
+
+            if (keyCode !== 0xff) {
+                apple2.getIO().keyDown(keyCode);
+            }
+        };
+        const keyUp = (event: KeyboardEvent) => {
+            if (!apple2) {
+                return;
+            }
+            const {key, keyLabel} = mapKeyboardEvent(event);
+            setPressed(pressed => pressed.filter(k => k !== keyLabel));
+            setActive(active => active.filter(k => k !== keyLabel));
+
+            const io = apple2.getIO();
+            if (key === 'OPEN_APPLE') {
+                io.buttonDown(0, false);
+            }
+            if (key === 'CLOSED_APPLE') {
+                io.buttonDown(1, false);
+            }
+            apple2.getIO().keyUp();
+        };
+        document.addEventListener('keydown', keyDown);
+        document.addEventListener('keyup', keyUp);
+
+        return () => {
+            document.removeEventListener('keydown', keyDown);
+            document.removeEventListener('keyup', keyUp);
+        };
+    }, [apple2, active]);
+
+    const onMouseDown = useCallback(
+        (event: JSX.TargetedMouseEvent<HTMLElement>) => {
+            if (!apple2) {
+                return;
+            }
+            // Sometimes control-clicking will open a menu, so don't do that.
+            event.preventDefault();
+            const toggleActive = (key: string) => {
+                if (!active.includes(key)) {
+                    setActive([...active, key]);
+                    return true;
+                }
+                setActive(active.filter(x => x !== key));
+                return false;
+            };
+
+            const io = apple2.getIO();
+            const { keyCode, key, keyLabel } = mapMouseEvent(
+                event,
+                active.includes('SHIFT'),
+                active.includes('CTRL'),
+                active.includes('LOCK'),
+                true
+            );
+            if (keyCode !== 0xff) {
+                io.keyDown(keyCode);
+            } else if (key) {
+                switch (key) {
+                    case 'SHIFT':
+                    case 'CTRL':
+                    case 'LOCK':
+                        toggleActive(key);
+                        break;
+                    case 'RESET':
+                        apple2.reset();
+                        break;
+                    case 'OPEN_APPLE':
+                        io.buttonDown(0, toggleActive(key));
+                        toggleActive(key);
+                        break;
+                    case 'CLOSED_APPLE':
+                        io.buttonDown(1, toggleActive(key));
+                        toggleActive(key);
+                        break;
+                    default:
+                        break;
+                }
+            }
+            setPressed([...pressed, keyLabel]);
+        },
+        [apple2, active, pressed]
+    );
+
+    const onMouseUp = useCallback(
+        (event: JSX.TargetedMouseEvent<HTMLElement>) => {
+            const { keyLabel } = mapMouseEvent(
+                event,
+                active.includes('SHIFT'),
+                active.includes('CTRL'),
+                active.includes('LOCK'),
+                true
+            );
+            apple2?.getIO().keyUp();
+            setPressed(pressed.filter(x => x !== keyLabel));
+        },
+        [apple2, active, pressed]
+    );
+
+    const bindKey = ([lower, upper]: [string, string]) =>
+        <Key
+            lower={lower}
+            upper={upper}
+            active={active.includes(lower)}
+            pressed={pressed.includes(lower)}
+            onMouseDown={onMouseDown}
+            onMouseUp={onMouseUp}
+        />;
+
+    const rows = keys.map((row, idx) =>
+        <div key={idx} className={cs(styles.row, styles[`row${idx}`])}>
+            {row.map(bindKey)}
+        </div>
+    );
+
+    return (
+        <div className={styles.keyboard}>
+            {rows}
+        </div>
+    );
+};
diff --git a/js/components/LanguageCard.tsx b/js/components/LanguageCard.tsx
new file mode 100644
index 0000000..1370870
--- /dev/null
+++ b/js/components/LanguageCard.tsx
@@ -0,0 +1,35 @@
+import CPU6502 from 'js/cpu6502';
+import { Memory } from 'js/types';
+import { useEffect } from 'preact/hooks';
+import Apple2IO, { slot } from '../apple2io';
+import LanguageCardImpl from '../cards/langcard';
+
+/**
+ * Language Card component properties
+ */
+export interface LanguageCardProps {
+    io: Apple2IO | undefined;
+    cpu: CPU6502 | undefined;
+    rom: Memory | undefined;
+    slot: slot;
+}
+
+/**
+ * Language card component. Adds 16KB of memory.
+ *
+ * @param cpu 6502 object
+ * @param io Apple2IO object
+ * @param slot Slot to register card in
+ * @returns LanguageCard component
+ */
+export const LanguageCard = ({ cpu, io, rom, slot }: LanguageCardProps) => {
+    useEffect(() => {
+        if (io && cpu && rom) {
+            const lc = new LanguageCardImpl(rom);
+            io.setSlot(slot, lc);
+            cpu.addPageHandler(lc);
+        }
+    }, [io, cpu, rom, slot]);
+
+    return null;
+};
diff --git a/js/components/Modal.tsx b/js/components/Modal.tsx
new file mode 100644
index 0000000..3fc044a
--- /dev/null
+++ b/js/components/Modal.tsx
@@ -0,0 +1,142 @@
+import { h, ComponentChildren } from 'preact';
+import { createPortal } from 'preact/compat';
+import { useCallback } from 'preact/hooks';
+import { useHotKey } from './hooks/useHotKey';
+
+import styles from './css/Modal.module.css';
+
+/**
+ * ModalOverlay creates a semi-transparent overlay in which the
+ * modal is centered.
+ *
+ * @returns ModalOverlay component
+ */
+export const ModalOverlay = ({ children }: { children: ComponentChildren }) => {
+    return (
+        <div className={styles.modalOverlay}>
+            {children}
+        </div>
+    );
+};
+
+/**
+ * ModalContent provides a styled container for modal content
+ *
+ * @returns ModalContent component
+ */
+export const ModalContent = ({ children }: { children: ComponentChildren }) => {
+    return (
+        <div className={styles.modalContent}>
+            {children}
+        </div>
+    );
+};
+
+/**
+ * ModalFooter provides a right-aligned container for modal buttons.
+ *
+ * @returns ModalFooter component
+ */
+export const ModalFooter = ({ children }: { children: ComponentChildren }) => {
+    return (
+        <footer className={styles.modalFooter}>
+            {children}
+        </footer>
+    );
+};
+
+/**
+ * ModalCloseButton component properties
+ */
+interface ModalCloseButtonProp {
+    onClose: (closeBox?: boolean) => void;
+}
+
+/**
+ * Renders a close button and registers a global Escape key
+ * hook to trigger it.
+ *
+ * @param onClose Close callback
+ * @returns ModalClose component
+ */
+export const ModalCloseButton = ({ onClose }: ModalCloseButtonProp) => {
+    const doClose = useCallback(() => onClose(true), [onClose]);
+    useHotKey('Escape', doClose);
+
+    return (
+        <button onClick={doClose} title="Close">
+            {'\u2715'}
+        </button>
+    );
+};
+
+type OnCloseCallback = (closeBox?: boolean) => void;
+
+/**
+ * ModalHeader component properties
+ */
+
+export interface ModalHeaderProps {
+    onClose?: OnCloseCallback;
+    title: string;
+    icon?: string;
+}
+
+/**
+ * Header used internally for Modal component
+ *
+ * @param onClose Close callback
+ * @param title Modal title
+ * @returns ModalHeader component
+ */
+export const ModalHeader = ({ onClose, title, icon }: ModalHeaderProps) => {
+    return (
+        <header className={styles.modalHeader}>
+            <span className={styles.modalTitle}>
+                {icon && <i className={`fa-solid fa-${icon}`} role="img" />}
+                {' '}
+                {title}
+            </span>
+            {onClose && <ModalCloseButton onClose={onClose} />}
+        </header>
+    );
+};
+
+/**
+ * Modal component properties
+ */
+export interface ModalProps {
+    onClose?: (closeBox?: boolean) => void;
+    isOpen: boolean;
+    title: string;
+    children: ComponentChildren;
+    icon?: string;
+}
+
+/**
+ * Very simple modal component, provides a transparent overlay, title bar
+ * with optional close box if onClose is provided. ModalContent and
+ * ModalFooter components are provided for convenience but not required.
+ *
+ * @param isOpen true to show modal
+ * @param title Modal title
+ * @param onClose Close callback
+ * @returns Modal component
+ */
+export const Modal = ({
+    isOpen,
+    children,
+    title,
+    ...props
+}: ModalProps) => {
+    return (
+        isOpen ? createPortal((
+            <ModalOverlay>
+                <div className={styles.modal} role="dialog">
+                    {title && <ModalHeader title={title} {...props} />}
+                    {children}
+                </div>
+            </ModalOverlay>
+        ), document.body) : null
+    );
+};
diff --git a/js/components/Mouse.tsx b/js/components/Mouse.tsx
new file mode 100644
index 0000000..11e00f5
--- /dev/null
+++ b/js/components/Mouse.tsx
@@ -0,0 +1,37 @@
+import { RefObject } from 'preact';
+import Apple2IO, { slot } from '../apple2io';
+import { MouseUI } from '../ui/mouse';
+import MouseCard from '../cards/mouse';
+import CPU6502 from '../cpu6502';
+import { useEffect } from 'preact/hooks';
+
+/**
+ * Mouse component properties.
+ */
+export interface MouseProps {
+    cpu: CPU6502 | undefined;
+    io: Apple2IO | undefined;
+    screenRef: RefObject<HTMLCanvasElement>;
+    slot: slot;
+}
+
+/**
+ * Mouse card component that adds a simple mouse driver.
+ *
+ * @param cpu CPU6502 object
+ * @param screen Screen element reference
+ * @param io Apple2IO object
+ * @param slot Slot to register card in
+ * @returns Mouse component
+ */
+export const Mouse = ({ cpu, screenRef, io, slot }: MouseProps) => {
+    useEffect(() => {
+        if (cpu && io && screenRef.current) {
+            const mouseUI = new MouseUI(screenRef.current);
+            const mouse = new MouseCard(cpu, mouseUI);
+            io.setSlot(slot, mouse);
+        }
+    }, [cpu, io, screenRef, slot]);
+
+    return null;
+};
diff --git a/js/components/OptionsContext.tsx b/js/components/OptionsContext.tsx
new file mode 100644
index 0000000..d9ac225
--- /dev/null
+++ b/js/components/OptionsContext.tsx
@@ -0,0 +1,7 @@
+import { createContext } from 'preact';
+import { Options } from '../options';
+
+/**
+ * Context for getting, setting and configuring options
+ */
+export const OptionsContext = createContext(new Options());
diff --git a/js/components/OptionsModal.tsx b/js/components/OptionsModal.tsx
new file mode 100644
index 0000000..7a02783
--- /dev/null
+++ b/js/components/OptionsModal.tsx
@@ -0,0 +1,168 @@
+import { h, Fragment, JSX } from 'preact';
+import { useCallback, useContext } from 'preact/hooks';
+import { Modal, ModalContent, ModalFooter } from './Modal';
+import { OptionsContext } from './OptionsContext';
+import {
+    BOOLEAN_OPTION,
+    SELECT_OPTION,
+    BooleanOption,
+    Option,
+    OptionSection,
+    SelectOption,
+} from '../options';
+
+import styles from './css/OptionsModal.module.css';
+
+/**
+ * Boolean property interface
+ */
+interface BooleanProps {
+    option: BooleanOption;
+    value: boolean;
+    setValue: (name: string, value: boolean) => void;
+}
+
+/**
+ *
+ * @param option Boolean option
+ * @param value Current value
+ * @param setValue Value setter
+ * @returns Boolean component
+ */
+const Boolean = ({ option, value, setValue } : BooleanProps) => {
+    const { label, name } = option;
+    const onChange = useCallback(
+        (event: JSX.TargetedMouseEvent<HTMLInputElement>) =>
+            setValue(name, event.currentTarget.checked)
+        , [name, setValue]
+    );
+
+    return (
+        <li>
+            <input
+                type="checkbox"
+                checked={value}
+                onChange={onChange}
+            />
+            <label>{label}</label>
+        </li>
+    );
+};
+
+/**
+ * Select property interface
+ */
+interface SelectProps {
+    option: SelectOption;
+    value: string;
+    setValue: (name: string, value: string) => void;
+}
+
+/**
+ * Select component that provides a dropdown to choose between
+ * options.
+ *
+ * @param option Select option
+ * @param value Current value
+ * @param setValue Value setter
+ * @returns Select component
+ */
+const Select = ({ option, value, setValue } : SelectProps) => {
+    const { label, name } = option;
+    const onChange = useCallback(
+        (event: JSX.TargetedMouseEvent<HTMLSelectElement>) => {
+            setValue(name, event.currentTarget.value);
+        },
+        [name, setValue]
+    );
+
+    const makeOption = (option: { name: string; value: string }) => (
+        <option selected={option.value === value} value={option.value}>
+            {option.name}
+        </option>
+    );
+
+    return (
+        <li>
+            <select onChange={onChange}>
+                {option.values.map(makeOption)}
+            </select>
+            <label>{label}</label>
+        </li>
+    );
+};
+
+/**
+ * OptionsModal properties
+ */
+export interface OptionsModalProps {
+    isOpen: boolean;
+    onClose: (closeBox?: boolean) => void;
+}
+
+/**
+ * Modal to allow editing of various component provided
+ * options, like screen and cpu type
+ *
+ * @param Modal params
+ * @returns OptionsModal component
+ */
+export const OptionsModal = ({ isOpen, onClose }: OptionsModalProps) => {
+    const options = useContext(OptionsContext);
+    const sections = options.getSections();
+    const setValue = useCallback(( name: string, value: string | boolean ) => {
+        options.setOption(name, value);
+    }, [options]);
+
+    const makeOption = (option: Option) => {
+        const { name, type } = option;
+        const value = options.getOption(name);
+        switch (type) {
+            case BOOLEAN_OPTION:
+                return (
+                    <Boolean
+                        option={option as BooleanOption}
+                        value={value as boolean}
+                        setValue={setValue}
+                    />
+                );
+            case SELECT_OPTION:
+                return (
+                    <Select
+                        option={option as SelectOption}
+                        value={value as string}
+                        setValue={setValue}
+                    />
+                );
+            default:
+                break;
+        }
+    };
+
+    const makeSection = (section: OptionSection) => {
+        return (
+            <>
+                <h3>{section.name}</h3>
+                <ul>
+                    {section.options.map(makeOption)}
+                </ul>
+            </>
+        );
+    };
+
+    const doClose = useCallback(() => onClose(), [onClose]);
+
+    return (
+        <Modal title="Options" isOpen={isOpen} onClose={onClose}>
+            <ModalContent>
+                <div className={styles.optionsModal}>
+                    {sections.map(makeSection)}
+                </div>
+                <i>* Reload page to take effect</i>
+            </ModalContent>
+            <ModalFooter>
+                <button onClick={doClose}>Close</button>
+            </ModalFooter>
+        </Modal>
+    );
+};
diff --git a/js/components/Printer.tsx b/js/components/Printer.tsx
new file mode 100644
index 0000000..1e76b2b
--- /dev/null
+++ b/js/components/Printer.tsx
@@ -0,0 +1,107 @@
+import { h, Fragment } from 'preact';
+import { useCallback, useEffect, useMemo, useRef, useState } from 'preact/hooks';
+import Apple2IO, { slot } from 'js/apple2io';
+import Parallel, { ParallelOptions } from 'js/cards/parallel';
+import { Modal, ModalContent, ModalFooter } from './Modal';
+
+import styles from './css/Printer.module.css';
+import { ControlButton } from './ControlButton';
+import { byte } from 'js/types';
+
+export interface PrinterProps {
+    io: Apple2IO | undefined;
+    slot: slot;
+}
+
+export const Printer = ({ io, slot }: PrinterProps) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const [content, setContent] = useState('');
+    const raw = useRef(new Uint8Array(1024));
+    const rawLength = useRef(0);
+    const [href, setHref] = useState('');
+
+    const cbs = useMemo<ParallelOptions>(() => ({
+        putChar: (val: byte) => {
+            const ascii = val & 0x7f;
+            const visible = val >= 0x20;
+            const char = String.fromCharCode(ascii);
+
+            if (char === '\r') {
+                // Skip for once
+            } else if (char === '\t') {
+                // possibly not right due to tab stops
+                setContent((content) => content += '        ');
+            } else if (ascii === 0x04) {
+                setContent((content) => content = content.slice(0, -1));
+                return;
+            } else if (visible) {
+                setContent((content) => content += char);
+            }
+
+            raw.current[rawLength.current++] = val;
+            if (rawLength.current > raw.current.length) {
+                const newRaw = new Uint8Array(raw.current.length * 2);
+                newRaw.set(raw.current);
+                raw.current = newRaw;
+            }
+        }
+    }), [rawLength]);
+
+    useEffect(() => {
+        if (io) {
+            const parallel = new Parallel(cbs);
+            io.setSlot(slot, parallel);
+        }
+    }, [cbs, io, slot]);
+
+    useEffect(() => {
+        if (isOpen) {
+            const blob = new Blob(
+                [raw.current.slice(0, rawLength.current)],
+                { type: 'application/octet-stream' }
+            );
+            const href = window.URL.createObjectURL(blob);
+            setHref(href);
+        }
+    }, [isOpen]);
+
+    const onClear = useCallback(() => {
+        setContent('');
+        rawLength.current = 0;
+    }, []);
+    const onClose = useCallback(() => {
+        setIsOpen(false);
+    }, []);
+    const onOpen = useCallback(() => {
+        setIsOpen(true);
+    }, []);
+
+    return (
+        <>
+            <Modal isOpen={isOpen} onClose={onClose} title="Printer">
+                <ModalContent>
+                    <pre className={styles.printer} tabIndex={-1} >
+                        {content}
+                    </pre>
+                </ModalContent>
+                <ModalFooter>
+                    <a
+                        download="raw_printer_output.bin"
+                        href={href}
+                        role="button"
+                    >
+                        Download Raw
+                    </a>
+                    <button onClick={onClear}>Clear</button>
+                    <button onClick={onClose}>OK</button>
+                </ModalFooter>
+            </Modal>
+            <ControlButton
+                icon="print"
+                title="Printer"
+                onClick={onOpen}
+                active={content.length > 0}
+            />
+        </>
+    );
+};
diff --git a/js/components/ProgressModal.tsx b/js/components/ProgressModal.tsx
new file mode 100644
index 0000000..d16629a
--- /dev/null
+++ b/js/components/ProgressModal.tsx
@@ -0,0 +1,29 @@
+import { h } from 'preact';
+import { Modal, ModalContent } from './Modal';
+
+import styles from './css/ProgressModal.module.css';
+
+export interface ErrorProps {
+    title: string;
+    current: number | undefined;
+    total: number | undefined;
+}
+
+export const ProgressModal = ({ title, current, total } : ErrorProps) => {
+    if (current && total) {
+        return (
+            <Modal title={title} isOpen={true}>
+                <ModalContent>
+                    <div className={styles.progressContainer}>
+                        <div
+                            className={styles.progressBar}
+                            style={{ width: Math.floor(320 * (current / total)) }}
+                        />
+                    </div>
+                </ModalContent>
+            </Modal>
+        );
+    } else {
+        return null;
+    }
+};
diff --git a/js/components/Screen.tsx b/js/components/Screen.tsx
new file mode 100644
index 0000000..0ad61a9
--- /dev/null
+++ b/js/components/Screen.tsx
@@ -0,0 +1,32 @@
+import { h, Ref } from 'preact';
+
+import styles from './css/Screen.module.css';
+
+/**
+ * Screen properties
+ */
+export interface ScreenProps {
+    screenRef: Ref<HTMLCanvasElement>;
+}
+
+/**
+ * Styled canvas element that the Apple II display is
+ * rendered to by VideoModes.
+ *
+ * @param screen Canvas element reference
+ * @returns
+ */
+export const Screen = ({ screenRef }: ScreenProps) => {
+    return (
+        <div className={styles.display}>
+            <div className={styles.overscan}>
+                <canvas
+                    className={styles.screen}
+                    width="592"
+                    height="416"
+                    ref={screenRef}
+                />
+            </div>
+        </div>
+    );
+};
diff --git a/js/components/Slinky.tsx b/js/components/Slinky.tsx
new file mode 100644
index 0000000..95be075
--- /dev/null
+++ b/js/components/Slinky.tsx
@@ -0,0 +1,30 @@
+import { useEffect } from 'preact/hooks';
+import Apple2IO, { slot } from '../apple2io';
+import RAMFactor from '../cards/ramfactor';
+
+/**
+ * Slinky component properties
+ */
+export interface SlinkyProps {
+    io: Apple2IO | undefined;
+    slot: slot;
+}
+
+/**
+ * RAMFactory (Slinky) memory card component. Adds
+ * 1MB of slinky compatible memory.
+ *
+ * @param io Apple2IO object
+ * @param slot Slot to register card in
+ * @returns Slinky component
+ */
+export const Slinky = ({ io, slot }: SlinkyProps) => {
+    useEffect(() => {
+        if (io) {
+            const slinky = new RAMFactor(1024 * 1024);
+            io.setSlot(slot, slinky);
+        }
+    }, [io, slot]);
+
+    return null;
+};
diff --git a/js/components/Tabs.tsx b/js/components/Tabs.tsx
new file mode 100644
index 0000000..d66a109
--- /dev/null
+++ b/js/components/Tabs.tsx
@@ -0,0 +1,63 @@
+import { ComponentChild, ComponentChildren, h } from 'preact';
+import { useCallback, useState } from 'preact/hooks';
+import cs from 'classnames';
+
+import styles from './css/Tabs.module.css';
+
+export interface TabProps {
+    children: ComponentChildren;
+}
+
+export const Tab = ({ children }: TabProps) => {
+    return (
+        <div>
+            {children}
+        </div>
+    );
+};
+
+interface TabWrapperProps {
+    children: ComponentChild;
+    onClick: () => void;
+    selected: boolean;
+}
+
+const TabWrapper = ({ children, onClick, selected }: TabWrapperProps) => {
+    return (
+        <div onClick={onClick} className={cs(styles.tab, { [styles.selected]: selected })}>
+            {children}
+        </div>
+    );
+};
+
+export interface TabsProps {
+    children: ComponentChildren;
+    setSelected: (selected: number) => void;
+}
+
+export const Tabs = ({ children, setSelected }: TabsProps) => {
+    const [innerSelected, setInnerSelected] = useState(0);
+
+    const innerSetSelected = useCallback((idx: number) => {
+        setSelected(idx);
+        setInnerSelected(idx);
+    }, [setSelected]);
+
+    if (!Array.isArray(children)) {
+        return null;
+    }
+
+    return (
+        <div className={styles.tabs}>
+            {children.map((child, idx) =>
+                <TabWrapper
+                    key={idx}
+                    onClick={() => innerSetSelected(idx)}
+                    selected={idx === innerSelected}
+                >
+                    {child}
+                </TabWrapper>
+            )}
+        </div>
+    );
+};
diff --git a/js/components/ThunderClock.tsx b/js/components/ThunderClock.tsx
new file mode 100644
index 0000000..44c7705
--- /dev/null
+++ b/js/components/ThunderClock.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from 'preact/hooks';
+import Apple2IO, { slot } from '../apple2io';
+import ThunderClockCard from '../cards/thunderclock';
+
+/**
+ * ThunderClock component properties.
+ */
+export interface ThunderClockProps {
+    io: Apple2IO | undefined;
+    slot: slot;
+}
+
+/**
+ * ThunderClock card component.
+ *
+ * @param io Apple2IO object
+ * @param slot Slot to register card in
+ */
+export const ThunderClock = ({ io, slot }: ThunderClockProps) => {
+    useEffect(() => {
+        if (io) {
+            const clock = new ThunderClockCard();
+            io.setSlot(slot, clock);
+        }
+    }, [io, slot]);
+
+    return null;
+};
diff --git a/js/components/Videoterm.tsx b/js/components/Videoterm.tsx
new file mode 100644
index 0000000..bcb8056
--- /dev/null
+++ b/js/components/Videoterm.tsx
@@ -0,0 +1,20 @@
+import { useEffect } from 'preact/hooks';
+import Apple2IO, { slot } from 'js/apple2io';
+import VideotermImpl from 'js/cards/videoterm';
+/**
+ * VideoTerm component properties
+ */
+export interface VideotermProps {
+    io: Apple2IO | undefined;
+    slot: slot;
+}
+
+export const Videoterm = ({ io, slot }: VideotermProps ) => {
+    useEffect(() => {
+        if (io) {
+            const videoterm = new VideotermImpl();
+            io.setSlot(slot, videoterm);
+        }
+    }, [io, slot]);
+    return null;
+};
diff --git a/js/components/css/App.module.css b/js/components/css/App.module.css
new file mode 100644
index 0000000..ac7c77d
--- /dev/null
+++ b/js/components/css/App.module.css
@@ -0,0 +1,77 @@
+body {
+    margin: 16px 0;
+    font-size: 14px;
+    background-color: #c4c1a0; /* Pantone 453 */
+    font-family: sans-serif;
+}
+
+:global(.full-page) {
+    background: black;
+}
+
+a[role="button"] {
+    text-decoration: none;
+}
+
+button,
+a[role="button"],
+input[type="file"]::file-selector-button {
+    background: #44372c;
+    color: #fff;
+    padding: 2px 8px;
+    border: 1px outset #66594e;
+    border-radius: 3px;
+    font-size: 15px;
+    min-width: 75px;
+}
+
+button:hover,
+a[role="button"]:hover,
+input[type="file"]::file-selector-button {
+    background-color: #55473d;
+    border: 1px outset #66594e;
+}
+
+button:active,
+a[role="button"]:active,
+input[type="file"]::file-selector-button {
+    background-color: #22150a;
+    border: 1px outset #44372c;
+}
+
+button:focus,
+a[role="button"]:focus,
+input[type="file"]::file-selector-button {
+    outline: none;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+}
+
+input[type="checkbox"] {
+    appearance: none;
+    background-color: #65594d;
+    border: 1px inset #65594d;
+    padding: 7px;
+    top: 7px;
+    border-radius: 3px;
+    display: inline-block;
+    position: relative;
+}
+
+input[type="checkbox"]:checked {
+    background-color: #65594d;
+    border: 1px inset #65594d;
+    color: #0d0;
+}
+
+input[type="checkbox"]:checked::after {
+    content: "\2716";
+    font-size: 12px;
+    position: absolute;
+    top: 0;
+    left: 2px;
+    color: #0d0;
+}
diff --git a/js/components/css/Apple2.module.css b/js/components/css/Apple2.module.css
new file mode 100644
index 0000000..05d4ca2
--- /dev/null
+++ b/js/components/css/Apple2.module.css
@@ -0,0 +1,13 @@
+.container {
+    display: flex;
+    margin: auto;
+}
+
+.outer {
+    width: 620px;
+    display: none;
+}
+
+.outer.ready {
+    display: block;
+}
diff --git a/js/components/css/BlockDisk.module.css b/js/components/css/BlockDisk.module.css
new file mode 100644
index 0000000..a000b77
--- /dev/null
+++ b/js/components/css/BlockDisk.module.css
@@ -0,0 +1,40 @@
+.disk {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+}
+
+.diskLight {
+    margin: 5px;
+    background-image: url("../../../css/green-off-16.png");
+    background-size: 16px 16px;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+
+.diskLight.on {
+    background-image: url("../../../css/green-on-16.png");
+}
+
+.diskLabel {
+    color: #000;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-right: 0.5em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-grow: 1;
+    user-select: none;
+}
+
+@media only screen and (min-resolution: 1.25dppx) {
+    .diskLight {
+        background-image: url("../../../css/green-off-32.png");
+    }
+
+    .diskLight.on {
+        background-image: url("../../../css/green-on-32.png");
+    }
+}
diff --git a/js/components/css/BlockFileModal.module.css b/js/components/css/BlockFileModal.module.css
new file mode 100644
index 0000000..f238b28
--- /dev/null
+++ b/js/components/css/BlockFileModal.module.css
@@ -0,0 +1,3 @@
+.modalContent {
+    width: 320px;
+}
diff --git a/js/components/css/CPUMeter.module.css b/js/components/css/CPUMeter.module.css
new file mode 100644
index 0000000..b37cfa6
--- /dev/null
+++ b/js/components/css/CPUMeter.module.css
@@ -0,0 +1,15 @@
+.khz {
+    margin-right: 4px;
+    overflow: hidden;
+    padding: 4px;
+    font-family: Courier, monospace;
+    font-size: 12px;
+    width: 60px;
+    height: 15px;
+    text-align: right;
+    background: #000;
+    color: #0f0;
+    border: 2px inset #888;
+    border-radius: 4px;
+    user-select: none;
+}
diff --git a/js/components/css/ControlButton.module.css b/js/components/css/ControlButton.module.css
new file mode 100644
index 0000000..b333f9b
--- /dev/null
+++ b/js/components/css/ControlButton.module.css
@@ -0,0 +1,3 @@
+.active {
+    color: #0f0;
+}
diff --git a/js/components/css/ControlStrip.module.css b/js/components/css/ControlStrip.module.css
new file mode 100644
index 0000000..e28a5c1
--- /dev/null
+++ b/js/components/css/ControlStrip.module.css
@@ -0,0 +1,43 @@
+.reset {
+    background: #44372c;
+    border-left: 3px solid #65594d;
+    border-top: 3px solid #65594d;
+    border-right: 3px solid #110e0d;
+    border-bottom: 3px solid #110e0d;
+
+    /* border: 5px outset #66594E; */
+    border-radius: 3px;
+    color: white;
+    font: 9px Helvetica, sans-serif;
+    height: 36px;
+    padding: 0;
+    margin-left: 10px;
+    width: 36px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    user-select: none;
+}
+
+.reset:hover {
+    background: #44372c;
+    border: 3px outset #66594e;
+}
+
+.reset:active {
+    background-color: #22150a;
+    border-left: 3px solid #44372c;
+    border-top: 3px solid #44372c;
+    border-right: 3px solid #000;
+    border-bottom: 3px solid #000;
+}
+
+:global(.full-page) .reset {
+    display: none;
+}
+
+.resetRow {
+    align-items: center;
+    display: flex;
+    margin: 10px 0;
+}
diff --git a/js/components/css/DiskII.module.css b/js/components/css/DiskII.module.css
new file mode 100644
index 0000000..0ef2689
--- /dev/null
+++ b/js/components/css/DiskII.module.css
@@ -0,0 +1,40 @@
+.disk {
+    align-items: center;
+    display: flex;
+    flex-grow: 1;
+}
+
+.diskLight {
+    margin: 5px;
+    background-image: url("../../../css/red-off-16.png");
+    background-size: 16px 16px;
+    flex-shrink: 0;
+    width: 16px;
+    height: 16px;
+}
+
+.diskLight.on {
+    background-image: url("../../../css/red-on-16.png");
+}
+
+.diskLabel {
+    color: #000;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-right: 0.5em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    flex-grow: 1;
+    user-select: none;
+}
+
+@media only screen and (min-resolution: 1.25dppx) {
+    .diskLight {
+        background-image: url("../../../css/red-off-32.png");
+    }
+
+    .diskLight.on {
+        background-image: url("../../../css/red-on-32.png");
+    }
+}
diff --git a/js/components/css/DownloadModal.module.css b/js/components/css/DownloadModal.module.css
new file mode 100644
index 0000000..2f972f8
--- /dev/null
+++ b/js/components/css/DownloadModal.module.css
@@ -0,0 +1,7 @@
+.modalContent {
+    display: flex;
+    font-size: 1.1em;
+    justify-content: space-between;
+    padding: 10px 0;
+    width: 320px;
+}
diff --git a/js/components/css/Drives.module.css b/js/components/css/Drives.module.css
new file mode 100644
index 0000000..37ab8d8
--- /dev/null
+++ b/js/components/css/Drives.module.css
@@ -0,0 +1,10 @@
+.drives {
+    display: flex;
+    width: 100%;
+}
+
+.driveBay {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 50%;
+}
diff --git a/js/components/css/ErrorModal.module.css b/js/components/css/ErrorModal.module.css
new file mode 100644
index 0000000..83ac321
--- /dev/null
+++ b/js/components/css/ErrorModal.module.css
@@ -0,0 +1,5 @@
+.errorModal {
+    width: 320px;
+    font-size: 1.1em;
+    padding: 5px 11px;
+}
diff --git a/js/components/css/FileModal.module.css b/js/components/css/FileModal.module.css
new file mode 100644
index 0000000..4b85782
--- /dev/null
+++ b/js/components/css/FileModal.module.css
@@ -0,0 +1,5 @@
+.loadModal select {
+    width: 250px;
+    height: 300px;
+    font-size: 14px;
+}
diff --git a/js/components/css/Header.module.css b/js/components/css/Header.module.css
new file mode 100644
index 0000000..e464b72
--- /dev/null
+++ b/js/components/css/Header.module.css
@@ -0,0 +1,33 @@
+.header {
+    width: 580px;
+    margin: auto;
+}
+
+@media all and (display-mode: minimal-ui) {
+    .header {
+        display: none;
+    }
+}
+
+.header img {
+    border: none;
+}
+
+:global(.full-page) .header {
+    display: none;
+}
+
+.badge {
+    cursor: pointer;
+    user-select: none;
+}
+
+.subtitle {
+    margin: 0;
+    padding: 3px 0 0 10;
+    color: black;
+    font-family: "Adobe Garamond Pro", Garamond, Times, serif;
+    font-size: 13px;
+    font-weight: normal;
+    user-select: none;
+}
diff --git a/js/components/css/Inset.module.css b/js/components/css/Inset.module.css
new file mode 100644
index 0000000..1adea2f
--- /dev/null
+++ b/js/components/css/Inset.module.css
@@ -0,0 +1,17 @@
+.inset {
+    border-radius: 6px;
+    border: 3px inset #f0edd0;
+    padding: 6px;
+    margin: 0 auto;
+    display: flex;
+    width: 604px;
+}
+
+:global(.full-page) .inset {
+    display: none;
+}
+
+.inset button {
+    min-width: 36px;
+    margin: 0 2px;
+}
diff --git a/js/components/css/Keyboard.module.css b/js/components/css/Keyboard.module.css
new file mode 100644
index 0000000..6639799
--- /dev/null
+++ b/js/components/css/Keyboard.module.css
@@ -0,0 +1,213 @@
+.keyboard {
+    margin-left: 15px;
+    user-select: none;
+}
+
+:global(.apple2e) .keyboard {
+    margin-left: 0;
+}
+
+.row {
+    display: block;
+    margin: 0;
+    padding: 0;
+    height: 42px;
+    font-family: Helvetica, sans-serif;
+    width: 570px;
+}
+
+:global(.apple2e) .row {
+    width: 610px;
+}
+
+.row0 {
+    margin-left: 20px;
+}
+
+.row2 {
+    margin-left: 10px;
+}
+
+.row3 {
+    margin-left: 10px;
+}
+
+.row4 {
+    margin-left: 10px;
+}
+
+:global(.apple2e) .row0 {
+    margin-left: 0;
+}
+
+:global(.apple2e) .row2 {
+    margin-left: 0;
+}
+
+:global(.apple2e) .row3 {
+    margin-left: 0;
+}
+
+:global(.apple2e) .row4 {
+    margin-left: 0;
+}
+
+.key {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    width: 32px;
+    height: 32px;
+    background-color: #44372c;
+    color: white;
+    text-align: center;
+    position: relative;
+    border-left: 5px solid #65594d;
+    border-top: 5px solid #65594d;
+    border-right: 5px solid #110e0d;
+    border-bottom: 5px solid #110e0d;
+
+    /* border: 5px outset #66594E; */
+    border-radius: 5px;
+    cursor: pointer;
+}
+
+.pressed {
+    background-color: #22150a;
+    border-left: 5px solid #44372c;
+    border-top: 5px solid #44372c;
+    border-right: 5px solid #000;
+    border-bottom: 5px solid #000;
+
+    /* border: 5px outset #44372C; */
+}
+
+.key div {
+    border-radius: 3px;
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    text-align: center;
+}
+
+.vCenter div {
+    bottom: 10px;
+}
+
+.vCenter2 div {
+    bottom: 5px;
+    line-height: 10px;
+}
+
+.key span {
+    font-size: 13px;
+}
+
+.key .small {
+    font-size: 7px;
+}
+
+.key-SHIFT {
+    width: 53px;
+}
+
+.active {
+    color: #4f4;
+}
+
+.key-RETURN {
+    width: 52px;
+}
+
+.key-DELETE {
+    width: 47px;
+}
+
+.key-TAB {
+    width: 47px;
+}
+
+.key-POWER {
+    width: 38px;
+    height: 38px;
+    border: 2px groove black;
+    background-color: #ffd;
+    color: black;
+    border-radius: 2px;
+}
+
+.key-POWER div {
+    bottom: 15px;
+}
+
+.key-nbsp {
+    margin-left: 62px;
+    width: 330px;
+}
+
+:global(.apple2e) .key-CTRL {
+    width: 60px;
+}
+
+:global(.apple2e) .key-RETURN {
+    width: 60px;
+}
+
+:global(.apple2e) .key-SHIFT {
+    width: 81px;
+}
+
+:global(.apple2e) .key-nbsp {
+    margin-left: 0;
+    width: 215px;
+}
+
+.key-POW {
+    width: 38px;
+    height: 38px;
+    border: 2px groove black;
+    background-color: #ffd;
+    color: black;
+    border-radius: 2px;
+}
+
+.key-POW div {
+    bottom: 15px;
+}
+
+.key-POW span {
+    background: #4f4;
+    color: #4f4;
+}
+
+.key-OPEN_APPLE div {
+    background-image: url("../../../img/open-apple24.png");
+    width: 24px;
+    height: 24px;
+    bottom: 1px;
+    left: 4px;
+}
+
+.key-CLOSED_APPLE div {
+    background-image: url("../../../img/closed-apple24.png");
+    width: 24px;
+    height: 24px;
+    bottom: 1px;
+    left: 4px;
+}
+
+.key-OPEN_APPLE span {
+    display: none;
+}
+
+.key-CLOSED_APPLE span {
+    display: none;
+}
+
+.key-OPEN_APPLE.active div {
+    background-image: url("../../../img/open-apple24-green.png");
+}
+
+.key-CLOSED_APPLE.active div {
+    background-image: url("../../../img/closed-apple24-green.png");
+}
diff --git a/js/components/css/Modal.module.css b/js/components/css/Modal.module.css
new file mode 100644
index 0000000..a8c4dca
--- /dev/null
+++ b/js/components/css/Modal.module.css
@@ -0,0 +1,71 @@
+.modalOverlay {
+    position: fixed;
+    left: 0;
+    right: 0;
+    top: 0;
+    bottom: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: rgb(0 0 0 / 60%);
+    z-index: 1;
+}
+
+.modalOverlay button {
+    min-width: 36px;
+    margin: 0 2px;
+}
+
+.modal {
+    background-color: #c4c1a0;
+    padding: 10px;
+    max-height: 100vh;
+    border-radius: 4px;
+    overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.modalHeader {
+    display: flex;
+    font-size: 14px;
+    justify-content: space-between;
+    align-items: center;
+    background: #44372c;
+    color: #fff;
+    padding: 5px 11px;
+    border: 1px outset #66594e;
+    border-radius: 3px;
+    user-select: none;
+}
+
+.modalHeader button {
+    min-width: 36px;
+}
+
+.modalTitle {
+    margin-top: 0;
+    margin-bottom: 0;
+    font-weight: 600;
+    font-size: 1.25rem;
+    line-height: 1.25;
+    color: #fff;
+    box-sizing: border-box;
+}
+
+.modalContent {
+    margin-top: 10px;
+    margin-bottom: 10px;
+    line-height: 1.5;
+    color: #000;
+}
+
+.modalFooter {
+    text-align: right;
+    user-select: none;
+}
+
+.modalFooter a[role="button"],
+.modalFooter button {
+    margin: 0 0 0 5px;
+    min-width: 75px;
+}
diff --git a/js/components/css/OptionsModal.module.css b/js/components/css/OptionsModal.module.css
new file mode 100644
index 0000000..54fd2ac
--- /dev/null
+++ b/js/components/css/OptionsModal.module.css
@@ -0,0 +1,11 @@
+.optionsModal {
+    width: 300px;
+}
+
+.optionsModal h3 {
+    font-size: 13px;
+}
+
+.optionsModal li {
+    list-style-type: none;
+}
diff --git a/js/components/css/Printer.module.css b/js/components/css/Printer.module.css
new file mode 100644
index 0000000..a1e2c25
--- /dev/null
+++ b/js/components/css/Printer.module.css
@@ -0,0 +1,9 @@
+.printer {
+    background: white;
+    font: monospace;
+    width: 60em;
+    padding: 5em;
+    height: 60vh;
+    overflow: auto;
+    border: 2px inset #f0edd0;
+}
diff --git a/js/components/css/ProgressModal.module.css b/js/components/css/ProgressModal.module.css
new file mode 100644
index 0000000..35ea601
--- /dev/null
+++ b/js/components/css/ProgressModal.module.css
@@ -0,0 +1,10 @@
+.progressContainer {
+    width: 320px;
+    height: 20px;
+    background: #000;
+}
+
+.progressBar {
+    height: 20px;
+    background: #0f0;
+}
diff --git a/js/components/css/Screen.module.css b/js/components/css/Screen.module.css
new file mode 100644
index 0000000..8b96db0
--- /dev/null
+++ b/js/components/css/Screen.module.css
@@ -0,0 +1,94 @@
+:global(.mono) {
+    filter: url("#green");
+}
+
+.display {
+    margin: 5px auto 10px;
+}
+
+:global(.full-page) .display {
+    width: 100vw;
+    height: 68.5714vw; /* 384px / 560px * 100% */
+    max-height: 100vh;
+    max-width: 145.83vh; /* 560px / 384px * 100% */
+    padding: 0;
+    border: 0;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    justify-content: center;
+    align-items: center;
+    margin: auto !important;
+}
+
+.overscan {
+    margin: auto;
+    position: relative;
+    background-color: black;
+    width: 592px;
+    height: 416px;
+    border: 6px inset #f0edd0;
+    border-radius: 10px;
+}
+
+:global(.full-page) .overscan {
+    margin: initial;
+    padding: 0;
+    width: initial;
+    border: 0;
+    border-radius: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+:global(.scanlines)::after {
+    display: block;
+    pointer-events: none;
+    background-image:
+        repeating-linear-gradient(
+            to bottom,
+            transparent 0,
+            transparent 1px,
+            rgb(0 0 0 / 50%) 1px,
+            rgb(0 0 0 / 50%) 2px
+        );
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+}
+
+:global(.full-page) :global(.scanlines)::after {
+    background-image:
+        repeating-linear-gradient(
+            to bottom,
+            transparent 0,
+            transparent 0.25vh,
+            rgb(0 0 0 / 50%) 0.25vh,
+            rgb(0 0 0 / 50%) 0.5vh
+        );
+}
+
+.screen {
+    cursor: crosshair;
+    image-rendering: crisp-edges;
+    width: 592px;
+    height: 416px;
+    touch-action: manipulation;
+    user-select: none;
+}
+
+.screen:global(.mouseMode) {
+    cursor: none;
+}
+
+:global(.full-page) .screen {
+    width: 100%;
+    height: 100%;
+}
diff --git a/js/components/css/Tabs.module.css b/js/components/css/Tabs.module.css
new file mode 100644
index 0000000..3a3e703
--- /dev/null
+++ b/js/components/css/Tabs.module.css
@@ -0,0 +1,24 @@
+.tab {
+    border-top: 2px groove;
+    border-left: 2px groove;
+    border-right: 2px groove;
+    margin: 0 2px;
+    font-weight: bold;
+    padding: 4px;
+    border-radius: 4px 4px 0 0;
+}
+
+.tab.selected {
+    background-color: #c4c1a0;
+    border-bottom: none;
+    margin-bottom: -2px;
+    color: #080;
+}
+
+.tabs {
+    display: flex;
+    flex-direction: row;
+    border-bottom: 2px groove;
+    margin-bottom: 6px;
+    user-select: none;
+}
diff --git a/js/components/debugger/Applesoft.tsx b/js/components/debugger/Applesoft.tsx
new file mode 100644
index 0000000..1443722
--- /dev/null
+++ b/js/components/debugger/Applesoft.tsx
@@ -0,0 +1,137 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+
+import { toHex } from 'js/util';
+import ApplesoftDecompiler from 'js/applesoft/decompiler';
+import { ApplesoftHeap, ApplesoftVariable } from 'js/applesoft/heap';
+import { Apple2 as Apple2Impl } from 'js/apple2';
+
+import styles from './css/Applesoft.module.css';
+import debuggerStyles from './css/Debugger.module.css';
+
+export interface ApplesoftProps {
+    apple2: Apple2Impl | undefined;
+}
+
+interface ApplesoftData {
+    variables: ApplesoftVariable[];
+    internals: {
+        txttab?: number;
+        fac?: number;
+        arg?: number;
+        curline?: number;
+    };
+    listing: string;
+}
+
+const TYPE_SYMBOL = ['', '$', '()', '%'] as const;
+const TYPE_NAME = ['Float', 'String', 'Function', 'Integer'] as const;
+
+const formatArray = (value: unknown): string => {
+    if (Array.isArray(value)) {
+        if (Array.isArray(value[0])) {
+            return `[${value.map((x) => formatArray(x)).join(',\n ')}]`;
+        } else {
+            return `[${value.map((x) => formatArray(x)).join(', ')}]`;
+        }
+    } else {
+        return `${JSON.stringify(value)}`;
+    }
+};
+
+const Variable = ({ variable }: { variable: ApplesoftVariable }) => {
+    const { name, type, sizes, value } = variable;
+    const isArray = !!sizes;
+    const arrayStr = isArray ? `(${sizes.map((size) => size - 1).join(',')})` : '';
+    return (
+        <tr>
+            <td>{name}{TYPE_SYMBOL[type]}{arrayStr}</td>
+            <td>{TYPE_NAME[type]}{isArray ? ' Array' : ''}</td>
+            <td><pre tabIndex={-1}>{isArray ? formatArray(value) : value}</pre></td>
+        </tr>
+    );
+};
+
+export const Applesoft = ({ apple2 }: ApplesoftProps) => {
+    const animationRef = useRef<number>(0);
+    const [data, setData] = useState<ApplesoftData>({
+        listing: '',
+        variables: [],
+        internals: {}
+    });
+    const [heap, setHeap] = useState<ApplesoftHeap>();
+    const cpu = apple2?.getCPU();
+
+    useEffect(() => {
+        if (cpu) {
+            // setDecompiler();
+            setHeap(new ApplesoftHeap(cpu));
+        }
+    }, [cpu]);
+
+    const animate = useCallback(() => {
+        if (cpu && heap) {
+            try {
+                const decompiler = ApplesoftDecompiler.decompilerFromMemory(cpu);
+                setData({
+                    variables: heap.dumpVariables(),
+                    internals: heap.dumpInternals(),
+                    listing: decompiler.decompile()
+                });
+            } catch (error) {
+                if (error instanceof Error) {
+                    setData({
+                        variables: [],
+                        internals: {},
+                        listing: error.message
+                    });
+                } else {
+                    throw error;
+                }
+            }
+        }
+        animationRef.current = requestAnimationFrame(animate);
+    }, [cpu, heap]);
+
+    useEffect(() => {
+        animationRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(animationRef.current);
+    }, [animate]);
+
+    const { listing, internals, variables } = data;
+
+    return (
+        <div className={styles.column}>
+            <span className={debuggerStyles.subHeading}>Listing</span>
+            <pre className={styles.listing} tabIndex={-1}>{listing}</pre>
+            <span className={debuggerStyles.subHeading}>Variables</span>
+            <div className={styles.variables}>
+                <table>
+                    <tr>
+                        <th>Name</th>
+                        <th>Type</th>
+                        <th>Value</th>
+                    </tr>
+                    {variables.map((variable, idx) => <Variable key={idx} variable={variable} />)}
+                </table>
+            </div>
+            <span className={debuggerStyles.subHeading}>Internals</span>
+            <div className={styles.internals}>
+                <table>
+                    <tr>
+                        <th>TXTTAB</th>
+                        <td>{toHex(internals.txttab ?? 0)}</td>
+                        <th>FAC</th>
+                        <td>{internals.fac}</td>
+                    </tr>
+                    <tr>
+                        <th>ARG</th>
+                        <td>{internals.arg}</td>
+                        <th>CURLINE</th>
+                        <td>{internals.curline}</td>
+                    </tr>
+                </table>
+            </div>
+        </div>
+    );
+};
diff --git a/js/components/debugger/CPU.tsx b/js/components/debugger/CPU.tsx
new file mode 100644
index 0000000..7ac4d87
--- /dev/null
+++ b/js/components/debugger/CPU.tsx
@@ -0,0 +1,211 @@
+import { h, JSX } from 'preact';
+import cs from 'classnames';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import { Apple2 as Apple2Impl } from '../../apple2';
+import { ControlButton } from '../ControlButton';
+import { FileChooser } from '../FileChooser';
+import { loadLocalBinaryFile } from '../util/files';
+import { spawn } from '../util/promises';
+import { toHex } from 'js/util';
+
+import styles from './css/CPU.module.css';
+import debuggerStyles from './css/Debugger.module.css';
+
+export interface CPUProps {
+    apple2: Apple2Impl | undefined;
+}
+
+interface DebugData {
+    memory: string;
+    registers: string;
+    running: boolean;
+    stack: string;
+    trace: string;
+    zeroPage: string;
+}
+
+const CIDERPRESS_EXTENSION = /#([0-9a-f]{2})([0-9a-f]{4})$/i;
+const VALID_PAGE = /^[0-9A-F]{1,2}$/i;
+const VALID_ADDRESS = /^[0-9A-F]{1,4}$/i;
+
+const ERROR_ICON = (
+    <div className={styles.invalid}>
+        <i
+            className="fa-solid fa-triangle-exclamation"
+            title="Invalid hex address"
+        />
+    </div>
+);
+
+export const CPU = ({ apple2 }: CPUProps) => {
+    const debug = apple2?.getDebugger();
+    const [data, setData] = useState<DebugData>({
+        running: true,
+        registers: '',
+        stack: '',
+        trace: '',
+        zeroPage: '',
+        memory: '',
+    });
+    const [memoryPage, setMemoryPage] = useState('08');
+    const [loadAddress, setLoadAddress] = useState('0800');
+    const [run, setRun] = useState(true);
+    const animationRef = useRef<number>(0);
+
+    const animate = useCallback(() => {
+        if (debug) {
+            setData({
+                registers: debug.dumpRegisters(),
+                running: debug.isRunning(),
+                stack: debug.getStack(38),
+                trace: debug.getTrace(16),
+                zeroPage: debug.dumpPage(0),
+                memory: debug.dumpPage(parseInt(memoryPage, 16) || 0)
+            });
+        }
+        animationRef.current = requestAnimationFrame(animate);
+    }, [debug, memoryPage]);
+
+    useEffect(() => {
+        animationRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(animationRef.current);
+    }, [animate]);
+
+    const doPause = useCallback(() => {
+        apple2?.stop();
+    }, [apple2]);
+
+    const doRun = useCallback(() => {
+        apple2?.run();
+    }, [apple2]);
+
+    const doStep = useCallback(() => {
+        debug?.step();
+    }, [debug]);
+
+    const doLoadAddress = useCallback((event: JSX.TargetedEvent<HTMLInputElement>) => {
+        setLoadAddress(event.currentTarget.value);
+    }, []);
+    const doRunCheck = useCallback((event: JSX.TargetedEvent<HTMLInputElement>) => {
+        setRun(event.currentTarget.checked);
+    }, []);
+
+    const doMemoryPage = useCallback((event: JSX.TargetedEvent<HTMLInputElement>) => {
+        setMemoryPage(event.currentTarget.value);
+    }, []);
+
+    const doChooseFile = useCallback((handles: FileSystemFileHandle[]) => {
+        if (debug && handles.length === 1) {
+            spawn(async () => {
+                const file = await handles[0].getFile();
+                let atAddress = parseInt(loadAddress, 16) || 0x800;
+
+                const matches = file.name.match(CIDERPRESS_EXTENSION);
+                if (matches && matches.length === 3) {
+                    const [, , aux] = matches;
+                    atAddress = parseInt(aux, 16);
+                }
+
+                await loadLocalBinaryFile(file, atAddress, debug);
+                setLoadAddress(toHex(atAddress, 4));
+                if (run) {
+                    debug?.runAt(atAddress);
+                }
+            });
+        }
+    }, [debug, loadAddress, run]);
+
+    const {
+        memory,
+        registers,
+        running,
+        stack,
+        trace,
+        zeroPage
+    } = data;
+
+    const memoryPageValid = VALID_PAGE.test(memoryPage);
+    const loadAddressValid = VALID_ADDRESS.test(loadAddress);
+
+    return (
+        <div className={debuggerStyles.column}>
+            <span className={debuggerStyles.subHeading}>Controls</span>
+            <div className={styles.controls}>
+                {running ? (
+                    <ControlButton
+                        onClick={doPause}
+                        disabled={!apple2}
+                        title="Pause"
+                        icon="pause"
+                    />
+                ) : (
+                    <ControlButton
+                        onClick={doRun}
+                        disabled={!apple2}
+                        title="Run"
+                        icon="play"
+                    />
+                )}
+                <ControlButton
+                    onClick={doStep}
+                    disabled={!apple2 || running}
+                    title="Step"
+                    icon="forward-step"
+                />
+            </div>
+            <div className={debuggerStyles.row}>
+                <div className={debuggerStyles.column}>
+                    <span className={debuggerStyles.subHeading}>Registers</span>
+                    <pre tabIndex={-1}>
+                        {registers}
+                    </pre>
+                    <span className={debuggerStyles.subHeading}>Trace</span>
+                    <pre className={styles.trace} tabIndex={-1}>
+                        {trace}
+                    </pre>
+                    <span className={debuggerStyles.subHeading}>ZP</span>
+                    <pre className={styles.zeroPage} tabIndex={-1}>
+                        {zeroPage}
+                    </pre>
+                </div>
+                <div className={debuggerStyles.column}>
+                    <span className={debuggerStyles.subHeading}>Stack</span>
+                    <pre className={styles.stack} tabIndex={-1}>
+                        {stack}
+                    </pre>
+                </div>
+            </div>
+            <div>
+                <hr />
+                <span className={debuggerStyles.subHeading}>Memory Page: $ </span>
+                <input
+                    value={memoryPage}
+                    onChange={doMemoryPage}
+                    maxLength={2}
+                    className={cs({ [styles.invalid]: !memoryPageValid })}
+                />
+                {memoryPageValid ? null : ERROR_ICON}
+                <pre className={styles.zp} tabIndex={-1}>
+                    {memory}
+                </pre>
+            </div>
+            <div>
+                <hr />
+                <span className={debuggerStyles.subHeading}>Load File: $ </span>
+                <input
+                    type="text"
+                    value={loadAddress}
+                    maxLength={4}
+                    onChange={doLoadAddress}
+                    className={cs({ [styles.invalid]: !loadAddressValid })}
+                />
+                {loadAddressValid ? null : ERROR_ICON}
+                {' '}
+                <input type="checkbox" checked={run} onChange={doRunCheck} />Run
+                <div className={styles.fileChooser}>
+                    <FileChooser onChange={doChooseFile} />
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/js/components/debugger/Debugger.tsx b/js/components/debugger/Debugger.tsx
new file mode 100644
index 0000000..82b74c6
--- /dev/null
+++ b/js/components/debugger/Debugger.tsx
@@ -0,0 +1,44 @@
+import { h } from 'preact';
+import { useState } from 'preact/hooks';
+import { Inset } from '../Inset';
+import { Tab, Tabs } from '../Tabs';
+import { Apple2 } from 'js/apple2';
+
+import { Applesoft } from './Applesoft';
+import { CPU } from './CPU';
+import { Disks } from './Disks';
+import { Memory } from './Memory';
+import { VideoModes } from './VideoModes';
+
+import styles from './css/Debugger.module.css';
+
+interface DebuggerProps {
+    apple2: Apple2 | undefined;
+}
+
+export const Debugger = ({ apple2 }: DebuggerProps) => {
+    const [selected, setSelected] = useState(0);
+
+    if (!apple2) {
+        return null;
+    }
+
+    return (
+        <Inset className={styles.inset}>
+            <Tabs setSelected={setSelected}>
+                <Tab>CPU</Tab>
+                <Tab>Video</Tab>
+                <Tab>Memory</Tab>
+                <Tab>Disks</Tab>
+                <Tab>Applesoft</Tab>
+            </Tabs>
+            <div className={styles.debugger}>
+                {selected === 0 ? <CPU apple2={apple2} /> : null}
+                {selected === 1 ? <VideoModes apple2={apple2} /> : null}
+                {selected === 2 ? <Memory apple2={apple2} /> : null}
+                {selected === 3 ? <Disks apple2={apple2} /> : null}
+                {selected === 4 ? <Applesoft apple2={apple2} /> : null}
+            </div>
+        </Inset>
+    );
+};
diff --git a/js/components/debugger/Disks.tsx b/js/components/debugger/Disks.tsx
new file mode 100644
index 0000000..b2f535c
--- /dev/null
+++ b/js/components/debugger/Disks.tsx
@@ -0,0 +1,422 @@
+import { h, Fragment } from 'preact';
+import { useMemo } from 'preact/hooks';
+import cs from 'classnames';
+import { Apple2 as Apple2Impl } from 'js/apple2';
+import { BlockDisk, DiskFormat, DriveNumber, FloppyDisk, isBlockDiskFormat, isNibbleDisk, MassStorage } from 'js/formats/types';
+import { slot } from 'js/apple2io';
+import DiskII from 'js/cards/disk2';
+import SmartPort from 'js/cards/smartport';
+import createDiskFrom2MG from 'js/formats/2mg';
+import createBlockDisk from 'js/formats/block';
+import { ProDOSVolume } from 'js/formats/prodos';
+import { FILE_TYPES, STORAGE_TYPES } from 'js/formats/prodos/constants';
+import { Directory } from 'js/formats/prodos/directory';
+import { FileEntry } from 'js/formats/prodos/file_entry';
+import { VDH } from 'js/formats/prodos/vdh';
+import { toHex } from 'js/util';
+
+import styles from './css/Disks.module.css';
+import debuggerStyles from './css/Debugger.module.css';
+import { useCallback, useState } from 'preact/hooks';
+import { DOS33, FileEntry as DOSEntry, isMaybeDOS33 } from 'js/formats/dos/dos33';
+import createDiskFromDOS from 'js/formats/do';
+import { FileData, FileViewer } from './FileViewer';
+
+/**
+ * Formats a short date string
+ *
+ * @param date Data object
+ * @returns Short string date
+ */
+const formatDate = (date: Date) => {
+    return date.toLocaleString(undefined, { dateStyle: 'short', timeStyle: 'short' });
+};
+
+/**
+ * Guard for determining whether a disk is a nibble or block based disk
+ *
+ * @param disk NibbleDisk or BlockDisk
+ * @returns true if is BlockDisk
+ */
+function isBlockDisk(disk: FloppyDisk | BlockDisk): disk is BlockDisk {
+    return !!((disk as BlockDisk).blocks);
+}
+
+/**
+ * Props for FileListing component
+ */
+interface FileListingProps {
+    volume: ProDOSVolume;
+    fileEntry: FileEntry;
+    depth: number;
+    setFileData: (fileData: FileData) => void;
+}
+
+/**
+ * Renders a ProDOS file entry.
+ *
+ * @param depth Depth of listing from root
+ * @param fileEntry ProDOS file entry to display
+ * @returns FileListing component
+ */
+const FileListing = ({ depth, fileEntry, setFileData }: FileListingProps) => {
+    const deleted = fileEntry.storageType === STORAGE_TYPES.DELETED;
+    const doSetFileData = useCallback(() => {
+        const binary = fileEntry.getFileData();
+        const text = fileEntry.getFileText();
+        if (binary && text) {
+            setFileData({
+                binary,
+                text,
+                fileName: fileEntry.name,
+            });
+        }
+    }, [fileEntry, setFileData]);
+    return (
+        <tr>
+            <td
+                className={cs(styles.filename, { [styles.deleted]: deleted })}
+                title={fileEntry.name}
+                onClick={doSetFileData}
+            >
+                {'| '.repeat(depth)}
+                {deleted ?
+                    <i className="fas fa-file-circle-xmark" /> :
+                    <i className="fas fa-file" />
+                }
+                {' '}
+                {fileEntry.name}
+            </td>
+            <td>{FILE_TYPES[fileEntry.fileType] ?? `$${toHex(fileEntry.fileType)}`}</td>
+            <td>{`$${toHex(fileEntry.auxType, 4)}`}</td>
+            <td>{fileEntry.blocksUsed}</td>
+            <td>{formatDate(fileEntry.creation)}</td>
+            <td>{formatDate(fileEntry.lastMod)}</td>
+        </tr>
+    );
+};
+
+/**
+ * Props for DirectoryListing Component.
+ */
+interface DirectoryListingProps {
+    volume: ProDOSVolume;
+    dirEntry: VDH | Directory;
+    depth: number;
+    setFileData: (fileData: FileData) => void;
+}
+
+/**
+ * Displays information about a ProDOS directory, recursing through child
+ * directories.
+ *
+ * @param volume ProDOS volume
+ * @param depth Current directory depth
+ * @param dirEntry Current directory entry to display
+ * @returns DirectoryListing component
+ */
+const DirectoryListing = ({ volume, depth, dirEntry, setFileData }: DirectoryListingProps) => {
+    const [open, setOpen] = useState(depth === 0);
+    return (
+        <>
+            <tr>
+                <td
+                    className={styles.filename}
+                    onClick={() => setOpen((open) => !open)}
+                    title={dirEntry.name}
+                >
+                    {'| '.repeat(depth)}
+                    <i className={cs('fas', { 'fa-folder-open': open, 'fa-folder-closed': !open })} />
+                    {' '}
+                    {dirEntry.name}
+                </td>
+                <td></td>
+                <td></td>
+                <td></td>
+                <td>{formatDate(dirEntry.creation)}</td>
+                <td></td>
+            </tr>
+            {open && dirEntry.entries.map((fileEntry, idx) => {
+                if (fileEntry.storageType === STORAGE_TYPES.DIRECTORY) {
+                    const dirEntry = new Directory(volume, fileEntry);
+                    return <DirectoryListing
+                        key={idx}
+                        depth={depth + 1}
+                        volume={volume}
+                        dirEntry={dirEntry}
+                        setFileData={setFileData}
+                    />;
+                } else {
+                    return <FileListing
+                        key={idx}
+                        depth={depth + 1}
+                        volume={volume}
+                        fileEntry={fileEntry}
+                        setFileData={setFileData}
+                    />;
+                }
+            })}
+        </>
+    );
+};
+
+/**
+ * Props for CatalogEntry component
+ */
+interface CatalogEntryProps {
+    dos: DOS33;
+    fileEntry: DOSEntry;
+    setFileData: (fileData: FileData) => void;
+}
+
+/**
+ * Component for a single DOS 3.x catalog entry
+ *
+ * @param entry Catalog entry to display
+ * @returns CatalogEntry component
+ */
+const CatalogEntry = ({ dos, fileEntry, setFileData }: CatalogEntryProps) => {
+    const doSetFileData = useCallback(() => {
+        const { data } = dos.readFile(fileEntry);
+        setFileData({
+            binary: data,
+            text: dos.dumpFile(fileEntry),
+            fileName: fileEntry.name,
+        });
+    }, [dos, fileEntry, setFileData]);
+
+    return (
+        <tr onClick={doSetFileData}>
+            <td className={cs(styles.filename, { [styles.deleted]: fileEntry.deleted })}>
+                {fileEntry.locked && <i className="fas fa-lock" />}
+                {' '}
+                {fileEntry.name}
+            </td>
+            <td>{fileEntry.type}</td>
+            <td>{fileEntry.size}</td>
+            <td></td>
+        </tr>
+    );
+};
+
+/**
+ * Catalog component props
+ */
+interface CatalogProps {
+    dos: DOS33;
+    setFileData: (fileData: FileData) => void;
+}
+
+/**
+ * DOS 3.3 disk catalog component
+ *
+ * @param dos DOS 3.3 disk object
+ * @returns Catalog component
+ */
+
+const Catalog = ({ dos, setFileData }: CatalogProps) => {
+    const catalog = useMemo(() => dos.readCatalog(), [dos]);
+    return (
+        <>
+            {catalog.map((fileEntry, idx) => (
+                <CatalogEntry
+                    key={idx}
+                    dos={dos}
+                    fileEntry={fileEntry}
+                    setFileData={setFileData}
+                />
+            ))}
+        </>
+    );
+};
+
+/**
+ * Props for DiskInfo component
+ */
+interface DiskInfoProps {
+    massStorage: MassStorage<DiskFormat>;
+    drive: DriveNumber;
+    setFileData: (fileData: FileData) => void;
+}
+
+/**
+ * Top level disk info component, handles determining what sort of disk
+ * is present and using the appropriate sub-component depending on whether
+ * it's a ProDOS block disk or a DOS 3.3 disk.
+ *
+ * TODO(whscullin): Does not handle woz or 13 sector.
+ *
+ * @param massStorage The storage device
+ * @param drive The drive number
+ * @returns DiskInfo component
+ */
+const DiskInfo = ({ massStorage, drive, setFileData }: DiskInfoProps) => {
+    const disk = useMemo(() => {
+        const massStorageData = massStorage.getBinary(drive, 'po');
+        if (massStorageData) {
+            const { data, readOnly, ext } = massStorageData;
+            const { name } = massStorageData.metadata;
+            let disk: BlockDisk | FloppyDisk | null = null;
+            if (ext === '2mg') {
+                disk = createDiskFrom2MG({
+                    name,
+                    rawData: data,
+                    readOnly,
+                    volume: 254,
+                });
+            } else if (data.byteLength < 800 * 1024) {
+                const doData = massStorage.getBinary(drive, 'do');
+                if (doData) {
+                    if (isMaybeDOS33(doData)) {
+                        disk = createDiskFromDOS({
+                            name,
+                            rawData: doData.data,
+                            readOnly,
+                            volume: 254,
+                        });
+                    }
+                }
+            }
+            if (!disk && isBlockDiskFormat(ext)) {
+                disk = createBlockDisk(ext, {
+                    name,
+                    rawData: data,
+                    readOnly,
+                    volume: 254,
+                });
+            }
+            return disk;
+        }
+        return null;
+    }, [massStorage, drive]);
+
+    if (disk) {
+        try {
+            if (isBlockDisk(disk)) {
+                if (disk.blocks.length) {
+                    const prodos = new ProDOSVolume(disk);
+                    const { totalBlocks } = prodos.vdh();
+                    const freeCount = prodos.bitMap().freeBlocks().length;
+                    const usedCount = totalBlocks - freeCount;
+                    return (
+                        <div className={styles.volume}>
+                            <table>
+                                <thead>
+                                    <tr>
+                                        <th className={styles.filename}>Filename</th>
+                                        <th className={styles.type}>Type</th>
+                                        <th className={styles.aux}>Aux</th>
+                                        <th className={styles.blocks}>Blocks</th>
+                                        <th className={styles.created}>Created</th>
+                                        <th className={styles.modified}>Modified</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <DirectoryListing
+                                        depth={0}
+                                        volume={prodos}
+                                        dirEntry={prodos.vdh()}
+                                        setFileData={setFileData}
+                                    />
+                                </tbody>
+                                <tfoot>
+                                    <tr>
+                                        <td colSpan={1}>Blocks Free: {freeCount}</td>
+                                        <td colSpan={3}>Used: {usedCount}</td>
+                                        <td colSpan={2}>Total: {totalBlocks}</td>
+                                    </tr>
+                                </tfoot>
+                            </table>
+                        </div>
+                    );
+                }
+            } else if (isNibbleDisk(disk)) {
+                const dos = new DOS33(disk);
+                return (
+                    <div className={styles.volume}>
+                        <table>
+                            <thead>
+                                <tr>
+                                    <th className={styles.filename}>Filename</th>
+                                    <th className={styles.type}>Type</th>
+                                    <th className={styles.sectors}>Sectors</th>
+                                    <th></th>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <Catalog dos={dos} setFileData={setFileData} />
+                            </tbody>
+                            <tfoot>
+                                <tr>
+                                    <td>Volume Number:</td>
+                                    <td colSpan={3}>{dos.getVolumeNumber()}</td>
+                                </tr>
+                                <tr>
+                                    <td>Used Sectors:</td>
+                                    <td colSpan={3}>{dos.usedSectorCount()}</td>
+                                </tr>
+                                <tr>
+                                    <td>Free Sectors:</td>
+                                    <td colSpan={3}>{dos.freeSectorCount()}</td>
+                                </tr>
+                            </tfoot>
+                        </table>
+                    </div>
+                );
+            }
+        } catch (error) {
+            console.error(error);
+            return <pre>Unknown volume</pre>;
+        }
+    }
+    return <pre>No disk</pre>;
+};
+
+/**
+ * Disks component props
+ */
+export interface DisksProps {
+    apple2: Apple2Impl;
+}
+
+/**
+ * A debugger panel that displays information about currently mounted
+ * disks.
+ *
+ * @param apple2 The apple2 object
+ * @returns Disks component
+ */
+export const Disks = ({ apple2 }: DisksProps) => {
+    const [fileData, setFileData] = useState<FileData | null>(null);
+    const io = apple2.getIO();
+    const cards: MassStorage<DiskFormat>[] = [];
+
+    const onClose = useCallback(() => {
+        setFileData(null);
+    }, []);
+
+    for (let idx = 0; idx <= 7; idx++) {
+        const card = io.getSlot(idx as slot);
+        if (card instanceof DiskII || card instanceof SmartPort) {
+            cards.push(card);
+        }
+    }
+
+    return (
+        <div>
+            {cards.map((card, idx) => (
+                <div key={idx}>
+                    <div className={debuggerStyles.subHeading}>
+                        {card.constructor.name} - 1
+                    </div>
+                    <DiskInfo massStorage={card} drive={1} setFileData={setFileData} />
+                    <div className={debuggerStyles.subHeading}>
+                        {card.constructor.name} - 2
+                    </div>
+                    <DiskInfo massStorage={card} drive={2} setFileData={setFileData} />
+                </div>
+            ))}
+            <FileViewer fileData={fileData} onClose={onClose} />
+        </div>
+    );
+};
diff --git a/js/components/debugger/FileViewer.tsx b/js/components/debugger/FileViewer.tsx
new file mode 100644
index 0000000..ff02415
--- /dev/null
+++ b/js/components/debugger/FileViewer.tsx
@@ -0,0 +1,170 @@
+import { HiresPage2D, LoresPage2D, VideoModes2D } from 'js/canvas';
+import { h, Fragment } from 'preact';
+import { useEffect, useRef, useState } from 'preact/hooks';
+import { Modal, ModalContent, ModalFooter } from '../Modal';
+
+import styles from './css/FileViewer.module.css';
+
+/**
+ * Binary and text representation of file to be previewed
+ */
+export interface FileData {
+    fileName: string;
+    binary: Uint8Array;
+    text: string;
+}
+
+/**
+ * FileViewer props
+ */
+export interface FileViewerProps {
+    fileData: FileData | null;
+    onClose: () => void;
+}
+
+/**
+ * Preview a file as a hires image if a file is roughly 8192 bytes.
+ * Leverages HiresPage2D.
+ *
+ * @param binary Potential file to preview
+ * @returns HiresPreview component
+ */
+const HiresPreview = ({ binary }: { binary: Uint8Array }) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    // Hires pictures are often a few bytes short of 8192 bytes
+    // because that saves a sector on DOS 3.3 disks.
+    if (binary.byteLength < 8184 || binary.byteLength > 8192) {
+        return null;
+    }
+
+    if (canvasRef.current) {
+        const vm = new VideoModes2D(canvasRef.current, true);
+        const lores = new LoresPage2D(vm, 1, new Uint8Array(), false);
+        const hires = new HiresPage2D(vm, 1);
+        vm.setLoresPage(1, lores);
+        vm.setHiresPage(1, hires);
+        vm.text(false);
+        vm.hires(true);
+        vm.doubleHires(false);
+        vm.page(1);
+
+        for (let idx = 0; idx < 0x20; idx++) {
+            for (let jdx = 0; jdx < 0x100; jdx++) {
+                hires.write(idx + 0x20, jdx, binary[idx * 0x100 + jdx]);
+            }
+        }
+        vm.blit();
+    }
+
+    return <canvas ref={canvasRef} width={560} height={384} className={styles.hiresPreview} />;
+};
+
+/**
+ * Preview a file as a double hires if a file is roughly 16384 bytes.
+ *
+ * @param binary Potential file to preview
+ * @returns DoubleHiresPreview component
+ */
+const DoubleHiresPreview = ({ binary }: { binary: Uint8Array }) => {
+    const canvasRef = useRef<HTMLCanvasElement>(null);
+    if (binary.byteLength < 16376 || binary.byteLength > 16384) {
+        return null;
+    }
+
+    if (canvasRef.current) {
+        const vm = new VideoModes2D(canvasRef.current, true);
+        const lores = new LoresPage2D(vm, 1, new Uint8Array(), false);
+        const hires = new HiresPage2D(vm, 1);
+        vm.setLoresPage(1, lores);
+        vm.setHiresPage(1, hires);
+        vm.text(false);
+        vm.hires(true);
+        vm._80col(true);
+        vm.doubleHires(true);
+        vm.page(1);
+
+        for (let idx = 0; idx < 0x20; idx++) {
+            for (let jdx = 0; jdx < 0x100; jdx++) {
+                hires.bank1().write(idx + 0x20, jdx, binary[idx * 0x100 + jdx]);
+            }
+        }
+        for (let idx = 0x20; idx < 0x40; idx++) {
+            for (let jdx = 0; jdx < 0x100; jdx++) {
+                hires.bank0().write(idx, jdx, binary[idx * 0x100 + jdx]);
+            }
+        }
+        vm.blit();
+    }
+
+    return <canvas ref={canvasRef} width={560} height={384} className={styles.hiresPreview} />;
+};
+
+/**
+ * Apple file preview component. Supports a binary dump and hires and
+ * double hires images.
+ *
+ * @param fileData
+ * @param onClose Close button callback
+ * @returns
+ */
+export const FileViewer = ({ fileData, onClose }: FileViewerProps) => {
+    const [binaryHref, setBinaryHref] = useState('');
+    const [textHref, setTextHref] = useState('');
+
+    useEffect(() => {
+        if (fileData) {
+            const { binary, text } = fileData;
+            const binaryBlob = new Blob(
+                [binary],
+                { type: 'application/octet-stream' }
+            );
+            const binaryHref = window.URL.createObjectURL(binaryBlob);
+            setBinaryHref(binaryHref);
+            const textBlob = new Blob(
+                [text],
+                { type: 'application/octet-stream' }
+            );
+            const textHref = window.URL.createObjectURL(textBlob);
+            setTextHref(textHref);
+        }
+    }, [fileData]);
+
+    if (!fileData) {
+        return null;
+    }
+
+    const { fileName, text, binary } = fileData;
+
+    return (
+        <>
+            <Modal isOpen={true} onClose={onClose} title={fileName}>
+                <ModalContent>
+                    <div className={styles.fileViewer}>
+                        <HiresPreview binary={binary} />
+                        <DoubleHiresPreview binary={binary} />
+                        <pre className={styles.textViewer} tabIndex={-1} >
+                            {text}
+                        </pre>
+                    </div>
+                </ModalContent>
+                <ModalFooter>
+                    <a
+                        download={`${fileName}.bin`}
+                        href={binaryHref}
+                        role="button"
+                    >
+                        Download Raw
+                    </a>
+                    <a
+                        download={`${fileName}.txt`}
+                        href={textHref}
+                        role="button"
+                    >
+                        Download Text
+                    </a>
+                    <button onClick={onClose}>Close</button>
+                </ModalFooter>
+            </Modal>
+        </>
+    );
+};
diff --git a/js/components/debugger/Memory.tsx b/js/components/debugger/Memory.tsx
new file mode 100644
index 0000000..6fa6e81
--- /dev/null
+++ b/js/components/debugger/Memory.tsx
@@ -0,0 +1,363 @@
+import { ComponentChildren, h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import cs from 'classnames';
+
+import { Apple2 as Apple2Impl } from 'js/apple2';
+import MMU from 'js/mmu';
+import LanguageCard from 'js/cards/langcard';
+
+import styles from './css/Memory.module.css';
+import debuggerStyles from './css/Debugger.module.css';
+
+/**
+ * Encapsulates the read/write status of a bank
+ */
+interface ReadWrite {
+    read: boolean;
+    write: boolean;
+}
+
+/**
+ * Encapsulates the read/write status of a language card
+ */
+ interface LC extends ReadWrite {
+    bank0: ReadWrite;
+    bank1: ReadWrite;
+    rom: ReadWrite;
+}
+
+/**
+ * Encapsulates the read/write status of an aux/main memory bank.
+ */
+interface Bank extends ReadWrite {
+    lc: LC;
+    hires: ReadWrite;
+    text: ReadWrite;
+    zp: ReadWrite;
+}
+
+/**
+ * Encapsulates the read/write status of aux main memory and rom banks.
+ */
+interface Banks {
+    main: Bank;
+    aux: Bank;
+    io: ReadWrite;
+    intcxrom: ReadWrite;
+}
+
+/**
+ * Computes a language card state for an MMU aux or main bank.
+ *
+ * @param mmu MMU object
+ * @param altzp Compute for main or aux bank
+ * @returns LC read/write state
+ */
+const calcLC = (mmu: MMU, altzp: boolean) => {
+    const read = mmu.readbsr && (mmu.altzp === altzp);
+    const write = mmu.writebsr && (mmu.altzp === altzp);
+    return {
+        read,
+        write,
+        bank0: {
+            read: read && !mmu.bank1,
+            write: write && !mmu.bank1,
+        },
+        bank1: {
+            read: read && mmu.bank1,
+            write: write && mmu.bank1,
+        },
+        rom: {
+            read: !mmu.readbsr,
+            write: !mmu.writebsr,
+        },
+    };
+};
+
+/**
+ * Computes the hires aux or main read/write status.
+ *
+ * @param mmu MMU object
+ * @param aux Compute for main or aux bank
+ * @returns Hires pags read/write state
+ */
+const calcHires = (mmu: MMU, aux: boolean) => {
+    const page2sel = mmu.hires && mmu._80store;
+    return {
+        read: page2sel ? mmu.page2 === aux : mmu.auxread === aux,
+        write: page2sel ? mmu.page2 === aux : mmu.auxwrite === aux,
+    };
+};
+
+/**
+ * Computes the text aux or main read/write status.
+ *
+ * @param mmu MMU object
+ * @param aux Compute for main or aux bank
+ * @returns Text page read/write state
+ */
+const calcText = (mmu: MMU, aux: boolean) => {
+    const page2sel = mmu._80store;
+    return {
+        read: page2sel ? mmu.page2 === aux : mmu.auxread === aux,
+        write: page2sel ? mmu.page2 === aux : mmu.auxwrite === aux,
+    };
+};
+
+/**
+ * Creates read/write state from a flag
+ *
+ * @param flag Read/write flag
+ * @returns A read/write state
+ */
+const readAndWrite = (flag: boolean) => {
+    return {
+        read: flag,
+        write: flag,
+    };
+};
+
+/**
+ * Computes the aux or main bank read/write status.
+ *
+ * @param mmu MMU object
+ * @param aux Compute for main or aux bank
+ * @returns read/write state
+ */
+const calcBanks = (mmu: MMU): Banks => {
+    return {
+        main: {
+            read: !mmu.auxread,
+            write: !mmu.auxwrite,
+            lc: calcLC(mmu, false),
+            hires: calcHires(mmu, false),
+            text: calcText(mmu, false),
+            zp: readAndWrite(!mmu.altzp),
+        },
+        aux: {
+            read: mmu.auxread,
+            write: mmu.auxwrite,
+            lc: calcLC(mmu, true),
+            hires: calcHires(mmu, true),
+            text: calcText(mmu, true),
+            zp: readAndWrite(mmu.altzp),
+        },
+        io: readAndWrite(!mmu.intcxrom),
+        intcxrom: readAndWrite(mmu.intcxrom),
+    };
+};
+
+/**
+ * Computes the read/write state of a language card.
+ *
+ * @param card The language card
+ * @returns read/write state
+ */
+const calcLanguageCard = (card: LanguageCard): LC => {
+    const read = card.readbsr;
+    const write = card.writebsr;
+    return {
+        read,
+        write,
+        bank0: {
+            read: read && !card.bsr2,
+            write: write && !card.bsr2,
+        },
+        bank1: {
+            read: read && card.bsr2,
+            write: write && card.bsr2,
+        },
+        rom: {
+            read: !card.readbsr,
+            write: !card.writebsr,
+        }
+    };
+};
+
+/**
+ * Computes the classes for a bank from read/write state.
+ *
+ * @param rw Read/write state
+ * @returns Classes
+ */
+const rw = (rw: ReadWrite) => {
+    return {
+        [styles.read]: rw.read,
+        [styles.write]: rw.write,
+        [styles.inactive]: !rw.write && !rw.read,
+    };
+};
+
+/**
+ * Properties for LanguageCard component
+ */
+interface LanguageCardMapProps {
+    lc: LC;
+    children?: ComponentChildren;
+}
+
+/**
+ * Language card state component use by both the MMU and LanguageCard
+ * visualizations.
+ *
+ * @param lc LC state
+ * @param children label component
+ * @returns LanguageCard component
+ */
+const LanguageCardMap = ({lc, children}: LanguageCardMapProps) => {
+    return (
+        <div className={cs(styles.bank)}>
+            <div className={cs(styles.lc, rw(lc))}>
+                {children} LC
+            </div>
+            <div className={styles.lcbanks}>
+                <div className={cs(styles.lcbank, styles.lcbank0, rw(lc.bank0))}>
+                    Bank 0
+                </div>
+                <div className={cs(styles.lcbank, rw(lc.bank1))}>
+                    Bank 1
+                </div>
+            </div>
+        </div>
+    );
+};
+
+/**
+ * Legend of state colors. Green for read, red for write, blue for both, grey for
+ * inactive.
+ *
+ * @returns Legend component
+ */
+const Legend = () => {
+    return (
+        <div>
+            <div>
+                <div className={cs(styles.read, styles.legend)}> </div> Read
+            </div>
+            <div>
+                <div className={cs(styles.write, styles.legend)}> </div> Write
+            </div>
+            <div>
+                <div className={cs(styles.write, styles.read, styles.legend)}> </div> Read/Write
+            </div>
+            <div>
+                <div className={cs(styles.inactive, styles.legend)}> </div> Inactive
+            </div>
+        </div>
+    );
+};
+
+/**
+ * Properties for the Memory component.
+ */
+export interface MemoryProps {
+    apple2: Apple2Impl | undefined;
+}
+
+/**
+ * Memory debugger component. Displays the active state of banks of
+ * memory - aux, 80 column and language card depending up the machine.
+ *
+ * @param apple2 Apple2 object
+ * @returns Memory component
+ */
+export const Memory = ({ apple2 }: MemoryProps) => {
+    const animationRef = useRef<number>(0);
+    const [banks, setBanks] = useState<Banks>();
+    const [lc, setLC] = useState<LC>();
+
+    const animate = useCallback(() => {
+        if (apple2) {
+            const mmu = apple2.getMMU();
+            if (mmu) {
+                setBanks(calcBanks(mmu));
+            } else {
+                const card = apple2.getIO().getSlot(0);
+                if (card instanceof LanguageCard) {
+                    setLC(calcLanguageCard(card));
+                }
+            }
+        }
+        animationRef.current = requestAnimationFrame(animate);
+    }, [apple2]);
+
+    useEffect(() => {
+        animationRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(animationRef.current);
+    }, [animate]);
+
+    if (banks) {
+        return (
+            <div className={styles.memory}>
+                <div className={debuggerStyles.heading}>MMU</div>
+                <div className={cs(styles.upperMemory, debuggerStyles.row)}>
+                    <LanguageCardMap lc={banks.aux.lc}>
+                        Aux
+                    </LanguageCardMap>
+                    <LanguageCardMap lc={banks.main.lc}>
+                        Main
+                    </LanguageCardMap>
+                    <div className={cs(styles.bank)}>
+                        <div className={cs(styles.rom, rw(banks.main.lc.rom))}>
+                            ROM
+                        </div>
+                    </div>
+                </div>
+                <div className={cs(debuggerStyles.row)}>
+                    <div className={cs(styles.io, rw(banks.io))}>
+                        IO
+                    </div>
+                    <div className={cs(styles.intcxrom, rw(banks.intcxrom))}>
+                        CXROM
+                    </div>
+                </div>
+                <div className={cs(styles.lowerMemory, debuggerStyles.row)}>
+                    <div className={cs(styles.bank, rw(banks.aux))}>
+                        Aux Mem
+                        <div className={cs(styles.hires, rw(banks.aux.hires))}>
+                            Hires
+                        </div>
+                        <div className={cs(styles.text, rw(banks.aux.text))}>
+                            Text/Lores
+                        </div>
+                        <div className={cs(styles.zp, rw(banks.aux.zp))}>
+                            Stack/ZP
+                        </div>
+                    </div>
+                    <div className={cs(styles.bank, rw(banks.main))}>
+                        Main Mem
+                        <div className={cs(styles.hires, rw(banks.main.hires))}>
+                            Hires
+                        </div>
+                        <div className={cs(styles.text, rw(banks.main.text))}>
+                            Text/Lores
+                        </div>
+                        <div className={cs(styles.zp, rw(banks.main.zp))}>
+                            <span>Stack/ZP</span>
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <Legend />
+            </div>
+        );
+    } else if (lc) {
+        return (
+            <div className={styles.memory}>
+                <div className={debuggerStyles.heading}>Language Card</div>
+                <div className={cs(debuggerStyles.row, styles.languageCard)}>
+                    <LanguageCardMap lc={lc} />
+                    <div className={cs(styles.bank)}>
+                        <div className={cs(styles.rom, rw(lc.rom))}>
+                            ROM
+                        </div>
+                    </div>
+                </div>
+                <hr />
+                <Legend />
+            </div>
+        );
+    } else {
+        return null;
+    }
+};
diff --git a/js/components/debugger/VideoModes.tsx b/js/components/debugger/VideoModes.tsx
new file mode 100644
index 0000000..ec0afaa
--- /dev/null
+++ b/js/components/debugger/VideoModes.tsx
@@ -0,0 +1,94 @@
+import { h } from 'preact';
+import { useCallback, useEffect, useRef, useState } from 'preact/hooks';
+import cs from 'classnames';
+
+import { Apple2 as Apple2Impl } from 'js/apple2';
+import { VideoPage } from 'js/videomodes';
+
+import styles from './css/VideoModes.module.css';
+import debuggerStyles from './css/Debugger.module.css';
+
+export interface VideoModesProps {
+    apple2: Apple2Impl | undefined;
+}
+
+const blit = (page: VideoPage, canvas: HTMLCanvasElement | null) => {
+    if (canvas) {
+        const context = canvas.getContext('2d');
+        if (context) {
+            context.putImageData(page.imageData, 0, 0);
+        }
+    }
+};
+
+export const VideoModes = ({ apple2 }: VideoModesProps) => {
+    const [text, setText] = useState(false);
+    const [hires, setHires] = useState(false);
+    const [page2, setPage2] = useState(false);
+    const canvas1 = useRef<HTMLCanvasElement>(null);
+    const canvas2 = useRef<HTMLCanvasElement>(null);
+    const canvas3 = useRef<HTMLCanvasElement>(null);
+    const canvas4 = useRef<HTMLCanvasElement>(null);
+    const animationRef = useRef<number>(0);
+
+    const animate = useCallback(() => {
+        if (apple2) {
+            const vm = apple2.getVideoModes();
+            const text = vm.isText();
+            const hires = vm.isHires();
+            const page2 = vm.isPage2();
+
+            vm.getLoresPage(1).refresh();
+            vm.getLoresPage(2).refresh();
+            vm.getHiresPage(1).refresh();
+            vm.getHiresPage(2).refresh();
+            blit(vm.getLoresPage(1), canvas1.current);
+            blit(vm.getLoresPage(2), canvas2.current);
+            blit(vm.getHiresPage(1), canvas3.current);
+            blit(vm.getHiresPage(2), canvas4.current);
+
+            setText(text);
+            setHires(hires);
+            setPage2(page2);
+        }
+        animationRef.current = requestAnimationFrame(animate);
+    }, [apple2]);
+
+    useEffect(() => {
+        animationRef.current = requestAnimationFrame(animate);
+        return () => cancelAnimationFrame(animationRef.current);
+    }, [animate]);
+
+    return (
+        <div className={styles.pages}>
+            <div className={debuggerStyles.row}>
+                <div className={cs(styles.page, {[styles.active]: (text || !hires) && !page2})}>
+                    <div className={debuggerStyles.heading}>
+                        Text/Lores Page 1
+                    </div>
+                    <canvas width="560" height="192" ref={canvas1} />
+                </div>
+                <div className={cs(styles.page, {[styles.active]: (text || !hires) && page2})}>
+                    <div className={debuggerStyles.heading}>
+                        Text/Lores Page 2
+                    </div>
+                    <canvas width="560" height="192" ref={canvas2} />
+                </div>
+            </div>
+            <div className={debuggerStyles.row}>
+                <div className={cs(styles.page, {[styles.active]: (!text && hires) && !page2})}>
+                    <div className={debuggerStyles.heading}>
+                        Hires Page 1
+                    </div>
+                    <canvas width="560" height="192" ref={canvas3} />
+                </div>
+                <div className={cs(styles.page, {[styles.active]: (!text && hires) && page2})}>
+                    <div className={debuggerStyles.heading}>
+                        Hires Page 2
+                    </div>
+                    <canvas width="560" height="192" ref={canvas4} />
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/js/components/debugger/css/Applesoft.module.css b/js/components/debugger/css/Applesoft.module.css
new file mode 100644
index 0000000..78c44b3
--- /dev/null
+++ b/js/components/debugger/css/Applesoft.module.css
@@ -0,0 +1,48 @@
+.listing {
+    width: calc(100% - 12px);
+    height: 320px;
+    overflow: auto;
+    white-space: pre-wrap;
+}
+
+.variables {
+    width: 100%;
+    height: 320px;
+    overflow: auto;
+}
+
+.variables table {
+    width: 100%;
+}
+
+.variables td {
+    background-color: #fff;
+    border: 1px inset;
+    white-space: pre;
+    font-family: monospace;
+}
+
+.internals {
+    width: 100%;
+}
+
+.internals table {
+    width: 100%;
+}
+
+.internals td {
+    background-color: #fff;
+    border: 1px inset;
+    white-space: pre;
+    font-family: monospace;
+    width: 30%;
+}
+
+.internals th {
+    width: 20%;
+    text-align: right;
+}
+
+.stack {
+    width: 10em;
+}
diff --git a/js/components/debugger/css/CPU.module.css b/js/components/debugger/css/CPU.module.css
new file mode 100644
index 0000000..b953324
--- /dev/null
+++ b/js/components/debugger/css/CPU.module.css
@@ -0,0 +1,35 @@
+.controls {
+    padding: 3px 0;
+    margin: 2px 0;
+}
+
+.zeroPage {
+    width: 53em;
+}
+
+.trace {
+    width: 53em;
+}
+
+.stack {
+    width: 10em;
+}
+
+.fileChooser {
+    padding: 5px 0;
+}
+
+.invalid {
+    color: #f00;
+}
+
+div.invalid {
+    position: relative;
+    display: inline-block;
+}
+
+div.invalid i {
+    position: absolute;
+    top: -9px;
+    left: -16px;
+}
diff --git a/js/components/debugger/css/Debugger.module.css b/js/components/debugger/css/Debugger.module.css
new file mode 100644
index 0000000..f9ef8d0
--- /dev/null
+++ b/js/components/debugger/css/Debugger.module.css
@@ -0,0 +1,54 @@
+.inset {
+    margin: 5px 10px 0;
+    display: flex;
+    flex-direction: column;
+    width: auto;
+}
+
+.heading {
+    font-weight: bold;
+    font-size: 18px;
+    margin: 5px 0;
+}
+
+.subHeading {
+    font-weight: bold;
+    font-size: 12px;
+}
+
+.row {
+    display: flex;
+    flex-direction: row;
+}
+
+.column {
+    display: flex;
+    flex-direction: column;
+}
+
+.debugger {
+    font-size: 12px;
+    width: 590px;
+}
+
+.debugger pre {
+    font-size: 9px;
+    background: white;
+    color: black;
+    padding: 3px;
+    margin: 2px;
+    border: 1px inset;
+}
+
+.debugger button,
+.debugger input {
+    font-size: 12px;
+}
+
+.debugger input[type="text"] {
+    border: 1px inset;
+}
+
+.debugger hr {
+    color: #c4c1a0;
+}
diff --git a/js/components/debugger/css/Disks.module.css b/js/components/debugger/css/Disks.module.css
new file mode 100644
index 0000000..b7d0bf8
--- /dev/null
+++ b/js/components/debugger/css/Disks.module.css
@@ -0,0 +1,50 @@
+.volume {
+    font-family: monospace;
+    width: 100%;
+    border: 1px inset;
+    background-color: white;
+    overflow-y: auto;
+    height: 320px;
+}
+
+.volume table {
+    border-spacing: 0;
+    width: 100%;
+}
+
+.volume tfoot td {
+    border-top: 1px solid black;
+}
+
+.volume thead th {
+    border-bottom: 1px solid black;
+    padding: 2px;
+}
+
+.volume tbody {
+    line-height: 0.8em;
+}
+
+.filename {
+    width: 16em;
+    max-width: 16em;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+}
+
+.deleted {
+    text-decoration: line-through;
+}
+
+.type {
+    width: 2em;
+}
+
+.sectors {
+    width: 2em;
+}
+
+.aux {
+    width: 3em;
+}
diff --git a/js/components/debugger/css/FileViewer.module.css b/js/components/debugger/css/FileViewer.module.css
new file mode 100644
index 0000000..ff335f4
--- /dev/null
+++ b/js/components/debugger/css/FileViewer.module.css
@@ -0,0 +1,28 @@
+.fileViewer {
+    width: 60em;
+    max-height: 60vh;
+    overflow-y: auto;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.textViewer {
+    background: white;
+    font-family: monospace;
+    width: 57em;
+    padding: 1em;
+    height: 60vh;
+    line-height: 1em;
+    overflow-y: auto;
+    border: 2px inset #f0edd0;
+    white-space: pre-wrap;
+}
+
+.hiresPreview {
+    border: 2px inset #f0edd0;
+    width: 560px;
+    height: 384px;
+    min-width: 560px;
+    min-height: 384px;
+}
diff --git a/js/components/debugger/css/Memory.module.css b/js/components/debugger/css/Memory.module.css
new file mode 100644
index 0000000..7995ee6
--- /dev/null
+++ b/js/components/debugger/css/Memory.module.css
@@ -0,0 +1,154 @@
+.memory {
+    width: auto;
+    box-sizing: border-box;
+}
+
+.bank {
+    width: 128px;
+    border-right: 1px solid #000;
+}
+
+.bank,
+.bank div,
+.io,
+.rom,
+.intcxrom {
+    text-align: center;
+    justify-content: center;
+}
+
+.upperMemory {
+    height: 96px;
+    width: 385px;
+    border-bottom: 1px solid #000;
+    border-left: 1px solid #000;
+    border-top: 1px solid #000;
+}
+
+.upperMemory .bank {
+    height: 96px;
+}
+
+.rom {
+    display: flex;
+    align-items: center;
+    height: 96px;
+    width: 128px;
+}
+
+.intcxrom {
+    display: flex;
+    align-items: center;
+    height: 32px;
+    width: 128px;
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
+}
+
+.languageCard {
+    width: 256px;
+    height: 96px;
+    border: 1px solid #000;
+}
+
+.lc {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: 127px;
+    height: 63px;
+}
+
+.lcbanks {
+    width: 127px;
+    display: flex;
+    flex-direction: row;
+}
+
+.lcbank {
+    display: flex;
+    align-items: center;
+    width: 64px;
+    height: 31px;
+    border-top: 1px solid #000;
+}
+
+.lcbank0 {
+    border-right: 1px solid #000;
+}
+
+.io {
+    display: flex;
+    align-items: center;
+    width: 255px;
+    height: 32px;
+    border-left: 1px solid #000;
+    border-right: 1px solid #000;
+    border-bottom: 1px solid #000;
+}
+
+.hires {
+    display: flex;
+    align-items: center;
+    height: 64px;
+    width: 127px;
+    position: absolute;
+    bottom: 64px;
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+}
+
+.text {
+    display: flex;
+    align-items: center;
+    height: 16px;
+    width: 127px;
+    position: absolute;
+    bottom: 24px;
+    border-top: 1px solid #000;
+    border-bottom: 1px solid #000;
+}
+
+.zp {
+    display: flex;
+    align-items: center;
+    height: 16px;
+    width: 127px;
+    position: absolute;
+    bottom: 0;
+    border-top: 1px solid #000;
+}
+
+.lowerMemory {
+    border-left: 1px solid #000;
+    border-bottom: 1px solid #000;
+    width: 256px;
+}
+
+.lowerMemory .bank {
+    height: 256px;
+    position: relative;
+}
+
+div.read {
+    background-color: #8f8;
+}
+
+div.write {
+    background-color: #f88;
+}
+
+div.read.write {
+    background-color: #88f;
+}
+
+div.inactive {
+    background-color: #bbb;
+}
+
+.legend {
+    width: 1em;
+    height: 1em;
+    display: inline-block;
+    border: 1px solid #000;
+}
diff --git a/js/components/debugger/css/VideoModes.module.css b/js/components/debugger/css/VideoModes.module.css
new file mode 100644
index 0000000..3f0a483
--- /dev/null
+++ b/js/components/debugger/css/VideoModes.module.css
@@ -0,0 +1,10 @@
+.pages canvas {
+    border: 1px inset;
+    width: 280px;
+    height: 192px;
+    margin: 5px;
+}
+
+.active canvas {
+    border: 1px inset #00f;
+}
diff --git a/js/components/hooks/useHash.ts b/js/components/hooks/useHash.ts
new file mode 100644
index 0000000..acfb0fa
--- /dev/null
+++ b/js/components/hooks/useHash.ts
@@ -0,0 +1,19 @@
+import { useEffect, useState } from 'preact/hooks';
+
+export const useHash = () => {
+    const [hash, setHash] = useState(window.location.hash);
+
+    const popstateListener = () => {
+        const hash = window.location.hash;
+        setHash(hash);
+    };
+
+    useEffect(() => {
+        window.addEventListener('popstate', popstateListener);
+        return () => {
+            window.removeEventListener('popstate', popstateListener);
+        };
+    }, []);
+
+    return hash;
+};
diff --git a/js/components/hooks/useHotKey.ts b/js/components/hooks/useHotKey.ts
new file mode 100644
index 0000000..ba70eb5
--- /dev/null
+++ b/js/components/hooks/useHotKey.ts
@@ -0,0 +1,25 @@
+import { useEffect } from 'preact/hooks';
+
+/**
+ * Hook to allow registering hotkey that will automatically
+ * be cleaned up when they leave scope
+ *
+ * @param key KeyboardEvent key value to match
+ * @param callback Invoked when key is pressed
+ */
+export const useHotKey = (key: string, callback: (ev: KeyboardEvent) => void) => {
+    useEffect(() => {
+        const onKeyDown = (ev: KeyboardEvent) => {
+            if (ev.key === key) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                callback(ev);
+            }
+        };
+        document.addEventListener('keydown', onKeyDown);
+
+        return () => {
+            document.removeEventListener('keydown', onKeyDown);
+        };
+    }, [key, callback]);
+};
diff --git a/js/components/hooks/usePrefs.ts b/js/components/hooks/usePrefs.ts
new file mode 100644
index 0000000..c68c70b
--- /dev/null
+++ b/js/components/hooks/usePrefs.ts
@@ -0,0 +1,7 @@
+import Prefs from 'js/prefs';
+
+// Todo(whscullin): More robust preferences
+
+const prefs = new Prefs();
+
+export const usePrefs = () => prefs;
diff --git a/js/components/util/files.ts b/js/components/util/files.ts
new file mode 100644
index 0000000..d365c35
--- /dev/null
+++ b/js/components/util/files.ts
@@ -0,0 +1,279 @@
+import Disk2 from 'js/cards/disk2';
+import SmartPort from 'js/cards/smartport';
+import Debugger from 'js/debugger';
+import {
+    BlockFormat,
+    BLOCK_FORMATS,
+    DISK_FORMATS,
+    DriveNumber,
+    FloppyFormat,
+    FLOPPY_FORMATS,
+    JSONDisk,
+    MassStorage,
+} from 'js/formats/types';
+import { includes, word } from 'js/types';
+import { initGamepad } from 'js/ui/gamepad';
+
+type ProgressCallback = (current: number, total: number) => void;
+
+/**
+ * Routine to split a legacy hash into parts for disk loading
+ *
+ * @returns an padded array for 1 based indexing
+ */
+export const getHashParts = (hash: string) => {
+    const parts = hash.match(/^#([^|]*)\|?(.*)$/) || ['', '', ''];
+    return ['', parts[1], parts[2]];
+};
+
+/**
+ * Update the location hash to reflect the current disk state, if possible
+ *
+ * @param parts a padded array with values starting at index 1
+ */
+export const setHashParts = (parts: string[]) => {
+    window.location.hash = `#${parts[1]}` + (parts[2] ? `|${parts[2]}` : '');
+};
+
+export const getNameAndExtension = (url: string) => {
+    const urlParts = url.split('/');
+    const file = urlParts.pop() || url;
+    const fileParts = file.split('.');
+    const ext = fileParts.pop()?.toLowerCase() || '[none]';
+    const name = decodeURIComponent(fileParts.join('.'));
+
+    return { name, ext };
+};
+
+export const loadLocalFile = (
+    storage: MassStorage<FloppyFormat|BlockFormat>,
+    formats: typeof FLOPPY_FORMATS | typeof BLOCK_FORMATS | typeof DISK_FORMATS,
+    number: DriveNumber,
+    file: File,
+) => {
+    return new Promise((resolve, reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = function () {
+            const result = this.result as ArrayBuffer;
+            const { name, ext } = getNameAndExtension(file.name);
+            if (includes(formats, ext)) {
+                initGamepad();
+                if (storage.setBinary(number, name, ext, result)) {
+                    resolve(true);
+                } else {
+                    reject(`Unable to load ${name}`);
+                }
+            } else {
+                reject(`Extension "${ext}" not recognized.`);
+            }
+        };
+        fileReader.readAsArrayBuffer(file);
+    });
+};
+
+/**
+ * Local file loading routine. Allows a File object from a file
+ * selection form element to be loaded.
+ *
+ * @param smartPort SmartPort object
+ * @param number Drive number
+ * @param file Browser File object to load
+ * @returns true if successful
+ */
+export const loadLocalBlockFile = (smartPort: SmartPort, number: DriveNumber, file: File) => {
+    return loadLocalFile(smartPort, BLOCK_FORMATS, number, file);
+};
+
+/**
+ * Local file loading routine. Allows a File object from a file
+ * selection form element to be loaded.
+ *
+ * @param disk2 Disk2 object
+ * @param number Drive number
+ * @param file Browser File object to load
+ * @returns true if successful
+ */
+export const loadLocalNibbleFile = (disk2: Disk2, number: DriveNumber, file: File) => {
+    return loadLocalFile(disk2, FLOPPY_FORMATS, number, file);
+};
+
+/**
+ * JSON loading routine, loads a JSON file at the given URL. Requires
+ * proper cross domain loading headers if the URL is not on the same server
+ * as the emulator.
+ *
+ * @param disk2 Disk2 object
+ * @param number Drive number
+ * @param url URL, relative or absolute to JSON file
+ * @returns true if successful
+ */
+export const loadJSON = async (
+    disk2: Disk2,
+    number: DriveNumber,
+    url: string,
+) => {
+    const response = await fetch(url);
+    if (!response.ok) {
+        throw new Error(`Error loading: ${response.statusText}`);
+    }
+    const data = await response.json() as JSONDisk;
+    if (!includes(FLOPPY_FORMATS, data.type)) {
+        throw new Error(`Type "${data.type}" not recognized.`);
+    }
+    disk2.setDisk(number, data);
+    initGamepad(data.gamepad);
+};
+
+export const loadHttpFile = async (
+    url: string,
+    signal?: AbortSignal,
+    onProgress?: ProgressCallback,
+): Promise<ArrayBuffer> => {
+    const response = await fetch(url, signal ? { signal } : {});
+    if (!response.ok) {
+        throw new Error(`Error loading: ${response.statusText}`);
+    }
+    if (!response.body) {
+        throw new Error('Error loading: no body');
+    }
+    const reader = response.body.getReader();
+    const contentLength = parseInt(response.headers.get('content-length') || '0', 10);
+    let received = 0;
+    const chunks: Uint8Array[] = [];
+
+    let result = await reader.read();
+    onProgress?.(1, contentLength);
+    while (!result.done) {
+        chunks.push(result.value);
+        received += result.value.length;
+        onProgress?.(received, contentLength);
+        result = await reader.read();
+    }
+
+    const data = new Uint8Array(received);
+    let offset = 0;
+    for (const chunk of chunks) {
+        data.set(chunk, offset);
+        offset += chunk.length;
+    }
+
+    return data.buffer;
+};
+
+/**
+ * HTTP loading routine, loads a file at the given URL. Requires
+ * proper cross domain loading headers if the URL is not on the same server
+ * as the emulator.
+ *
+ * @param smartPort SmartPort object
+ * @param number Drive number
+ * @param url URL, relative or absolute to JSON file
+ * @returns true if successful
+ */
+export const loadHttpBlockFile = async (
+    smartPort: SmartPort,
+    number: DriveNumber,
+    url: string,
+    signal?: AbortSignal,
+    onProgress?: ProgressCallback
+): Promise<boolean> => {
+    const { name, ext } = getNameAndExtension(url);
+    if (!includes(BLOCK_FORMATS, ext)) {
+        throw new Error(`Extension "${ext}" not recognized.`);
+    }
+    const data = await loadHttpFile(url, signal, onProgress);
+    smartPort.setBinary(number, name, ext, data);
+    initGamepad();
+
+    return true;
+};
+
+/**
+ * HTTP loading routine, loads a file at the given URL. Requires
+ * proper cross domain loading headers if the URL is not on the same server
+ * as the emulator.
+ *
+ * @param disk2 Disk2 object
+ * @param number Drive number
+ * @param url URL, relative or absolute to JSON file
+ * @returns true if successful
+ */
+export const loadHttpNibbleFile = async (
+    disk2: Disk2,
+    number: DriveNumber,
+    url: string,
+    signal?: AbortSignal,
+    onProgress?: ProgressCallback
+) => {
+    if (url.endsWith('.json')) {
+        return loadJSON(disk2, number, url);
+    }
+    const { name, ext } = getNameAndExtension(url);
+    if (!includes(FLOPPY_FORMATS, ext)) {
+        throw new Error(`Extension "${ext}" not recognized.`);
+    }
+    const data = await loadHttpFile(url, signal, onProgress);
+    disk2.setBinary(number, name, ext, data);
+    initGamepad();
+    return loadHttpFile(url, signal, onProgress);
+};
+
+export const loadHttpUnknownFile = async (
+    smartStorageBroker: SmartStorageBroker,
+    number: DriveNumber,
+    url: string,
+    signal?: AbortSignal,
+    onProgress?: ProgressCallback,
+) => {
+    const data = await loadHttpFile(url, signal, onProgress);
+    const { name, ext } = getNameAndExtension(url);
+    smartStorageBroker.setBinary(number, name, ext, data);
+};
+
+export class SmartStorageBroker implements MassStorage<unknown> {
+    constructor(private disk2: Disk2, private smartPort: SmartPort) {}
+
+    setBinary(drive: DriveNumber, name: string, ext: string, data: ArrayBuffer): boolean {
+        if (includes(DISK_FORMATS, ext)) {
+            if (data.byteLength >= 800 * 1024) {
+                if (includes(BLOCK_FORMATS, ext)) {
+                    this.smartPort.setBinary(drive, name, ext, data);
+                } else {
+                    throw new Error(`Unable to load "${name}"`);
+                }
+            } else if (includes(FLOPPY_FORMATS, ext)) {
+                this.disk2.setBinary(drive, name, ext, data);
+            } else {
+                throw new Error(`Unable to load "${name}"`);
+            }
+        } else {
+            throw new Error(`Extension "${ext}" not recognized.`);
+        }
+        return true;
+    }
+
+    getBinary(_drive: number) {
+        return null;
+    }
+}
+
+/**
+ * Load binary file into memory.
+ *
+ * @param file File object to read into memory
+ * @param address Address at which to start load
+ * @param debug Debugger object
+ * @returns resolves to true if successful
+ */
+export const loadLocalBinaryFile = (file: File, address: word, debug: Debugger) => {
+    return new Promise((resolve, _reject) => {
+        const fileReader = new FileReader();
+        fileReader.onload = function () {
+            const result = this.result as ArrayBuffer;
+            const bytes = new Uint8Array(result);
+            debug.setMemory(address, bytes);
+            resolve(true);
+        };
+        fileReader.readAsArrayBuffer(file);
+    });
+};
diff --git a/js/components/util/keyboard.ts b/js/components/util/keyboard.ts
new file mode 100644
index 0000000..c58a340
--- /dev/null
+++ b/js/components/util/keyboard.ts
@@ -0,0 +1,256 @@
+import { JSX } from 'preact';
+import { DeepMemberOf, KnownKeys } from '../../types';
+
+export const SPECIAL_KEY_MAP = {
+    'Shift': 'SHIFT',
+    'Enter': 'RETURN',
+    'CapsLock': 'LOCK',
+    'Control': 'CTRL',
+    'Escape': 'ESC',
+    'Delete': 'RESET',
+    'Tab': 'TAB',
+    'Backspace': 'DELETE',
+    'ArrowUp': '&uarr;',
+    'ArrowDown': '&darr;',
+    'ArrowRight': '&rarr;',
+    'ArrowLeft': '&larr;',
+    // UiKit symbols
+    'UIKeyInputLeftArrow': '&larr;',
+    'UIKeyInputRightArrow': '&rarr;',
+    'UIKeyInputUpArrow': '&uarr;',
+    'UIKeyInputDownArrow': '&darr;',
+    'UIKeyInputEscape': 'ESC',
+} as const;
+
+export const isSpecialKey = (k: string): k is KnownKeys<typeof SPECIAL_KEY_MAP> => {
+    return k in SPECIAL_KEY_MAP;
+};
+
+export const SPECIAL_KEY_CODE = {
+    'TAB': 9,
+    'RETURN': 13,
+    'ESC': 27,
+    '&uarr;': 11,
+    '&darr;': 10,
+    '&rarr;': 21,
+    '&larr;': 8,
+    'DELETE': 127,
+} as const;
+
+export const hasSpecialKeyCode = (k: string): k is KnownKeys<typeof SPECIAL_KEY_CODE> => {
+    return k in SPECIAL_KEY_CODE;
+};
+
+/**
+ * Keyboard layout for the Apple ][ / ][+
+ */
+export const keys2 = [
+    [
+        ['1', '2', '3', '4', '5', '6', '7', '8', '9', '0', ':', '-', 'RESET'],
+        ['ESC', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', 'REPT', 'RETURN'],
+        ['CTRL', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '&larr;', '&rarr;'],
+        ['SHIFT', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'SHIFT'],
+        ['POWER', '&nbsp;']
+    ], [
+        ['!', '"', '#', '$', '%', '&', '\'', '(', ')', '0', '*', '=', 'RESET'],
+        ['ESC', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', '@', 'REPT', 'RETURN'],
+        ['CTRL', 'A', 'S', 'D', 'F', 'BELL', 'H', 'J', 'K', 'L', '+', '&larr;', '&rarr;'],
+        ['SHIFT', 'Z', 'X', 'C', 'V', 'B', '^', ']', '<', '>', '?', 'SHIFT'],
+        ['POWER', '&nbsp;']
+    ]
+] as const;
+
+export type Key2 = DeepMemberOf<typeof keys2>;
+
+/**
+ * Keyboard layout for the Apple //e
+ */
+export const keys2e = [
+    [
+        ['ESC', '1', '2', '3', '4', '5', '6', '7', '8', '9', '0', '-', '=', 'DELETE'],
+        ['TAB', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '[', ']', '\\'],
+        ['CTRL', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ';', '"', 'RETURN'],
+        ['SHIFT', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', ',', '.', '/', 'SHIFT'],
+        ['LOCK', '`', 'POW', 'OPEN_APPLE', '&nbsp;', 'CLOSED_APPLE', '&larr;', '&rarr;', '&darr;', '&uarr;']
+    ], [
+        ['ESC', '!', '@', '#', '$', '%', '^', '&', '*', '(', ')', '_', '+', 'DELETE'],
+        ['TAB', 'Q', 'W', 'E', 'R', 'T', 'Y', 'U', 'I', 'O', 'P', '{', '}', '|'],
+        ['CTRL', 'A', 'S', 'D', 'F', 'G', 'H', 'J', 'K', 'L', ':', '\'', 'RETURN'],
+        ['SHIFT', 'Z', 'X', 'C', 'V', 'B', 'N', 'M', '<', '>', '?', 'SHIFT'],
+        ['CAPS', '~', 'POW', 'OPEN_APPLE', '&nbsp;', 'CLOSED_APPLE', '&larr;', '&rarr;', '&darr;', '&uarr;']
+    ]
+] as const;
+
+/** Shifted */
+const SHIFTED = {
+    '!' : '1' ,
+    '@' : '2' ,
+    '#' : '3' ,
+    '$' : '4' ,
+    '%' : '5' ,
+    '^' : '6' ,
+    '&' : '7' ,
+    '*' : '8' ,
+    '(' : '9' ,
+    ')' : '0' ,
+    '_' : '-' ,
+    '+' : '=' ,
+    '{' : '[' ,
+    '}' : ']' ,
+    '|' : '\\',
+    ':' : ';' ,
+    '\'' : '"',
+    '<' : ',' ,
+    '>' : '.' ,
+    '?' : '/' ,
+    '~' : '`' ,
+} as const;
+
+export const isShiftyKey = (k: string): k is KnownKeys<typeof SHIFTED> => {
+    return k in SHIFTED;
+};
+
+export type Key2e = DeepMemberOf<typeof keys2e>;
+
+export type Key = Key2 | Key2e;
+
+export type KeyFunction = (key: KeyboardEvent) => void;
+
+/**
+ * Convert a DOM keyboard event into an ASCII equivalent that
+ * an Apple II can recognize.
+ *
+ * @param evt Event to convert
+ * @param caps Caps Lock state
+ * @returns a tuple of:
+ *     * `key`: the symbol of the key
+ *     * `keyLabel`: the label on the keycap
+ *     * `keyCode`: the corresponding byte for the Apple II
+ */
+export const mapKeyboardEvent = (event: KeyboardEvent, caps: boolean = false, control: boolean = false) => {
+    let key: string;
+    if (isSpecialKey(event.key)) {
+        key = SPECIAL_KEY_MAP[event.key];
+    } else if (event.key === 'Alt') {
+        key = event.location === 1 ? 'OPEN_APPLE' : 'CLOSED_APPLE';
+    } else {
+        key = event.key;
+    }
+
+    let keyLabel = key;
+    if (key.length === 1) {
+        if (isShiftyKey(key)) {
+            keyLabel = SHIFTED[key];
+        } else {
+            keyLabel = key.toUpperCase();
+        }
+    }
+
+    let keyCode = 0xff;
+    if (hasSpecialKeyCode(key)) {
+        keyCode = SPECIAL_KEY_CODE[key];
+    } else if  (key.length === 1) {
+        keyCode = key.charCodeAt(0);
+    }
+    if ((caps || control) && keyCode >= 0x61 && keyCode <= 0x7A) {
+        keyCode -= 0x20;
+    }
+    if (control && keyCode >= 0x40 && keyCode < 0x60) {
+        keyCode -= 0x40;
+    }
+
+    return { key, keyLabel, keyCode};
+};
+
+/**
+ * Convert a mouse event into an ASCII character based on the
+ * data attached to the target DOM element.
+ *
+ * @param event Event to convert
+ * @param shifted Shift key state
+ * @param controlled Control key state
+ * @param caps Caps Lock state
+ * @param e //e status
+ * @returns ASCII character
+ */
+export const mapMouseEvent = (
+    event: JSX.TargetedMouseEvent<HTMLElement>,
+    shifted: boolean,
+    controlled: boolean,
+    caps: boolean,
+    e: boolean,
+) => {
+    const keyLabel = event.currentTarget?.dataset.key2 ?? '';
+    let key = event.currentTarget?.dataset[shifted ? 'key2' : 'key1'] ?? '';
+    let keyCode = 0xff;
+
+    switch (key) {
+        case 'BELL':
+            key = 'G';
+            break;
+        case 'RETURN':
+            key = '\r';
+            break;
+        case 'TAB':
+            key = '\t';
+            break;
+        case 'DELETE':
+            key = '\x7F';
+            break;
+        case '&larr;':
+            key = '\x08';
+            break;
+        case '&rarr;':
+            key = '\x15';
+            break;
+        case '&darr;':
+            key = '\x0A';
+            break;
+        case '&uarr;':
+            key = '\x0B';
+            break;
+        case '&nbsp;':
+            key = ' ';
+            break;
+        case 'ESC':
+            key = '\x1B';
+            break;
+        default:
+            break;
+    }
+
+    if (key.length === 1) {
+        if (controlled && key >= '@' && key <= '_') {
+            keyCode = key.charCodeAt(0) - 0x40;
+        } else if (
+            e && !shifted && !caps &&
+            key >= 'A' && key <= 'Z'
+        ) {
+            keyCode = key.charCodeAt(0) + 0x20;
+        } else {
+            keyCode = key.charCodeAt(0);
+        }
+    }
+    return { keyCode, key, keyLabel };
+};
+
+/**
+ * Remap keys so that upper and lower are a tuple per row instead of
+ * separate rows
+ *
+ * @param inKeys keys2 or keys2e
+ * @returns Keys remapped
+ */
+export const keysAsTuples = (inKeys: typeof keys2e | typeof keys2): string[][][] => {
+    const rows = [];
+    for (let idx = 0; idx < inKeys[0].length; idx++) {
+        const upper = inKeys[0][idx];
+        const lower = inKeys[1][idx];
+        const keys = [];
+        for (let jdx = 0; jdx < upper.length; jdx++) {
+            keys.push([upper[jdx], lower[jdx]]);
+        }
+        rows.push(keys);
+    }
+    return rows;
+};
diff --git a/js/components/util/promises.ts b/js/components/util/promises.ts
new file mode 100644
index 0000000..704fec4
--- /dev/null
+++ b/js/components/util/promises.ts
@@ -0,0 +1,45 @@
+/**
+ * Converts a function type returning a `Promise` to a function type returning `void`.
+ */
+export type NoAwait<F extends (...args: unknown[]) => Promise<unknown>> =
+    (...args: Parameters<F>) => void;
+
+/**
+ * Signals that the argument returns a `Promise` that is intentionally not being awaited.
+ */
+export function noAwait<F extends (...args: unknown[]) => Promise<unknown>>(f: F): NoAwait<F> {
+    return f as NoAwait<F>;
+}
+
+/**
+ * Calls the given `Promise`-returning function, `f`, and does not await
+ * the result. The function `f` is passed an {@link Interrupted} function
+ * that returns `true` if it should stop doing work.  `spawn` returns an
+ * {@link Interrupt} function that, when called, causes the `Interrupted`
+ * function to return `true`. This can be used in `useEffect` calls as the
+ * cleanup function.
+ */
+export function spawn(f: (abortSignal: AbortSignal) => Promise<unknown>): AbortController {
+    const abortController = new AbortController();
+    noAwait(f)(abortController.signal);
+    return abortController;
+}
+
+/**
+ * Utility class that allows a promise to be passed to a
+ * service to be resolved.
+ */
+
+export class Ready {
+    onError: (value?: unknown) => void;
+    onReady: (value?: unknown) => void;
+
+    ready: Promise<unknown>;
+
+    constructor(private errorHandler = console.error) {
+        this.ready = new Promise((resolve, reject) => {
+            this.onReady = resolve;
+            this.onError = reject;
+        }).catch(this.errorHandler);
+    }
+}
diff --git a/js/components/util/systems.ts b/js/components/util/systems.ts
new file mode 100644
index 0000000..4653c4d
--- /dev/null
+++ b/js/components/util/systems.ts
@@ -0,0 +1,71 @@
+export interface SystemType {
+    rom: string;
+    characterRom: string;
+    e: boolean;
+    enhanced: boolean;
+    sectors: 13 | 16;
+}
+
+// Enhanced Apple //e
+
+export const defaultSystem = {
+    rom: 'apple2enh',
+    characterRom: 'apple2enh_char',
+    e: true,
+    enhanced: true,
+    sectors: 16,
+} as const;
+
+export const systemTypes: Record<string, Partial<SystemType>> = {
+    // Apple //e
+    apple2e: {
+        rom: 'apple2e',
+        characterRom: 'apple2e_char',
+        enhanced: false
+    },
+    apple2rm: {
+        characterRom: 'rmfont_char',
+    },
+    apple2ex: {
+        rom: 'apple2ex',
+        e: false,
+    },
+
+    // Apple ][s
+    apple2: {
+        rom: 'intbasic',
+        characterRom: 'apple2_char',
+        e: false,
+    },
+    apple213: {
+        rom: 'intbasic',
+        characterRom: 'apple2_char',
+        e: false,
+        sectors: 13,
+    },
+    original: {
+        rom: 'original',
+        characterRom: 'apple2_char',
+        e: false,
+    },
+    apple2jplus: {
+        rom: 'apple2j',
+        characterRom: 'apple2j_char',
+        e: false,
+    },
+    apple2pig: {
+        rom: 'fpbasic',
+        characterRom: 'pigfont_char',
+        e: false,
+    },
+    apple2lc:{
+        rom: 'fpbasic',
+        characterRom: 'apple2lc_char',
+        e: false,
+    },
+    apple2plus: {
+        rom: 'fpbasic',
+        characterRom: 'apple2_char',
+        e: false,
+    }
+} as const;
diff --git a/js/cpu6502.ts b/js/cpu6502.ts
index 8cfa08d..ada5640 100644
--- a/js/cpu6502.ts
+++ b/js/cpu6502.ts
@@ -1,37 +1,41 @@
-/*
- * Copyright 2010-2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
+import { Memory, MemberOf, MemoryPages, byte, word } from './types';
+import { toHex } from './util';
 
-import { Memory, MemoryPages, byte, word } from './types';
-import { debug, toHex } from './util';
+export const FLAVOR_6502 = '6502';
+export const FLAVOR_ROCKWELL_65C02 = 'rockwell65c02';
+export const FLAVOR_WDC_65C02 = 'wdc65c02';
+
+export const FLAVORS_65C02 = [
+    FLAVOR_ROCKWELL_65C02,
+    FLAVOR_WDC_65C02
+];
+
+export const FLAVORS = [
+    FLAVOR_6502,
+    ...FLAVORS_65C02
+];
+
+export type Flavor = MemberOf<typeof FLAVORS>;
 
 export interface CpuOptions {
-    '65C02'?: boolean;
+    flavor?: Flavor;
 }
 
 export interface CpuState {
     /** Accumulator */
-    a: byte,
+    a: byte;
     /** X index */
-    x: byte,
+    x: byte;
     /** Y index */
-    y: byte,
+    y: byte;
     /** Status register */
-    s: byte,
+    s: byte;
     /** Program counter */
-    pc: word,
+    pc: word;
     /** Stack pointer */
-    sp: byte,
+    sp: byte;
     /** Elapsed cycles */
-    cycles: number
+    cycles: number;
 }
 
 export type Mode =
@@ -86,19 +90,19 @@ export type flag = 0x80 | 0x40 | 0x20 | 0x10 | 0x08 | 0x04 | 0x02 | 0x01;
  */
 export type DebugInfo = {
     /** Program counter */
-    pc: word,
+    pc: word;
     /** Accumulator */
-    ar: byte,
+    ar: byte;
     /** X index */
-    xr: byte,
+    xr: byte;
     /** Y index */
-    yr: byte,
+    yr: byte;
     /** Status register */
-    sr: byte,
+    sr: byte;
     /** Stack pointer */
-    sp: byte,
+    sp: byte;
     /** Current command */
-    cmd: byte[],
+    cmd: byte[];
 };
 
 /** Flags to status byte mask. */
@@ -131,7 +135,7 @@ function isResettablePageHandler(pageHandler: MemoryPages | ResettablePageHandle
 
 const BLANK_PAGE: Memory = {
     read: function () { return 0; },
-    write: function () { }
+    write: function () { /* not writable */ }
 };
 
 interface Opts {
@@ -141,13 +145,13 @@ interface Opts {
 type ReadFn = () => byte;
 type WriteFn = (val: byte) => void;
 type ReadAddrFn = (opts?: Opts) => word;
-type ImpliedFn = () => void
+type ImpliedFn = () => void;
 
-interface Instruction<T = any> {
-    name: string
-    mode: Mode
-    op: (fn: T) => void
-    modeFn: T
+interface Instruction<T = unknown> {
+    name: string;
+    mode: Mode;
+    op: (fn: T) => void;
+    modeFn: T;
 }
 
 type StrictInstruction =
@@ -157,13 +161,15 @@ type StrictInstruction =
     Instruction<ImpliedFn> |
     Instruction<flag> |
     Instruction<flag|0> |
-    Instruction<byte>
+    Instruction<byte>;
 
-type Instructions = Record<byte, StrictInstruction>
+type Instructions = Record<byte, StrictInstruction>;
 
 type callback = (cpu: CPU6502) => boolean | void;
 
 export default class CPU6502 {
+    /** flavor */
+    private readonly flavor: Flavor;
     /** 65C02 emulation mode flag */
     private readonly is65C02: boolean;
 
@@ -174,7 +180,7 @@ export default class CPU6502 {
     /** Program counter */
     private pc: word = 0;
     /** Status register */
-    private sr: byte = flags.X
+    private sr: byte = flags.X;
     /** Accumulator */
     private ar: byte = 0;
     /** X index */
@@ -185,12 +191,12 @@ export default class CPU6502 {
     private sp: byte = 0xff;
 
     /** Current instruction */
-    private op: Instruction
+    private op: Instruction;
     /** Last accessed memory address */
     private addr: word = 0;
 
     /** Filled array of memory handlers by address page */
-    private memPages: Memory[] = new Array(0x100);
+    private memPages: Memory[] = new Array<Memory>(0x100);
     /** Callbacks invoked on reset signal */
     private resetHandlers: ResettablePageHandler[] = [];
     /** Elapsed cycles */
@@ -198,11 +204,17 @@ export default class CPU6502 {
     /** Command being fetched signal */
     private sync = false;
 
+    /** Processor is in WAI mode */
+    private wait = false;
+    /** Processor is in STP mode */
+    private stop = false;
+
     /** Filled array of CPU operations */
     private readonly opary: Instruction[];
 
-    constructor(options: CpuOptions = {}) {
-        this.is65C02 = options['65C02'] ? true : false;
+    constructor({ flavor }: CpuOptions = {}) {
+        this.flavor = flavor ?? FLAVOR_6502;
+        this.is65C02 = !!flavor && FLAVORS_65C02.includes(flavor);
 
         this.memPages.fill(BLANK_PAGE);
         this.memPages.fill(BLANK_PAGE);
@@ -210,17 +222,35 @@ export default class CPU6502 {
         // Create this CPU's instruction table
 
         let ops = { ...this.OPS_6502 };
-        if (this.is65C02) {
-            ops = { ...ops, ...this.OPS_65C02 };
+
+        switch (this.flavor) {
+            case FLAVOR_WDC_65C02:
+                ops = {
+                    ...ops,
+                    ...this.OPS_65C02,
+                    ...this.OPS_WDC_65C02,
+                };
+                break;
+            case FLAVOR_ROCKWELL_65C02:
+                ops = {
+                    ...ops,
+                    ...this.OPS_65C02,
+                    ...this.OPS_ROCKWELL_65C02,
+                };
+                break;
+            default:
+                ops = {
+                    ...ops,
+                    ...this.OPS_NMOS_6502,
+                };
         }
 
         // Certain browsers benefit from using arrays over maps
-        const opary: Instruction[] = new Array(0x100);
+        this.opary = new Array<Instruction>(0x100);
 
         for (let idx = 0; idx < 0x100; idx++) {
-            opary[idx] = ops[idx] || this.unknown(idx);
+            this.opary[idx] = ops[idx] || this.unknown(idx);
         }
-        this.opary = opary;
     }
 
     /**
@@ -274,7 +304,11 @@ export default class CPU6502 {
                 n = bin >> 7;
                 z = !bin;
                 if (this.op.mode === 'immediate') {
-                    this.readByte(sub ? 0xB8 : 0x7F);
+                    if (this.flavor === FLAVOR_WDC_65C02) {
+                        this.readByte(sub ? 0xB8 : 0x7F);
+                    } else { // rockwell65c02
+                        this.readByte(sub ? 0xB1 : 0x59);
+                    }
                 } else {
                     this.readByte(this.addr);
                 }
@@ -437,7 +471,7 @@ export default class CPU6502 {
 
     implied = () => {
         this.readByte(this.pc);
-    }
+    };
 
     /*
      * Read functions
@@ -446,17 +480,17 @@ export default class CPU6502 {
     // #$00
     readImmediate = (): byte => {
         return this.readBytePC();
-    }
+    };
 
     // $0000
     readAbsolute = (): byte => {
         return this.readByte(this.readWordPC());
-    }
+    };
 
     // $00
     readZeroPage = (): byte => {
         return this.readByte(this.readBytePC());
-    }
+    };
 
     // $0000,X
     readAbsoluteX = (): byte => {
@@ -465,7 +499,7 @@ export default class CPU6502 {
         const addrIdx = (addr + this.xr) & 0xffff;
         this.workCycleIndexedRead(pc, addr, addrIdx);
         return this.readByte(addrIdx);
-    }
+    };
 
     // $0000,Y
     readAbsoluteY = (): byte => {
@@ -474,21 +508,21 @@ export default class CPU6502 {
         const addrIdx = (addr + this.yr) & 0xffff;
         this.workCycleIndexedRead(pc, addr, addrIdx);
         return this.readByte(addrIdx);
-    }
+    };
 
     // $00,X
     readZeroPageX = (): byte => {
         const zpAddr = this.readBytePC();
         this.readByte(zpAddr);
         return this.readByte((zpAddr + this.xr) & 0xff);
-    }
+    };
 
     // $00,Y
     readZeroPageY = (): byte => {
         const zpAddr = this.readBytePC();
         this.readByte(zpAddr);
         return this.readByte((zpAddr + this.yr) & 0xff);
-    }
+    };
 
     // ($00,X)
     readZeroPageXIndirect = (): byte => {
@@ -496,7 +530,7 @@ export default class CPU6502 {
         this.readByte(zpAddr);
         const addr = this.readZPWord((zpAddr + this.xr) & 0xff);
         return this.readByte(addr);
-    }
+    };
 
     // ($00),Y
     readZeroPageIndirectY = (): byte => {
@@ -506,12 +540,12 @@ export default class CPU6502 {
         const addrIdx = (addr + this.yr) & 0xffff;
         this.workCycleIndexedRead(pc, addr, addrIdx);
         return this.readByte(addrIdx);
-    }
+    };
 
     // ($00) (65C02)
     readZeroPageIndirect = (): byte => {
         return this.readByte(this.readZPWord(this.readBytePC()));
-    }
+    };
 
     /*
      * Write Functions
@@ -520,12 +554,12 @@ export default class CPU6502 {
     // $0000
     writeAbsolute = (val: byte) => {
         this.writeByte(this.readWordPC(), val);
-    }
+    };
 
     // $00
     writeZeroPage = (val: byte) => {
         this.writeByte(this.readBytePC(), val);
-    }
+    };
 
     // $0000,X
     writeAbsoluteX = (val: byte) => {
@@ -534,7 +568,7 @@ export default class CPU6502 {
         const addrIdx = (addr + this.xr) & 0xffff;
         this.workCycleIndexedWrite(pc, addr, addrIdx);
         this.writeByte(addrIdx, val);
-    }
+    };
 
     // $0000,Y
     writeAbsoluteY = (val: byte) => {
@@ -543,21 +577,21 @@ export default class CPU6502 {
         const addrIdx = (addr + this.yr) & 0xffff;
         this.workCycleIndexedWrite(pc, addr, addrIdx);
         this.writeByte(addrIdx, val);
-    }
+    };
 
     // $00,X
     writeZeroPageX = (val: byte) => {
         const zpAddr = this.readBytePC();
         this.readByte(zpAddr);
         this.writeByte((zpAddr + this.xr) & 0xff, val);
-    }
+    };
 
     // $00,Y
     writeZeroPageY = (val: byte) => {
         const zpAddr = this.readBytePC();
         this.readByte(zpAddr);
         this.writeByte((zpAddr + this.yr) & 0xff, val);
-    }
+    };
 
     // ($00,X)
     writeZeroPageXIndirect = (val: byte) => {
@@ -565,7 +599,7 @@ export default class CPU6502 {
         this.readByte(zpAddr);
         const addr = this.readZPWord((zpAddr + this.xr) & 0xff);
         this.writeByte(addr, val);
-    }
+    };
 
     // ($00),Y
     writeZeroPageIndirectY = (val: byte) => {
@@ -575,29 +609,29 @@ export default class CPU6502 {
         const addrIdx = (addr + this.yr) & 0xffff;
         this.workCycleIndexedWrite(pc, addr, addrIdx);
         this.writeByte(addrIdx, val);
-    }
+    };
 
     // ($00) (65C02)
     writeZeroPageIndirect = (val: byte) => {
         this.writeByte(this.readZPWord(this.readBytePC()), val);
-    }
+    };
 
     // $00
     readAddrZeroPage = () => {
         return this.readBytePC();
-    }
+    };
 
     // $00,X
     readAddrZeroPageX = () => {
         const zpAddr = this.readBytePC();
         this.readByte(zpAddr);
         return (zpAddr + this.xr) & 0xff;
-    }
+    };
 
     // $0000 (65C02)
     readAddrAbsolute = (): word => {
         return this.readWordPC();
-    }
+    };
 
     // ($0000) (6502)
     readAddrAbsoluteIndirectBug = (): word => {
@@ -607,14 +641,14 @@ export default class CPU6502 {
         const lsb = this.readByte(addr);
         const msb = this.readByte(page | ((off + 0x01) & 0xff));
         return msb << 8 | lsb;
-    }
+    };
 
     // ($0000) (65C02)
     readAddrAbsoluteIndirect = (): word => {
         const addr = this.readWord(this.readWordPC());
         this.readByte(this.addr);
         return addr;
-    }
+    };
 
     // $0000,X
     readAddrAbsoluteX = (opts?: Opts): word => {
@@ -635,7 +669,35 @@ export default class CPU6502 {
             this.readByte(page | off);
         }
         return addr;
-    }
+    };
+
+    // $0000,Y (NMOS 6502)
+    readAddrAbsoluteY = (): word => {
+        let addr = this.readWordPC();
+        const page = addr & 0xff00;
+        addr = (addr + this.yr) & 0xffff;
+        const off = addr & 0x00ff;
+        this.readByte(page | off);
+        return addr;
+    };
+
+    // ($00,X) (NMOS 6502)
+    readAddrZeroPageXIndirect = () => {
+        const zpAddr = this.readBytePC();
+        this.readByte(zpAddr);
+        return this.readZPWord((zpAddr + this.xr) & 0xff);
+    };
+
+    // ($00),Y (NMOS 6502)
+    readAddrZeroPageIndirectY = () => {
+        const zpAddr = this.readBytePC();
+        const addr = this.readZPWord(zpAddr);
+        const addrIdx = (addr + this.yr) & 0xffff;
+        const oldPage = addr & 0xff00;
+        const off = addrIdx & 0xff;
+        this.readByte(oldPage | off);
+        return addrIdx;
+    };
 
     // $(0000,X) (65C02)
     readAddrAbsoluteXIndirect = (): word => {
@@ -645,13 +707,18 @@ export default class CPU6502 {
         const addr = (((msb << 8) | lsb) + this.xr) & 0xffff;
         this.readByte(pc);
         return this.readWord(addr);
-    }
+    };
 
-    // 5C, DC, FC NOP
+    // 5C, DC, FC NOP (65C02)
     readNop = (): void => {
         this.readWordPC();
         this.readByte(this.addr);
-    }
+    };
+
+    // NOP (65C02)
+    readNopImplied = (): void => {
+        // Op is 1 cycle
+    };
 
     /* Break */
     brk = (readFn: ReadFn) => {
@@ -663,58 +730,72 @@ export default class CPU6502 {
         }
         this.setFlag(flags.I, true);
         this.pc = this.readWord(loc.BRK);
-    }
+    };
+
+    /* Stop (65C02) */
+    stp = () => {
+        this.stop = true;
+        this.readByte(this.pc);
+        this.readByte(this.pc);
+    };
+
+    /* Wait (65C02) */
+    wai = () => {
+        this.wait = true;
+        this.readByte(this.pc);
+        this.readByte(this.pc);
+    };
 
     /* Load Accumulator */
     lda = (readFn: ReadFn) => {
         this.ar = this.testNZ(readFn());
-    }
+    };
 
     /* Load X Register */
     ldx = (readFn: ReadFn) => {
         this.xr = this.testNZ(readFn());
-    }
+    };
 
     /* Load Y Register */
     ldy = (readFn: ReadFn) => {
         this.yr = this.testNZ(readFn());
-    }
+    };
 
     /* Store Accumulator */
     sta = (writeFn: WriteFn) => {
         writeFn(this.ar);
-    }
+    };
 
     /* Store X Register */
     stx = (writeFn: WriteFn) => {
         writeFn(this.xr);
-    }
+    };
 
     /* Store Y Register */
     sty = (writeFn: WriteFn) => {
         writeFn(this.yr);
-    }
+    };
 
     /* Store Zero */
     stz = (writeFn: WriteFn) => {
         writeFn(0);
-    }
+    };
 
     /* Add with Carry */
     adc = (readFn: ReadFn) => {
         this.ar = this.add(this.ar, readFn(), /* sub= */ false);
-    }
+    };
 
     /* Subtract with Carry */
     sbc = (readFn: ReadFn) => {
         this.ar = this.add(this.ar, readFn() ^ 0xff, /* sub= */ true);
-    }
+    };
 
     /* Increment Memory */
     incA = () => {
         this.readByte(this.pc);
         this.ar = this.increment(this.ar);
-    }
+    };
 
     inc = (readAddrFn: ReadAddrFn) => {
         const addr = readAddrFn({ inc: true });
@@ -722,25 +803,25 @@ export default class CPU6502 {
         this.workCycle(addr, oldVal);
         const val = this.increment(oldVal);
         this.writeByte(addr, val);
-    }
+    };
 
     /* Increment X */
     inx = () => {
         this.readByte(this.pc);
         this.xr = this.increment(this.xr);
-    }
+    };
 
     /* Increment Y */
     iny = () => {
         this.readByte(this.pc);
         this.yr = this.increment(this.yr);
-    }
+    };
 
     /* Decrement Memory */
     decA = () => {
         this.readByte(this.pc);
         this.ar = this.decrement(this.ar);
-    }
+    };
 
     dec = (readAddrFn: ReadAddrFn) => {
         const addr = readAddrFn({ inc: true});
@@ -748,30 +829,30 @@ export default class CPU6502 {
         this.workCycle(addr, oldVal);
         const val = this.decrement(oldVal);
         this.writeByte(addr, val);
-    }
+    };
 
     /* Decrement X */
     dex = () => {
         this.readByte(this.pc);
         this.xr = this.decrement(this.xr);
-    }
+    };
 
     /* Decrement Y */
     dey = () => {
         this.readByte(this.pc);
         this.yr = this.decrement(this.yr);
-    }
+    };
 
     shiftLeft = (val: byte) => {
         this.setFlag(flags.C, !!(val & 0x80));
         return this.testNZ((val << 1) & 0xff);
-    }
+    };
 
     /* Arithmetic Shift Left */
     aslA = () => {
         this.readByte(this.pc);
         this.ar = this.shiftLeft(this.ar);
-    }
+    };
 
     asl = (readAddrFn: ReadAddrFn) => {
         const addr = readAddrFn();
@@ -779,18 +860,18 @@ export default class CPU6502 {
         this.workCycle(addr, oldVal);
         const val = this.shiftLeft(oldVal);
         this.writeByte(addr, val);
-    }
+    };
 
     shiftRight = (val: byte) => {
         this.setFlag(flags.C, !!(val & 0x01));
         return this.testNZ(val >> 1);
-    }
+    };
 
     /* Logical Shift Right */
     lsrA = () => {
         this.readByte(this.pc);
         this.ar = this.shiftRight(this.ar);
-    }
+    };
 
     lsr = (readAddrFn: ReadAddrFn) => {
         const addr = readAddrFn();
@@ -798,19 +879,19 @@ export default class CPU6502 {
         this.workCycle(addr, oldVal);
         const val = this.shiftRight(oldVal);
         this.writeByte(addr, val);
-    }
+    };
 
     rotateLeft = (val: byte) => {
         const c = (this.sr & flags.C);
         this.setFlag(flags.C, !!(val & 0x80));
         return this.testNZ(((val << 1) | (c ? 0x01 : 0x00)) & 0xff);
-    }
+    };
 
     /* Rotate Left */
     rolA = () => {
         this.readByte(this.pc);
         this.ar = this.rotateLeft(this.ar);
-    }
+    };
 
     rol = (readAddrFn: ReadAddrFn) => {
         const addr = readAddrFn();
@@ -818,7 +899,7 @@ export default class CPU6502 {
         this.workCycle(addr, oldVal);
         const val = this.rotateLeft(oldVal);
         this.writeByte(addr, val);
-    }
+    };
 
     private rotateRight(a: byte) {
         const c = (this.sr & flags.C);
@@ -830,7 +911,7 @@ export default class CPU6502 {
     rorA = () => {
         this.readByte(this.pc);
         this.ar = this.rotateRight(this.ar);
-    }
+    };
 
     ror = (readAddrFn: ReadAddrFn) => {
         const addr = readAddrFn();
@@ -838,22 +919,22 @@ export default class CPU6502 {
         this.workCycle(addr, oldVal);
         const val = this.rotateRight(oldVal);
         this.writeByte(addr, val);
-    }
+    };
 
     /* Logical And Accumulator */
     and = (readFn: ReadFn) => {
         this.ar = this.testNZ(this.ar & readFn());
-    }
+    };
 
     /* Logical Or Accumulator */
     ora = (readFn: ReadFn) => {
         this.ar = this.testNZ(this.ar | readFn());
-    }
+    };
 
     /* Logical Exclusive Or Accumulator */
     eor = (readFn: ReadFn) => {
         this.ar = this.testNZ(this.ar ^ readFn());
-    }
+    };
 
     /* Reset Bit */
 
@@ -864,7 +945,7 @@ export default class CPU6502 {
         this.readByte(addr);
         val &= bit;
         this.writeByte(addr, val);
-    }
+    };
 
     /* Set Bit */
 
@@ -875,7 +956,7 @@ export default class CPU6502 {
         this.readByte(addr);
         val |= bit;
         this.writeByte(addr, val);
-    }
+    };
 
     /* Test and Reset Bits */
     trb = (readAddrFn: ReadAddrFn) => {
@@ -884,7 +965,7 @@ export default class CPU6502 {
         this.testZ(val & this.ar);
         this.readByte(addr);
         this.writeByte(addr, val & ~this.ar);
-    }
+    };
 
     /* Test and Set Bits */
     tsb = (readAddrFn: ReadAddrFn) => {
@@ -893,7 +974,7 @@ export default class CPU6502 {
         this.testZ(val & this.ar);
         this.readByte(addr);
         this.writeByte(addr, val | this.ar);
-    }
+    };
 
     /* Bit */
     bit = (readFn: ReadFn) => {
@@ -901,13 +982,13 @@ export default class CPU6502 {
         this.setFlag(flags.Z, (val & this.ar) === 0);
         this.setFlag(flags.N, !!(val & 0x80));
         this.setFlag(flags.V, !!(val & 0x40));
-    }
+    };
 
     /* Bit Immediate*/
     bitI = (readFn: ReadFn) => {
         const val = readFn();
         this.setFlag(flags.Z, (val & this.ar) === 0);
-    }
+    };
 
     private compare(a: byte, b: byte) {
         b = (b ^ 0xff);
@@ -918,15 +999,15 @@ export default class CPU6502 {
 
     cmp = (readFn: ReadFn) => {
         this.compare(this.ar, readFn());
-    }
+    };
 
     cpx = (readFn: ReadFn) => {
         this.compare(this.xr, readFn());
-    }
+    };
 
     cpy = (readFn: ReadFn) => {
         this.compare(this.yr, readFn());
-    }
+    };
 
     /* Branches */
     brs = (f: flag) => {
@@ -940,7 +1021,7 @@ export default class CPU6502 {
             const newOff = this.pc & 0xff;
             if (newPage !== oldPage) this.readByte(oldPage | newOff);
         }
-    }
+    };
 
     brc = (f: flag|0) => {
         const off = this.readBytePC(); // changes pc
@@ -953,7 +1034,7 @@ export default class CPU6502 {
             const newOff = this.pc & 0xff;
             if (newPage !== oldPage) this.readByte(oldPage | newOff);
         }
-    }
+    };
 
     /* WDC 65C02 branches */
 
@@ -972,7 +1053,7 @@ export default class CPU6502 {
         if (((1 << b) & val) === 0) {
             this.pc = newPC;
         }
-    }
+    };
 
     bbs = (b: byte) => {
         const zpAddr = this.readBytePC();
@@ -989,41 +1070,41 @@ export default class CPU6502 {
         if (((1 << b) & val) !== 0) {
             this.pc = newPC;
         }
-    }
+    };
 
     /* Transfers and stack */
-    tax = () => { this.readByte(this.pc); this.testNZ(this.xr = this.ar); }
+    tax = () => { this.readByte(this.pc); this.testNZ(this.xr = this.ar); };
 
-    txa = () => { this.readByte(this.pc); this.testNZ(this.ar = this.xr); }
+    txa = () => { this.readByte(this.pc); this.testNZ(this.ar = this.xr); };
 
-    tay = () => { this.readByte(this.pc); this.testNZ(this.yr = this.ar); }
+    tay = () => { this.readByte(this.pc); this.testNZ(this.yr = this.ar); };
 
-    tya = () => { this.readByte(this.pc); this.testNZ(this.ar = this.yr); }
+    tya = () => { this.readByte(this.pc); this.testNZ(this.ar = this.yr); };
 
-    tsx = () => { this.readByte(this.pc); this.testNZ(this.xr = this.sp); }
+    tsx = () => { this.readByte(this.pc); this.testNZ(this.xr = this.sp); };
 
-    txs = () => { this.readByte(this.pc); this.sp = this.xr; }
+    txs = () => { this.readByte(this.pc); this.sp = this.xr; };
 
-    pha = () => { this.readByte(this.pc); this.pushByte(this.ar); }
+    pha = () => { this.readByte(this.pc); this.pushByte(this.ar); };
 
-    pla = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.testNZ(this.ar = this.pullByte()); }
+    pla = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.testNZ(this.ar = this.pullByte()); };
 
-    phx = () => { this.readByte(this.pc); this.pushByte(this.xr); }
+    phx = () => { this.readByte(this.pc); this.pushByte(this.xr); };
 
-    plx = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.testNZ(this.xr = this.pullByte()); }
+    plx = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.testNZ(this.xr = this.pullByte()); };
 
-    phy = () => { this.readByte(this.pc); this.pushByte(this.yr); }
+    phy = () => { this.readByte(this.pc); this.pushByte(this.yr); };
 
-    ply = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.testNZ(this.yr = this.pullByte()); }
+    ply = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.testNZ(this.yr = this.pullByte()); };
 
-    php = () => { this.readByte(this.pc); this.pushByte(this.sr | flags.B); }
+    php = () => { this.readByte(this.pc); this.pushByte(this.sr | flags.B); };
 
-    plp = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.sr = (this.pullByte() & ~flags.B) | flags.X; }
+    plp = () => { this.readByte(this.pc); this.readByte(0x0100 | this.sp); this.sr = (this.pullByte() & ~flags.B) | flags.X; };
 
     /* Jump */
     jmp = (readAddrFn: ReadAddrFn) => {
         this.pc = readAddrFn();
-    }
+    };
 
     /* Jump Subroutine */
     jsr = () => {
@@ -1032,7 +1113,7 @@ export default class CPU6502 {
         this.pushWord(this.pc);
         const msb = this.readBytePC();
         this.pc = (msb << 8 | lsb) & 0xffff;
-    }
+    };
 
     /* Return from Subroutine */
     rts = () => {
@@ -1041,7 +1122,7 @@ export default class CPU6502 {
         const addr = this.pullWordRaw();
         this.readByte(addr);
         this.pc = (addr + 1) & 0xffff;
-    }
+    };
 
     /* Return from Interrupt */
     rti = () => {
@@ -1049,50 +1130,237 @@ export default class CPU6502 {
         this.readByte(0x0100 | this.sp);
         this.sr = (this.pullByte() & ~flags.B) | flags.X;
         this.pc = this.pullWordRaw();
-    }
+    };
 
     /* Set and Clear */
     set = (flag: flag) => {
         this.readByte(this.pc);
         this.sr |= flag;
-    }
+    };
 
     clr = (flag: flag) => {
         this.readByte(this.pc);
         this.sr &= ~flag;
-    }
+    };
 
     /* No-Op */
     nop = (readFn: ImpliedFn | ReadFn) => {
         readFn();
-    }
+    };
+
+    /* NMOS 6502 Illegal opcodes */
+
+    /* ASO = ASL + ORA */
+    aso = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        const oldVal = this.readByte(addr);
+        this.workCycle(addr, oldVal);
+        const val = this.shiftLeft(oldVal);
+        this.writeByte(addr, val);
+        this.ar |= val;
+        this.testNZ(this.ar);
+    };
+
+    /* RLA = ROL + AND */
+    rla = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        const oldVal = this.readByte(addr);
+        this.workCycle(addr, oldVal);
+        const val = this.rotateLeft(oldVal);
+        this.writeByte(addr, val);
+        this.ar &= val;
+        this.testNZ(this.ar);
+    };
+
+    /* LSE = LSR + EOR */
+    lse = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        const oldVal = this.readByte(addr);
+        this.workCycle(addr, oldVal);
+        const val = this.shiftRight(oldVal);
+        this.writeByte(addr, val);
+        this.ar ^= val;
+        this.testNZ(this.ar);
+    };
+
+    /* RRA = ROR + ADC */
+    rra = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        const oldVal = this.readByte(addr);
+        this.workCycle(addr, oldVal);
+        const val = this.rotateRight(oldVal);
+        this.writeByte(addr, val);
+        this.ar = this.add(this.ar, val, false);
+    };
+
+    /* AXS = Store A & X */
+    axs = (writeFn: WriteFn) => {
+        writeFn(this.ar & this.xr);
+    };
+
+    /* LAX = Load A & X */
+    lax = (readFn: ReadFn) => {
+        const val = readFn();
+        this.ar = val;
+        this.xr = val;
+        this.testNZ(val);
+    };
+
+    /* DCM = DEC + CMP */
+    dcm = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn({ inc: true});
+        const oldVal = this.readByte(addr);
+        this.workCycle(addr, oldVal);
+        const val = this.decrement(oldVal);
+        this.writeByte(addr, val);
+        this.compare(this.ar, val);
+    };
+
+    /* INS = INC + SBC */
+    ins = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn({ inc: true});
+        const oldVal = this.readByte(addr);
+        this.workCycle(addr, oldVal);
+        const val = this.increment(oldVal);
+        this.writeByte(addr, val);
+        this.ar = this.add(this.ar, val ^ 0xff, true);
+    };
+
+    /* ALR = AND + LSR */
+    alr = (readFn: ReadFn) => {
+        const val = readFn() & this.ar;
+        this.ar = this.shiftRight(val);
+    };
+
+    /* ARR = AND + ROR */
+    arr = (readFn: ReadFn) => {
+        const val = readFn() & this.ar;
+        const ah = val >> 4;
+        const al = val & 0xf;
+        const b7 = val >> 7;
+        const b6 = (val >> 6) & 0x1;
+        this.ar = this.rotateRight(val);
+        let c = !!b7;
+        const v = !!(b7 ^ b6);
+        if (this.sr & flags.D) {
+            if (al + (al & 0x1) > 0x5) {
+                this.ar = (this.ar & 0xf0) | ((this.ar + 0x6) & 0xf);
+            }
+            if (ah + (ah & 0x1) > 5) {
+                c = true;
+                this.ar =((this.ar + 0x60) & 0xff);
+            }
+        }
+        this.setFlag(flags.V, v);
+        this.setFlag(flags.C, c);
+    };
+
+    /* XAA = TAX + AND */
+    xaa = (readFn: ReadFn) => {
+        const val = readFn();
+        this.ar = (this.xr & 0xEE) | (this.xr & this.ar & 0x11);
+        this.ar = this.testNZ(this.ar & val);
+    };
+
+    /** OAL = ORA + AND */
+    oal = (readFn: ReadFn) => {
+        this.ar |= 0xEE;
+        const val = this.testNZ(this.ar & readFn());
+        this.ar = val;
+        this.xr = val;
+    };
+
+    /* SAX = A & X + SBC */
+    sax = (readFn: ReadFn) => {
+        const a = this.xr & this.ar;
+        let b = readFn();
+        b = (b ^ 0xff);
+        const c = a + b + 1;
+        this.setFlag(flags.C, c > 0xff);
+        this.xr = this.testNZ(c & 0xff);
+    };
+
+    /* TAS = X & Y -> S */
+    tas = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        let val = this.xr & this.ar;
+        this.sp = val;
+        const msb = addr >> 8;
+        val = val & ((msb + 1) & 0xff);
+        this.writeByte(addr, val);
+    };
+
+    /* SAY = Y & AH + 1 */
+    say = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        const msb = addr >> 8;
+        const val = this.yr & ((msb + 1) & 0xff);
+        this.writeByte(addr, val);
+    };
+
+    /* XAS = X & AH + 1 */
+    xas = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        const msb = addr >> 8;
+        const val = this.xr & ((msb + 1) & 0xff);
+        this.writeByte(addr, val);
+    };
+
+    /* AXA = X & AH + 1 */
+    axa = (readAddrFn: ReadAddrFn) => {
+        const addr = readAddrFn();
+        let val = this.xr & this.ar;
+        const msb = addr >> 8;
+        val = val & ((msb + 1) & 0xff);
+        this.writeByte(addr, val);
+    };
+
+    /* ANC = AND with carry */
+    anc = (readFn: ReadFn) => {
+        this.ar = this.testNZ(this.ar & readFn());
+        const c = !!(this.ar & 0x80);
+        this.setFlag(flags.C, c);
+    };
+
+    /* LAS = RD & SP -> A, X, S */
+    las = (readFn: ReadFn) => {
+        const val = this.sp & readFn();
+        this.sp = val;
+        this.xr = val;
+        this.ar = this.testNZ(val);
+    };
+
+    /* SKB/SKW */
+    skp = (readFn: ReadFn) => {
+        readFn();
+    };
+
+    /* HLT */
+    hlt = (_impliedFn: ImpliedFn) => {
+        this.readByte(this.pc);
+        this.readByte(this.pc);
+        // PC shouldn't have advanced
+        this.pc = (--this.pc) & 0xffff;
+        this.stop = true;
+    };
 
     private unknown(b: byte) {
         let unk: StrictInstruction;
-
         if (this.is65C02) {
+            // Default behavior is a 1 cycle NOP
             unk = {
                 name: 'NOP',
                 op: this.nop,
-                modeFn: this.implied,
+                modeFn: this.readNopImplied,
                 mode: 'implied',
             };
         } else {
-            const cpu = this;
-            unk = {
-                name: '???',
-                op: function (_impliedFn: ImpliedFn) {
-                    debug('Unknown OpCode: ' + toHex(b) +
-                        ' at ' + toHex(cpu.pc - 1, 4));
-                },
-                modeFn: this.implied,
-                mode: 'implied'
-            };
+            // All 6502 Instructions should be defined
+            throw new Error(`Missing ${toHex(b)}`);
         }
         return unk;
     }
 
-
     public step(cb?: callback) {
         this.sync = true;
         this.op = this.opary[this.readBytePC()];
@@ -1157,6 +1425,8 @@ export default class CPU6502 {
         this.yr = 0;
         this.xr = 0;
         this.pc = this.readWord(loc.RESET);
+        this.wait = false;
+        this.stop = false;
 
         for (let idx = 0; idx < this.resetHandlers.length; idx++) {
             this.resetHandlers[idx].reset();
@@ -1173,6 +1443,7 @@ export default class CPU6502 {
             }
             this.setFlag(flags.I, true);
             this.pc = this.readWord(loc.BRK);
+            this.wait = false;
         }
     }
 
@@ -1185,6 +1456,7 @@ export default class CPU6502 {
         }
         this.setFlag(flags.I, true);
         this.pc = this.readWord(loc.NMI);
+        this.wait = false;
     }
 
     public getPC() {
@@ -1219,6 +1491,14 @@ export default class CPU6502 {
         return this.sync;
     }
 
+    public getStop() {
+        return this.stop;
+    }
+
+    public getWait() {
+        return this.wait;
+    }
+
     public getCycles() {
         return this.cycles;
     }
@@ -1255,10 +1535,10 @@ export default class CPU6502 {
     public read(a: number, b?: number): byte {
         let page, off;
         if (b !== undefined) {
-            page = a;
-            off = b;
+            page = a & 0xff;
+            off = b & 0xff;
         } else {
-            page = a >> 8;
+            page = (a >> 8) & 0xff;
             off = a & 0xff;
         }
         return this.memPages[page].read(page, off);
@@ -1271,13 +1551,13 @@ export default class CPU6502 {
         let page, off, val;
 
         if (c !== undefined ) {
-            page = a;
-            off = b;
-            val = c;
+            page = a & 0xff;
+            off = b & 0xff;
+            val = c & 0xff;
         } else {
-            page = a >> 8;
+            page = (a >> 8) & 0xff;
             off = a & 0xff;
-            val = b;
+            val = b & 0xff;
         }
         this.memPages[page].write(page, off, val);
     }
@@ -1663,5 +1943,172 @@ export default class CPU6502 {
         // TSB
         0x04: { name: 'TSB', op: this.tsb, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
         0x0C: { name: 'TSB', op: this.tsb, modeFn: this.readAddrAbsolute, mode: 'absolute' }
-    }
+    };
+
+    OPS_NMOS_6502: Instructions = {
+        // ASO
+        0x0F: { name: 'ASO', op: this.aso, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0x1F: { name: 'ASO', op: this.aso, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x1B: { name: 'ASO', op: this.aso, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY' },
+        0x07: { name: 'ASO', op: this.aso, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
+        0x17: { name: 'ASO', op: this.aso, modeFn: this.readAddrZeroPageX, mode: 'zeroPageX' },
+        0x03: { name: 'ASO', op: this.aso, modeFn: this.readAddrZeroPageXIndirect, mode: 'zeroPageXIndirect' },
+        0x13: { name: 'ASO', op: this.aso, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY' },
+
+        // RLA
+        0x2F: { name: 'RLA', op: this.rla, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0x3F: { name: 'RLA', op: this.rla, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x3B: { name: 'RLA', op: this.rla, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY' },
+        0x27: { name: 'RLA', op: this.rla, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
+        0x37: { name: 'RLA', op: this.rla, modeFn: this.readAddrZeroPageX, mode: 'zeroPageX' },
+        0x23: { name: 'RLA', op: this.rla, modeFn: this.readAddrZeroPageXIndirect, mode: 'zeroPageXIndirect' },
+        0x33: { name: 'RLA', op: this.rla, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY' },
+
+        // LSE
+        0x4F: { name: 'LSE', op: this.lse, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0x5F: { name: 'LSE', op: this.lse, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x5B: { name: 'LSE', op: this.lse, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY' },
+        0x47: { name: 'LSE', op: this.lse, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
+        0x57: { name: 'LSE', op: this.lse, modeFn: this.readAddrZeroPageX, mode: 'zeroPageX' },
+        0x43: { name: 'LSE', op: this.lse, modeFn: this.readAddrZeroPageXIndirect, mode: 'zeroPageXIndirect' },
+        0x53: { name: 'LSE', op: this.lse, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY' },
+
+        // RRA
+        0x6F: { name: 'RRA', op: this.rra, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0x7F: { name: 'RRA', op: this.rra, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x7B: { name: 'RRA', op: this.rra, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY' },
+        0x67: { name: 'RRA', op: this.rra, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
+        0x77: { name: 'RRA', op: this.rra, modeFn: this.readAddrZeroPageX, mode: 'zeroPageX' },
+        0x63: { name: 'RRA', op: this.rra, modeFn: this.readAddrZeroPageXIndirect, mode: 'zeroPageXIndirect' },
+        0x73: { name: 'RRA', op: this.rra, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY' },
+
+        // AXS
+        0x8F: { name: 'AXS', op: this.axs, modeFn: this.writeAbsolute, mode: 'absolute'},
+        0x87: { name: 'AXS', op: this.axs, modeFn: this.writeZeroPage, mode: 'zeroPage'},
+        0x97: { name: 'AXS', op: this.axs, modeFn: this.writeZeroPageY, mode: 'zeroPageY'},
+        0x83: { name: 'AXS', op: this.axs, modeFn: this.writeZeroPageXIndirect, mode: 'zeroPageXIndirect'},
+
+        // LAX
+        0xAF: { name: 'LAX', op: this.lax, modeFn: this.readAbsolute, mode: 'absolute'},
+        0xBF: { name: 'LAX', op: this.lax, modeFn: this.readAbsoluteY, mode: 'absoluteY'},
+        0xA7: { name: 'LAX', op: this.lax, modeFn: this.readZeroPage, mode: 'zeroPage'},
+        0xB7: { name: 'LAX', op: this.lax, modeFn: this.readZeroPageY, mode: 'zeroPageY'},
+        0xA3: { name: 'LAX', op: this.lax, modeFn: this.readZeroPageXIndirect, mode: 'zeroPageXIndirect'},
+        0xB3: { name: 'LAX', op: this.lax, modeFn: this.readZeroPageIndirectY, mode: 'zeroPageIndirectY'},
+
+        // DCM
+        0xCF: { name: 'DCM', op: this.dcm, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0xDF: { name: 'DCM', op: this.dcm, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0xDB: { name: 'DCM', op: this.dcm, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY' },
+        0xC7: { name: 'DCM', op: this.dcm, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
+        0xD7: { name: 'DCM', op: this.dcm, modeFn: this.readAddrZeroPageX, mode: 'zeroPageX' },
+        0xC3: { name: 'DCM', op: this.dcm, modeFn: this.readAddrZeroPageXIndirect, mode: 'zeroPageXIndirect' },
+        0xD3: { name: 'DCM', op: this.dcm, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY' },
+
+        // INS
+        0xEF: { name: 'INS', op: this.ins, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0xFF: { name: 'INS', op: this.ins, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0xFB: { name: 'INS', op: this.ins, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY' },
+        0xE7: { name: 'INS', op: this.ins, modeFn: this.readAddrZeroPage, mode: 'zeroPage' },
+        0xF7: { name: 'INS', op: this.ins, modeFn: this.readAddrZeroPageX, mode: 'zeroPageX' },
+        0xE3: { name: 'INS', op: this.ins, modeFn: this.readAddrZeroPageXIndirect, mode: 'zeroPageXIndirect' },
+        0xF3: { name: 'INS', op: this.ins, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY' },
+
+        // ALR
+        0x4B: { name: 'ALR', op: this.alr, modeFn: this.readImmediate, mode: 'immediate' },
+
+        // ARR
+        0x6B: { name: 'ARR', op: this.arr, modeFn: this.readImmediate, mode: 'immediate' },
+
+        // XAA
+        0x8B: { name: 'XAA', op: this.xaa, modeFn: this.readImmediate, mode: 'immediate' },
+
+        // OAL
+        0xAB: { name: 'OAL', op: this.oal, modeFn: this.readImmediate, mode: 'immediate' },
+
+        // SAX
+        0xCB: { name: 'SAX', op: this.sax, modeFn: this.readImmediate, mode: 'immediate' },
+
+        // NOP
+        0x1a: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+        0x3a: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+        0x5a: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+        0x7a: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+        0xda: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+        0xfa: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+
+        // SKB
+        0x80: { name: 'SKB', op: this.skp, modeFn: this.readImmediate, mode: 'immediate' },
+        0x82: { name: 'SKB', op: this.skp, modeFn: this.readImmediate, mode: 'immediate' },
+        0x89: { name: 'SKB', op: this.skp, modeFn: this.readImmediate, mode: 'immediate' },
+        0xC2: { name: 'SKB', op: this.skp, modeFn: this.readImmediate, mode: 'immediate' },
+        0xE2: { name: 'SKB', op: this.skp, modeFn: this.readImmediate, mode: 'immediate' },
+        0x04: { name: 'SKB', op: this.skp, modeFn: this.readZeroPage, mode: 'zeroPage' },
+        0x14: { name: 'SKB', op: this.skp, modeFn: this.readZeroPageX, mode: 'zeroPageX' },
+        0x34: { name: 'SKB', op: this.skp, modeFn: this.readZeroPageX, mode: 'zeroPageX' },
+        0x44: { name: 'SKB', op: this.skp, modeFn: this.readZeroPage, mode: 'zeroPage' },
+        0x54: { name: 'SKB', op: this.skp, modeFn: this.readZeroPageX, mode: 'zeroPageX' },
+        0x64: { name: 'SKB', op: this.skp, modeFn: this.readZeroPage, mode: 'zeroPage' },
+        0x74: { name: 'SKB', op: this.skp, modeFn: this.readZeroPageX, mode: 'zeroPageX' },
+        0xD4: { name: 'SKB', op: this.skp, modeFn: this.readZeroPageX, mode: 'zeroPageX' },
+        0xF4: { name: 'SKB', op: this.skp, modeFn: this.readZeroPageX, mode: 'zeroPageX' },
+
+        // SKW
+        0x0C: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsolute, mode: 'absolute' },
+        0x1C: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x3C: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x5C: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0x7C: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0xDC: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+        0xFC: { name: 'SKW', op: this.skp, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX' },
+
+        // HLT
+        0x02: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x12: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x22: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x32: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x42: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x52: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x62: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x72: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0x92: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0xB2: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0xD2: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+        0xF2: { name: 'HLT', op: this.hlt, modeFn: this.readNopImplied, mode: 'implied' },
+
+        // TAS
+        0x9B: { name: 'TAS', op: this.tas, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY'},
+
+        // SAY
+        0x9C: { name: 'SAY', op: this.say, modeFn: this.readAddrAbsoluteX, mode: 'absoluteX'},
+
+        // XAS
+        0x9E: { name: 'XAS', op: this.xas, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY'},
+
+        // AXA
+        0x9F: { name: 'AXA', op: this.axa, modeFn: this.readAddrAbsoluteY, mode: 'absoluteY'},
+        0x93: { name: 'AXA', op: this.axa, modeFn: this.readAddrZeroPageIndirectY, mode: 'zeroPageIndirectY'},
+
+        // ANC
+        0x2b: { name: 'ANC', op: this.anc, modeFn: this.readImmediate, mode: 'immediate' },
+        0x0b: { name: 'ANC', op: this.anc, modeFn: this.readImmediate, mode: 'immediate' },
+
+        // LAS
+        0xBB: { name: 'LAS', op: this.las, modeFn: this.readAbsoluteY, mode: 'absoluteY'},
+
+        // SBC
+        0xEB: { name: 'SBC', op: this.sbc, modeFn: this.readImmediate, mode: 'immediate'}
+    };
+
+    OPS_ROCKWELL_65C02: Instructions = {
+        0xCB: { name: 'NOP', op: this.nop, modeFn: this.implied, mode: 'implied' },
+        0xDB: { name: 'NOP', op: this.nop, modeFn: this.readZeroPageX, mode: 'immediate' },
+    };
+
+    /* WDC 65C02 Instructions */
+
+    OPS_WDC_65C02: Instructions = {
+        0xCB: { name: 'WAI', op: this.wai, modeFn: this.implied, mode: 'implied' },
+        0xDB: { name: 'STP', op: this.stp, modeFn: this.implied, mode: 'implied' }
+    };
 }
diff --git a/js/debugger.ts b/js/debugger.ts
index 2b88f8f..78f3fcf 100644
--- a/js/debugger.ts
+++ b/js/debugger.ts
@@ -6,11 +6,11 @@ import CPU6502, { DebugInfo, flags, sizes } from './cpu6502';
 export interface DebuggerContainer {
     run: () => void;
     stop: () => void;
-    getCPU: () => CPU6502;
+    isRunning: () => boolean;
 }
 
 type symbols = { [key: number]: string };
-type breakpointFn = (info: DebugInfo) => boolean
+type breakpointFn = (info: DebugInfo) => boolean;
 
 const alwaysBreak = (_info: DebugInfo) => { return true; };
 
@@ -27,16 +27,13 @@ export const dumpStatusRegister = (sr: byte) =>
     ].join('');
 
 export default class Debugger {
-    private cpu: CPU6502;
     private verbose = false;
     private maxTrace = 256;
     private trace: DebugInfo[] = [];
     private breakpoints: Map<word, breakpointFn> = new Map();
     private symbols: symbols = {};
 
-    constructor(private container: DebuggerContainer) {
-        this.cpu = container.getCPU();
-    }
+    constructor(private cpu: CPU6502, private container: DebuggerContainer) {}
 
     stepCycles(cycles: number) {
         this.cpu.stepCyclesDebug(this.verbose ? 1 : cycles, () => {
@@ -57,7 +54,7 @@ export default class Debugger {
 
     break = () => {
         this.container.stop();
-    }
+    };
 
     step = () => {
         this.cpu.step(() => {
@@ -65,45 +62,86 @@ export default class Debugger {
             debug(this.printDebugInfo(info));
             this.updateTrace(info);
         });
-    }
+    };
 
     continue = () => {
         this.container.run();
-    }
+    };
+
+    /**
+     * Restart at a given memory address.
+     *
+     * @param address Address to start execution
+     */
+
+    runAt = (address: word) => {
+        this.cpu.reset();
+        this.cpu.setPC(address);
+    };
+
+    isRunning = () =>
+        this.container.isRunning();
 
     setVerbose = (verbose: boolean) => {
         this.verbose = verbose;
-    }
+    };
 
     setMaxTrace = (maxTrace: number) => {
         this.maxTrace = maxTrace;
-    }
+    };
 
-    getTrace = () => {
-        return this.trace.map(this.printDebugInfo).join('\n');
-    }
+    getTrace = (count?: number) => {
+        return this.trace.slice(count ? -count : undefined).map(this.printDebugInfo).join('\n');
+    };
 
-    printTrace = () => {
-        debug(this.getTrace());
-    }
+    printTrace = (count?: number) => {
+        debug(this.getTrace(count));
+    };
+
+    getStack = (size?: number) => {
+        const { sp } = this.cpu.getDebugInfo();
+        const stack = [];
+
+        let max = 255;
+        let min = 0;
+        if (size) {
+            if ((sp - 3) >= (255 - size)) {
+                min = Math.max(255 - size + 1, 0);
+            } else {
+                max = Math.min(sp + size - 4, 255);
+                min = Math.max(sp - 3, 0);
+            }
+        }
+
+        for (let addr = max; addr >= min; addr--) {
+            const isSP = addr === sp ? '*' : ' ';
+            const addrStr = `$${toHex(0x0100 + addr)}`;
+            const valStr = toHex(this.cpu.read(0x01, addr));
+            if (!size || ((sp + size > addr) && (addr > sp - size))) {
+                stack.push(`${isSP} ${addrStr} ${valStr}`);
+            }
+        }
+
+        return stack.join('\n');
+    };
 
     setBreakpoint = (addr: word, exp?: breakpointFn) => {
         this.breakpoints.set(addr, exp || alwaysBreak);
-    }
+    };
 
     clearBreakpoint = (addr: word) => {
         this.breakpoints.delete(addr);
-    }
+    };
 
     listBreakpoints = () => {
         for(const [addr, fn] of this.breakpoints.entries()) {
             debug(toHex(addr, 4), fn);
         }
-    }
+    };
 
     addSymbols = (symbols: symbols) => {
         this.symbols = { ...this.symbols, ...symbols };
-    }
+    };
 
     printDebugInfo = (info: DebugInfo) => {
         const { pc, cmd } = info;
@@ -118,7 +156,7 @@ export default class Debugger {
             ' ',
             this.dumpOp(pc, cmd)
         ].join('');
-    }
+    };
 
     dumpPC = (pc: word) => {
         const b = this.cpu.read(pc);
@@ -128,7 +166,7 @@ export default class Debugger {
 
         result += this.padWithSymbol(pc);
 
-        const cmd = new Array(size);
+        const cmd = new Array<number>(size);
         for (let idx = 0, jdx = pc; idx < size; idx++, jdx++) {
             cmd[idx] = this.cpu.read(jdx);
         }
@@ -136,7 +174,7 @@ export default class Debugger {
         result += this.dumpRawOp(cmd) + ' ' + this.dumpOp(pc, cmd);
 
         return result;
-    }
+    };
 
     dumpRegisters = (debugInfo?: DebugInfo) => {
         if (debugInfo === undefined) {
@@ -152,7 +190,7 @@ export default class Debugger {
             ' ',
             dumpStatusRegister(sr),
         ].join('');
-    }
+    };
 
     dumpPage = (start: byte, end?: byte) => {
         let result = '';
@@ -179,6 +217,35 @@ export default class Debugger {
             }
         }
         return result;
+    };
+
+    /**
+     * Reads a range of memory. Will wrap at memory limit.
+     *
+     * @param address Starting address to read memory
+     * @param length Length of memory to read.
+     * @returns Byte array containing memory
+     */
+    getMemory(address: word, length: word) {
+        const bytes = new Uint8Array(length);
+        for (let idx = 0; idx < length; idx++) {
+            address &= 0xffff;
+            bytes[idx] = this.cpu.read(address++);
+        }
+        return bytes;
+    }
+
+    /**
+     * Writes a range of memory. Will wrap at memory limit.
+     *
+     * @param address Starting address to write memory
+     * @param bytes Data to write
+     */
+    setMemory(address: word, bytes: Uint8Array) {
+        for (const byte of bytes) {
+            address &= 0xffff;
+            this.cpu.write(address++, byte);
+        }
     }
 
     list = (pc: word) => {
@@ -190,7 +257,7 @@ export default class Debugger {
             pc += sizes[op.mode];
         }
         return results;
-    }
+    };
 
     private updateTrace(info: DebugInfo) {
         this.trace.push(info);
@@ -238,13 +305,13 @@ export default class Debugger {
             case 'implied':
                 break;
             case 'immediate':
-                result += '#' + toHexOrSymbol(lsb);
+                result += `#${toHexOrSymbol(lsb)}`;
                 break;
             case 'absolute':
-                result += '' + toHexOrSymbol(addr, 4);
+                result += `${toHexOrSymbol(addr, 4)}`;
                 break;
             case 'zeroPage':
-                result += '' + toHexOrSymbol(lsb);
+                result += `${toHexOrSymbol(lsb)}`;
                 break;
             case 'relative':
                 {
@@ -253,38 +320,38 @@ export default class Debugger {
                         off -= 256;
                     }
                     pc += off + 2;
-                    result += '' + toHexOrSymbol(pc, 4) + ' (' + off + ')';
+                    result += `${toHexOrSymbol(pc, 4)} (${off})`;
                 }
                 break;
             case 'absoluteX':
-                result += '' + toHexOrSymbol(addr, 4)+ ',X';
+                result += `${toHexOrSymbol(addr, 4)},X`;
                 break;
             case 'absoluteY':
-                result += '' + toHexOrSymbol(addr, 4) + ',Y';
+                result += `${toHexOrSymbol(addr, 4)},Y`;
                 break;
             case 'zeroPageX':
-                result += '' + toHexOrSymbol(lsb) + ',X';
+                result += `${toHexOrSymbol(lsb)},X`;
                 break;
             case 'zeroPageY':
-                result += '' + toHexOrSymbol(lsb) + ',Y';
+                result += `${toHexOrSymbol(lsb)},Y`;
                 break;
             case 'absoluteIndirect':
-                result += '(' + toHexOrSymbol(addr, 4) + ')';
+                result += `(${toHexOrSymbol(addr, 4)})`;
                 break;
             case 'zeroPageXIndirect':
-                result += '(' + toHexOrSymbol(lsb) + ',X)';
+                result += `(${toHexOrSymbol(lsb)},X)`;
                 break;
             case 'zeroPageIndirectY':
-                result += '(' + toHexOrSymbol(lsb) + '),Y';
+                result += `(${toHexOrSymbol(lsb)},),Y`;
                 break;
             case 'accumulator':
                 result += 'A';
                 break;
             case 'zeroPageIndirect':
-                result += '(' + toHexOrSymbol(lsb) + ')';
+                result += `(${toHexOrSymbol(lsb)})`;
                 break;
             case 'absoluteXIndirect':
-                result += '(' + toHexOrSymbol(addr, 4) + ',X)';
+                result += `(${toHexOrSymbol(addr, 4)},X)`;
                 break;
             case 'zeroPage_relative':
                 val = lsb;
@@ -293,7 +360,7 @@ export default class Debugger {
                     off -= 256;
                 }
                 pc += off + 2;
-                result += '' + toHexOrSymbol(val) + ',' + toHexOrSymbol(pc, 4) + ' (' + off + ')';
+                result += `${toHexOrSymbol(val)},${toHexOrSymbol(pc, 4)} (${off})`;
                 break;
             default:
                 break;
diff --git a/js/entry.tsx b/js/entry.tsx
new file mode 100644
index 0000000..ad12e39
--- /dev/null
+++ b/js/entry.tsx
@@ -0,0 +1,5 @@
+import { h, render } from 'preact';
+import { App } from './components/App';
+
+// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+render(<App />, document.getElementById('app')!);
diff --git a/js/entry2.js b/js/entry2.ts
similarity index 100%
rename from js/entry2.js
rename to js/entry2.ts
diff --git a/js/entry2e.js b/js/entry2e.ts
similarity index 100%
rename from js/entry2e.js
rename to js/entry2e.ts
diff --git a/js/formats/2mg.ts b/js/formats/2mg.ts
index 3e2f3e3..61297f2 100644
--- a/js/formats/2mg.ts
+++ b/js/formats/2mg.ts
@@ -1,55 +1,159 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import DOS from './do';
 import Nibble from './nib';
 import ProDOS from './po';
-import { DiskOptions } from './types';
+import { BlockDisk, DiskOptions } from './types';
 
-import { numToString, debug } from '../util';
+import { byte, ReadonlyUint8Array } from 'js/types';
 
+/**
+ * Offsets in bytes to the various header fields. All number fields are
+ * in little-endian order (least significant byte first). These values
+ * come from the spec at:
+ *
+ * https://apple2.org.za/gswv/a2zine/Docs/DiskImage_2MG_Info.txt
+ */
 const OFFSETS = {
+    /** File signature ('2IMG', 4 bytes) */
+    SIGNATURE: 0x00,
+    /** Creator ID (4 bytes) */
     CREATOR: 0x04,
-    FLAGS: 0x0A,
+    /** Header length (2 bytes) */
+    HEADER_LENGTH: 0x08,
+    /** Version number (2 bytes). (Version of what? Format? Image?). */
+    VERSION: 0x0A,
+    /** Image format ID (4 bytes) */
     FORMAT: 0x0C,
+    /** Flags and DOS 3.3 volume number */
+    FLAGS: 0x10,
+    /**
+     * Number of ProDOS blocks (4 bytes). ProDOS blocks are 512 bytes each.
+     * This field must be zero if the image format is not 0x01 (ProDOS).
+     * (ASIMOV2 always fills in this field.)
+     */
     BLOCKS: 0x14,
+    /**
+     * Disk data start in bytes from the beginning of the image file
+     * (4 bytes).
+     */
     DATA_OFFSET: 0x18,
-    BYTES: 0x1C,
-};
+    /**
+     * Length of disk data in bytes (4 bytes). (143,360 bytes for 5.25"
+     * floppies; 512 × blocks for ProDOS volumes.)
+     */
+    DATA_LENGTH: 0x1C,
+    /**
+     * Comment start in bytes from the beginning of the image file (4 bytes).
+     * Must be zero if there is no comment. The comment must come after the
+     * disk data and before the creator data. The comment should be "raw text"
+     * with no terminating null. By "raw text", we assume UTF-8.
+     */
+    COMMENT: 0x20,
+    /**
+     * Comment length in bytes (4 bytes). Must be zero if there is no comment.
+     */
+    COMMENT_LENGTH: 0x24,
+    /**
+     * Optional creator data start in bytes from the beginning of the image
+     * file (4 bytes). Must be zero if there is no creator data.
+     */
+    CREATOR_DATA: 0x28,
+    /**
+     * Creator data length in bytes (4 bytes). Must be zero if there is no
+     * creator data.
+     */
+    CREATOR_DATA_LENGTH: 0x2C,
+    /** Padding (16 bytes). Must be zero. */
+    PADDING: 0x30,
+} as const;
 
 const FLAGS = {
     READ_ONLY:    0x80000000,
     VOLUME_VALID: 0x00000100,
     VOLUME_MASK:  0x000000FF
-};
+} as const;
 
-export function read2MGHeader(rawData: ArrayBuffer) {
+export enum FORMAT {
+    DOS = 0,
+    ProDOS = 1,
+    NIB = 2,
+}
+
+export interface HeaderData {
+    bytes: number;
+    creator: string;
+    format: FORMAT;
+    offset: number;
+    readOnly: boolean;
+    volume: byte;
+    comment?: string;
+    creatorData?: ReadonlyUint8Array;
+}
+
+export function read2MGHeader(rawData: ArrayBuffer): HeaderData {
     const prefix = new DataView(rawData);
-    const signature = numToString(prefix.getInt32(0x0, true));
+    const decoder = new TextDecoder('ascii');
+    const signature = decoder.decode(rawData.slice(OFFSETS.SIGNATURE, OFFSETS.SIGNATURE + 4));
     if (signature !== '2IMG') {
-        throw new Error('Unrecognized 2mg signature: ' + signature);
+        throw new Error(`Unrecognized 2mg signature: ${signature}`);
+    }
+    const creator = decoder.decode(rawData.slice(OFFSETS.CREATOR, OFFSETS.CREATOR + 4));
+    const headerLength = prefix.getInt16(OFFSETS.HEADER_LENGTH, true);
+    if (headerLength !== 64) {
+        throw new Error(`2mg header length is incorrect ${headerLength} !== 64`);
     }
-    const creator = numToString(prefix.getInt32(OFFSETS.CREATOR, true));
     const format = prefix.getInt32(OFFSETS.FORMAT, true);
-    const bytes = prefix.getInt32(OFFSETS.BYTES, true);
-    const offset = prefix.getInt32(OFFSETS.DATA_OFFSET, true);
     const flags = prefix.getInt32(OFFSETS.FLAGS, true);
+    const blocks = prefix.getInt32(OFFSETS.BLOCKS, true);
+    const offset = prefix.getInt32(OFFSETS.DATA_OFFSET, true);
+    const bytes = prefix.getInt32(OFFSETS.DATA_LENGTH, true);
+    const commentOffset = prefix.getInt32(OFFSETS.COMMENT, true);
+    const commentLength = prefix.getInt32(OFFSETS.COMMENT_LENGTH, true);
+    const creatorDataOffset = prefix.getInt32(OFFSETS.CREATOR_DATA, true);
+    const creatorDataLength = prefix.getInt32(OFFSETS.CREATOR_DATA_LENGTH, true);
+
+    // Though the spec says that it should be zero if the format is not
+    // ProDOS, we don't check that since we know that it is violated.
+    // However we do check that it's correct if the image _is_ ProDOS.
+    if (format === FORMAT.ProDOS && blocks * 512 !== bytes) {
+        throw new Error(`2mg blocks does not match disk data length: ${blocks} * 512 !== ${bytes}`);
+    }
+    if (offset < headerLength) {
+        throw new Error(`2mg data offset is less than header length: ${offset} < ${headerLength}`);
+    }
+    if (offset + bytes > prefix.byteLength) {
+        throw new Error(`2mg data extends beyond disk image: ${offset} + ${bytes} > ${prefix.byteLength}`);
+    }
+    const dataEnd = offset + bytes;
+    if (commentOffset && commentOffset < dataEnd) {
+        throw new Error(`2mg comment is before the end of the disk data: ${commentOffset} < ${offset} + ${bytes}`);
+    }
+    const commentEnd = commentOffset ? commentOffset + commentLength : dataEnd;
+    if (commentEnd > prefix.byteLength) {
+        throw new Error(`2mg comment extends beyond disk image: ${commentEnd} > ${prefix.byteLength}`);
+    }
+    if (creatorDataOffset && creatorDataOffset < commentEnd) {
+        throw new Error(`2mg creator data is before the end of the comment: ${creatorDataOffset} < ${commentEnd}`);
+    }
+    const creatorDataEnd = creatorDataOffset ? creatorDataOffset + creatorDataLength : commentEnd;
+    if (creatorDataEnd > prefix.byteLength) {
+        throw new Error(`2mg creator data extends beyond disk image: ${creatorDataEnd} > ${prefix.byteLength}`);
+    }
+
+    const extras: { comment?: string; creatorData?: ReadonlyUint8Array } = {};
+    if (commentOffset) {
+        extras.comment = new TextDecoder('utf-8').decode(
+            new Uint8Array(rawData, commentOffset, commentLength));
+    }
+    if (creatorDataOffset) {
+        extras.creatorData = new Uint8Array(rawData, creatorDataOffset, creatorDataLength);
+    }
+
     const readOnly = (flags & FLAGS.READ_ONLY) !== 0;
-    let volume = 254;
+    let volume = format === FORMAT.DOS ? 254 : 0;
     if (flags & FLAGS.VOLUME_VALID) {
         volume = flags & FLAGS.VOLUME_MASK;
     }
 
-    debug('created by', creator);
-
     return {
         bytes,
         creator,
@@ -57,9 +161,111 @@ export function read2MGHeader(rawData: ArrayBuffer) {
         offset,
         readOnly,
         volume,
+        ...extras
     };
 }
 
+/**
+ * Creates the prefix and suffix parts of a 2mg file. Will use
+ * default header values if headerData is null.
+ *
+ * Currently only supports blocks disks but should be adaptable
+ * for nibble formats.
+ *
+ * @param headerData 2mg header data
+ * @param blocks The number of blocks in a block volume
+ * @returns 2mg prefix and suffix for creating a 2mg disk image
+ */
+
+export const create2MGFragments = (headerData: HeaderData | null, { blocks } : { blocks: number }) => {
+    if (!headerData) {
+        headerData = {
+            bytes: blocks * 512,
+            creator: 'A2JS',
+            format: FORMAT.ProDOS,
+            offset: 64,
+            readOnly: false,
+            volume: 0,
+        };
+    }
+    if (headerData.format !== FORMAT.ProDOS) {
+        throw new Error('Nibble formats not supported yet');
+    }
+    if (headerData.bytes !== blocks * 512) {
+        throw new Error('Byte count does not match block count');
+    }
+    const prefix = new Uint8Array(64);
+    const prefixView = new DataView(prefix.buffer);
+
+    const volumeFlags = headerData.volume ? headerData.volume | FLAGS.VOLUME_VALID : 0;
+    const readOnlyFlag = headerData.readOnly ? FLAGS.READ_ONLY : 0;
+    const flags = volumeFlags | readOnlyFlag;
+    const prefixLength = prefix.length;
+    const dataLength = blocks * 512;
+
+    let commentOffset = 0;
+    let commentLength = 0;
+    let commentData = new Uint8Array(0);
+    if (headerData.comment) {
+        commentData = new TextEncoder().encode(headerData.comment);
+        commentOffset = prefixLength + dataLength;
+        commentLength = commentData.length;
+    }
+    let creatorDataOffset = 0;
+    let creatorDataLength = 0;
+    let creatorData = new Uint8Array(0);
+    if (headerData.creatorData) {
+        creatorData = new Uint8Array(headerData.creatorData);
+        creatorDataOffset = prefixLength + dataLength + commentLength;
+        creatorDataLength = headerData.creatorData.length;
+    }
+
+    const encoder = new TextEncoder();
+
+    prefix.set(encoder.encode('2IMG'), OFFSETS.SIGNATURE);
+    prefix.set(encoder.encode(headerData.creator.slice(0, 4)), OFFSETS.CREATOR);
+    prefixView.setInt32(OFFSETS.HEADER_LENGTH, 64, true);
+    prefixView.setInt16(OFFSETS.VERSION, 1, true);
+    prefixView.setInt32(OFFSETS.FORMAT, headerData.format, true);
+    prefixView.setInt32(OFFSETS.FLAGS, flags, true);
+    prefixView.setInt32(OFFSETS.BLOCKS, blocks, true);
+    prefixView.setInt32(OFFSETS.DATA_OFFSET, prefixLength, true);
+    prefixView.setInt32(OFFSETS.DATA_LENGTH, dataLength, true);
+    prefixView.setInt32(OFFSETS.COMMENT, commentOffset, true);
+    prefixView.setInt32(OFFSETS.COMMENT_LENGTH, commentLength, true);
+    prefixView.setInt32(OFFSETS.CREATOR_DATA, creatorDataOffset, true);
+    prefixView.setInt32(OFFSETS.CREATOR_DATA_LENGTH, creatorDataLength, true);
+
+    const suffix = new Uint8Array(commentLength + creatorDataLength);
+    suffix.set(commentData);
+    suffix.set(creatorData, commentLength);
+
+    return { prefix, suffix };
+};
+
+/**
+ * Creates a 2MG image from stored 2MG header data and a block disk. Will use
+ * default header values if headerData is null.
+ *
+ * @param headerData 2MG style header data
+ * @param blocks Prodos volume blocks
+ * @returns 2MS
+ */
+
+export const create2MGFromBlockDisk = (headerData: HeaderData | null, { blocks }: BlockDisk): ArrayBuffer => {
+    const { prefix, suffix } = create2MGFragments(headerData, { blocks: blocks.length });
+
+    const imageLength = prefix.length + blocks.length * 512 + suffix.length;
+    const byteArray = new Uint8Array(imageLength);
+    byteArray.set(prefix);
+    for (let idx = 0; idx < blocks.length; idx++) {
+        byteArray.set(blocks[idx], prefix.length + idx * 512);
+    }
+    byteArray.set(suffix, prefix.length + blocks.length * 512);
+
+    return byteArray.buffer;
+};
+
 /**
  * Returns a `Disk` object from a 2mg image.
  * @param options the disk image and options
@@ -79,13 +285,13 @@ export default function createDiskFrom2MG(options: DiskOptions) {
     // Check image format.
     // Sure, it's really 64 bits. But only 2 are actually used.
     switch (format) {
-        case 1: // PO
+        case FORMAT.ProDOS: // PO
             disk = ProDOS(options);
             break;
-        case 2: // NIB
+        case FORMAT.NIB: // NIB
             disk = Nibble(options);
             break;
-        case 0: // dsk
+        case FORMAT.DOS: // dsk
         default:  // Something hinky, assume 'dsk'
             disk = DOS(options);
             break;
diff --git a/js/formats/block.ts b/js/formats/block.ts
index 89053b8..97fc1da 100644
--- a/js/formats/block.ts
+++ b/js/formats/block.ts
@@ -1,21 +1,10 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { DiskOptions, BlockDisk, ENCODING_BLOCK } from './types';
+import { DiskOptions, BlockDisk, ENCODING_BLOCK, BlockFormat } from './types';
 
 /**
  * Returns a `Disk` object for a block volume with block-ordered data.
  * @param options the disk image and options
  */
-export default function createBlockDisk(options: DiskOptions): BlockDisk {
+export default function createBlockDisk(fmt: BlockFormat, options: DiskOptions): BlockDisk {
     const { rawData, readOnly, name } = options;
 
     if (!rawData) {
@@ -31,8 +20,9 @@ export default function createBlockDisk(options: DiskOptions): BlockDisk {
 
     const disk: BlockDisk = {
         encoding: ENCODING_BLOCK,
+        format: fmt,
         blocks,
-        name,
+        metadata: { name },
         readOnly,
     };
 
diff --git a/js/formats/create_disk.ts b/js/formats/create_disk.ts
index f0ff47b..01a28b8 100644
--- a/js/formats/create_disk.ts
+++ b/js/formats/create_disk.ts
@@ -1,6 +1,6 @@
 import { includes, memory } from '../types';
 import { base64_decode } from '../base64';
-import { DiskOptions, FloppyDisk, JSONDisk, NibbleFormat, NIBBLE_FORMATS } from './types';
+import { BitstreamFormat, DiskOptions, FloppyDisk, FloppyFormat, JSONDisk, NibbleDisk, NibbleFormat, NIBBLE_FORMATS, WozDisk } from './types';
 import createDiskFrom2MG from './2mg';
 import createDiskFromD13 from './d13';
 import createDiskFromDOS from './do';
@@ -8,13 +8,13 @@ import createDiskFromProDOS from './po';
 import createDiskFromWoz from './woz';
 import createDiskFromNibble from './nib';
 
-/**
- *
- * @param fmt Type of
- * @param options
- * @returns A nibblized disk
- */
-export function createDisk(fmt: NibbleFormat, options: DiskOptions): FloppyDisk | null {
+/** Creates a `NibbleDisk` from the given format and options. */
+export function createDisk(fmt: NibbleFormat, options: DiskOptions): NibbleDisk | null;
+/** Creates a `WozDisk` from the given format and options. */
+export function createDisk(fmt: BitstreamFormat, options: DiskOptions): WozDisk | null;
+/** Creates a `FloppyDisk` (either a `NibbleDisk` or a `WozDisk`) from the given format and options. */
+export function createDisk(fmt: FloppyFormat, options: DiskOptions): FloppyDisk | null;
+export function createDisk(fmt: FloppyFormat, options: DiskOptions): FloppyDisk | null {
     let disk: FloppyDisk | null = null;
 
     switch (fmt) {
@@ -42,7 +42,8 @@ export function createDisk(fmt: NibbleFormat, options: DiskOptions): FloppyDisk
     return disk;
 }
 
-export function createDiskFromJsonDisk(disk: JSONDisk): FloppyDisk | null {
+/** Creates a NibbleDisk from JSON */
+export function createDiskFromJsonDisk(disk: JSONDisk): NibbleDisk | null {
     const fmt = disk.type;
     const readOnly = disk.readOnly;
     const name = disk.name;
@@ -50,7 +51,7 @@ export function createDiskFromJsonDisk(disk: JSONDisk): FloppyDisk | null {
 
     if (includes(NIBBLE_FORMATS, fmt)) {
         let trackData: memory[][];
-        if (disk.encoding == 'base64') {
+        if (disk.encoding === 'base64') {
             trackData = [];
             for (let t = 0; t < disk.data.length; t++) {
                 trackData[t] = [];
diff --git a/js/formats/d13.ts b/js/formats/d13.ts
index ea7c3cb..20adac2 100644
--- a/js/formats/d13.ts
+++ b/js/formats/d13.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { explodeSector13, D13O } from './format_utils';
 import { NibbleDisk, DiskOptions, ENCODING_NIBBLE } from './types';
 
@@ -22,8 +11,7 @@ export default function createDiskFromDOS13(options: DiskOptions) {
     const disk: NibbleDisk = {
         format: 'd13',
         encoding: ENCODING_NIBBLE,
-        name,
-        side,
+        metadata: { name, side },
         volume,
         readOnly,
         tracks: []
diff --git a/js/formats/do.ts b/js/formats/do.ts
index 94543c1..c0315d7 100644
--- a/js/formats/do.ts
+++ b/js/formats/do.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { explodeSector16, DO } from './format_utils';
 import { bytify } from '../util';
 import { byte } from '../types';
@@ -24,8 +13,7 @@ export default function createDiskFromDOS(options: DiskOptions): NibbleDisk {
     const disk: NibbleDisk = {
         format: 'dsk',
         encoding: ENCODING_NIBBLE,
-        name,
-        side,
+        metadata: { name, side },
         volume,
         readOnly,
         tracks: [],
diff --git a/js/formats/dos/dos33.ts b/js/formats/dos/dos33.ts
new file mode 100644
index 0000000..86deb5a
--- /dev/null
+++ b/js/formats/dos/dos33.ts
@@ -0,0 +1,755 @@
+import { byte, word } from 'js/types';
+import { debug, toHex } from 'js/util';
+import ApplesoftDump from 'js/applesoft/decompiler';
+import IntegerBASICDump from 'js/intbasic/decompiler';
+import { MassStorageData, NibbleDisk } from '../types';
+import { readSector, writeSector, _DO } from '../format_utils';
+
+/** Usual track for VTOC */
+export const DEFAULT_VTOC_TRACK = 0x11;
+
+/** Usual sector for VTOC */
+export const DEFAULT_VTOC_SECTOR = 0x00;
+
+/** Usual track, sector for VTOC */
+export const DEFAULT_VTOC_TRACK_SECTOR = {
+    track: DEFAULT_VTOC_TRACK,
+    sector: DEFAULT_VTOC_SECTOR,
+} as const;
+
+/**
+ * VTOC sector offsets
+ */
+export const VTOC_OFFSETS = {
+    CATALOG_TRACK: 0x01,
+    CATALOG_SECTOR: 0x02,
+    VERSION: 0x03,
+    VOLUME: 0x06,
+    TRACK_SECTOR_LIST_SIZE: 0x27,
+    LAST_ALLOCATION_TRACK: 0x30,
+    ALLOCATION_DIRECTION: 0x31,
+    TRACK_COUNT: 0x34,
+    SECTOR_COUNT: 0x35,
+    SECTOR_BYTE_COUNT_LOW: 0x36,
+    SECTOR_BYTE_COUNT_HIGH: 0x37,
+    FREE_SECTOR_MAP: 0x38,
+} as const;
+
+/**
+ * Catalog sector offsets
+ */
+export const CATALOG_OFFSETS = {
+    NEXT_CATALOG_TRACK: 0x01,
+    NEXT_CATALOG_SECTOR: 0x02,
+    ENTRY1: 0x0B,
+    ENTRY2: 0x2E,
+    ENTRY3: 0x51,
+    ENTRY4: 0x74,
+    ENTRY5: 0x97,
+    ENTRY6: 0xBA,
+    ENTRY7: 0xDD,
+} as const;
+
+/**
+ * Catalog entry offsets
+ */
+export const CATALOG_ENTRY_OFFSETS = {
+    SECTOR_LIST_TRACK: 0x00,
+    SECTOR_LIST_SECTOR: 0x01,
+    FILE_TYPE: 0x02,
+    FILE_NAME: 0x03,
+    DELETED_FILE_TRACK: 0x20,
+    FILE_LENGTH_LOW: 0x21,
+    FILE_LENGTH_HIGH: 0x22,
+} as const;
+
+export const CATALOG_ENTRY_LENGTH = 0x23;
+
+/**
+ * VTOC Data
+ */
+export interface VTOC {
+    catalog: {
+        track: byte;
+        sector: byte;
+    };
+    version: byte;
+    volume: byte;
+    trackSectorListSize: byte;
+    lastAllocationTrack: byte;
+    allocationDirection: byte;
+    trackCount: byte;
+    sectorCount: byte;
+    sectorByteCount: byte;
+    trackSectorMap: boolean[][];
+}
+
+/**
+ * Track and sector data
+ */
+export interface TrackSector {
+    track: byte;
+    sector: byte;
+}
+
+/**
+ * File entry data
+ */
+export interface FileEntry {
+    locked: boolean;
+    deleted: boolean;
+    type: string;
+    size: number;
+    name: string;
+    trackSectorList: TrackSector;
+}
+
+/**
+ * File data
+ */
+export interface FileData {
+    address: word;
+    data: Uint8Array;
+}
+
+function isNibbleDisk(disk: NibbleDisk | MassStorageData): disk is NibbleDisk {
+    return !!((disk as NibbleDisk).encoding);
+}
+
+/**
+ * DOS 3.3 Volume object.
+ */
+export class DOS33 {
+    private vtoc: VTOC;
+    private files: FileEntry[];
+
+    /**
+     * Constructor can take either a nibblized disk, or a raw data
+     * object returned by MassStorage.getBinary()
+     *
+     * @param disk Nibble disk or MassStorageData object
+     */
+    constructor(private disk: NibbleDisk | MassStorageData) {
+        this.vtoc = this.readVolumeTOC();
+    }
+
+    /**
+     * Method to read or write a sector, could be overloaded to support other
+     * data types. This uses the DOS logical to physical sector mapping.
+     *
+     * @param track Track to read/write
+     * @param sector Sector to read/write
+     * @param data If present, sector data to write
+     *
+     * @returns data read or written
+     */
+    rwts(track: byte, sector: byte, data?: Uint8Array): Uint8Array {
+        if (data) {
+            if (isNibbleDisk(this.disk)) {
+                writeSector(this.disk, track, _DO[sector], data);
+            } else {
+                const offset = track * 0x1000 + sector * 0x100;
+                new Uint8Array(this.disk.data).set(data, offset);
+            }
+        } else {
+            if (isNibbleDisk(this.disk)) {
+                data = readSector(this.disk, track, _DO[sector]);
+            } else {
+                const offset = track * 0x1000 + sector * 0x100;
+                // Slice new array so modifications to apply to original track
+                data = new Uint8Array(this.disk.data.slice(offset, offset + 0x100));
+            }
+        }
+        return data;
+    }
+
+    /**
+     * Creates a classic hex and ascii dump of a sector
+     *
+     * @param track Track to dump
+     * @param sector Sector to dump
+     * @returns String representation of sector
+     */
+    dumpSector(track: byte, sector: byte) {
+        let result = '';
+        const data = this.rwts(track, sector);
+        let b;
+        for (let idx = 0; idx < 16; idx++) {
+            result += toHex(idx << 4) + ': ';
+            for (let jdx = 0; jdx < 16; jdx++) {
+                b = data[idx * 16 + jdx];
+                result += toHex(b) + ' ';
+            }
+            result += '        ';
+            for (let jdx = 0; jdx < 16; jdx++) {
+                b = data[idx * 16 + jdx] & 0x7f;
+                if (b >= 0x20 && b < 0x7f) {
+                    result += String.fromCharCode(b);
+                } else {
+                    result += '.';
+                }
+            }
+            result += '\n';
+        }
+        return result;
+    }
+
+    /**
+     * Returns all the track sector pairs for a file.
+     *
+     * @param file File to read
+     * @param full Also return track sector map entries
+     * @returns Array of file track and sectors
+     */
+    readFileTrackSectorList(file: FileEntry, full?: boolean) {
+        const fileTrackSectorList = [];
+        let { track, sector } = file.trackSectorList;
+        while (track || sector) {
+            if (full) {
+                fileTrackSectorList.push({ track, sector });
+            }
+            let jdx = 0; // offset in sector
+            const data = this.rwts(track, sector);
+            track = data[0x01];
+            sector = data[0x02];
+            let offset = 0x0C; // offset in data
+            while ((data[offset] || data[offset + 1]) && jdx < 121) {
+                fileTrackSectorList.push({
+                    track: data[offset],
+                    sector: data[offset + 1]
+                });
+                offset += 2;
+                jdx++;
+            }
+        }
+        return fileTrackSectorList;
+    }
+
+    /**
+     * Read a file from disk
+     *
+     * @param file File entry to read
+     * @returns Data for file, and load address if binary
+     */
+    readFile(file: FileEntry): FileData {
+        let data: byte[] = [];
+        let idx;
+        const fileTrackSectorList = this.readFileTrackSectorList(file);
+        for (idx = 0; idx < fileTrackSectorList.length; idx++) {
+            const { track, sector } = fileTrackSectorList[idx];
+            data = data.concat([...this.rwts(track, sector)]);
+        }
+        let offset = 0;
+        let length = 0;
+        let address = 0;
+
+        switch (file.type) {
+            case 'I':
+            case 'A':
+                offset = 2;
+                length = data[0] | data[1] << 8;
+                break;
+            case 'T':
+                length = 0;
+                while (data[length]) { length++; }
+                break;
+            case 'B':
+                offset = 4;
+                address = data[0] | data[1] << 8;
+                length = data[2] | data[3] << 8;
+                break;
+        }
+
+        data = data.slice(offset, offset + length);
+
+        return { data: new Uint8Array(data), address };
+    }
+
+    /**
+     * Allocate a new sector for a file in the allocation list
+     *
+     * @returns track and sector pair
+     */
+    allocateSector(): TrackSector {
+        const { vtoc } = this;
+        const findSector = (track: byte) => {
+            const sectorMap = vtoc.trackSectorMap[track];
+            return sectorMap.findIndex((sector: boolean) => sector);
+        };
+
+        const lastTrack = vtoc.lastAllocationTrack;
+        let track = lastTrack;
+        let sector = findSector(track);
+        while (sector === -1) {
+            if (vtoc.allocationDirection === 0x01) {
+                track = track - 1;
+                if (track < 0) {
+                    track = vtoc.catalog.track;
+                    vtoc.allocationDirection = 0xff;
+                }
+            } else {
+                track = track + 1;
+                if (track >= vtoc.trackCount) {
+                    throw new Error('Insufficient free space');
+                }
+            }
+            sector = findSector(track);
+        }
+
+        vtoc.lastAllocationTrack = track;
+        vtoc.trackSectorMap[track][sector] = false;
+
+        return { track, sector };
+    }
+
+    /**
+     * Compute free sector count.
+     *
+     * @returns count of free sectors
+     */
+    freeSectorCount() {
+        return this.vtoc.trackSectorMap.reduce((count, flags) => (
+            count + flags.reduce((count, flag) => (
+                count + (flag ? 1 : 0)
+            ), 0)
+        ), 0);
+    }
+
+    /**
+     * Compute used sector count
+     *
+     * @returns used sector count
+     */
+    usedSectorCount() {
+        return this.vtoc.trackSectorMap.reduce((count, flags) => (
+            count + flags.reduce((count, flag) => (
+                count + (flag ? 0 : 1)
+            ), 0)
+        ), 0);
+    }
+
+    /**
+     * Writes a file to disk. If new file the file entry must also be
+     * added to the catalog.
+     *
+     * @param file File to write
+     * @param fileData File data to write, including address if binary
+     */
+    writeFile(file: FileEntry, fileData: FileData) {
+        let prefix: byte[] = [];
+        let { data } = fileData;
+        switch (file.type) {
+            case 'A':
+            case 'I':
+                prefix = [
+                    data.length % 0x100,
+                    data.length >> 8
+                ];
+                break;
+            case 'B':
+                prefix = [
+                    fileData.address % 0x100,
+                    fileData.address >> 8,
+                    data.length % 0x100,
+                    data.length >> 8
+                ];
+                break;
+        }
+        data = new Uint8Array(prefix.length + data.length);
+        data.set(prefix);
+        data.set(data, prefix.length);
+
+        const { sectorByteCount, trackSectorListSize } = this.vtoc;
+        const dataRequiredSectors = Math.ceil(data.length / sectorByteCount);
+        const fileSectorListRequiredSectors = Math.ceil(dataRequiredSectors / trackSectorListSize);
+        const requiredSectors = dataRequiredSectors + fileSectorListRequiredSectors;
+        let idx;
+        let sectors: TrackSector[] = [];
+
+        if (file.trackSectorList) {
+            sectors = this.readFileTrackSectorList(file, true);
+        }
+        if (sectors.length > requiredSectors) {
+            for (idx = requiredSectors; idx < sectors.length; idx++) {
+                const { track, sector } = sectors[idx];
+                this.vtoc.trackSectorMap[track][sector] = true;
+            }
+            sectors = sectors.slice(0, requiredSectors);
+        }
+        if (sectors.length < requiredSectors) {
+            for (idx = sectors.length; idx < requiredSectors; idx++) {
+                sectors.push(this.allocateSector());
+            }
+        }
+        file.trackSectorList = { ...sectors[0] };
+        file.size = requiredSectors;
+
+        let jdx = 0;
+        let lastTrackSectorList = null;
+
+        for (idx = 0; idx < dataRequiredSectors; idx++) {
+            let sector: TrackSector;
+            let sectorData;
+
+            const { trackSectorListSize } = this.vtoc;
+            if (idx % trackSectorListSize === 0) {
+                sector = sectors.shift() as TrackSector;
+                sectorData = new Uint8Array();
+                if (lastTrackSectorList) {
+                    lastTrackSectorList[0x01] = sector.track;
+                    lastTrackSectorList[0x02] = sector.sector;
+                }
+                sectorData[0x05] = idx & 0xff;
+                sectorData[0x06] = idx >> 8;
+                for (jdx = 0; jdx < trackSectorListSize && jdx < sectors.length; jdx++) {
+                    const offset = 0xC + jdx * 2;
+                    sectorData[offset] = sectors[jdx].track;
+                    sectorData[offset + 1] = sectors[jdx].sector;
+                }
+                lastTrackSectorList = sectorData;
+                this.rwts(sector.track, sector.sector, new Uint8Array(sectorData));
+            }
+
+            sector = sectors.shift() as TrackSector;
+            sectorData = new Uint8Array(0x100);
+            sectorData.set(data.slice(0, 0x100));
+            data = data.slice(0x100);
+            this.rwts(sector.track, sector.sector, sectorData);
+        }
+        this.writeVolumeTOC();
+        this.writeCatalog();
+    }
+
+    /**
+     * Convert a file into a string that can be displayed.
+     *
+     * @param file File to convert
+     * @returns A string representing the file
+     */
+    dumpFile(file: FileEntry) {
+        let result = null;
+        const fileData = this.readFile(file);
+        switch (file.type) {
+            case 'A':
+                result = new ApplesoftDump(fileData.data, 0).decompile();
+                break;
+            case 'I':
+                result = new IntegerBASICDump(fileData.data).toString();
+                break;
+            case 'T':
+                result = '';
+                for (let idx = 0; idx < fileData.data.length; idx++) {
+                    const char = fileData.data[idx] & 0x7f;
+                    if (char < 0x20) {
+                        if (char === 0xd) { // CR
+                            result += '\n';
+                        } else {
+                            result += `$${toHex(char)}`;
+                        }
+                    } else {
+                        result += String.fromCharCode(char);
+                    }
+                }
+                break;
+            case 'B':
+            default: {
+                result = '';
+                let hex = '';
+                let ascii = '';
+                for (let idx = 0; idx < fileData.data.length; idx++) {
+                    const val = fileData.data[idx];
+                    if (idx % 16 === 0) {
+                        if (idx !== 0) {
+                            result += `${hex}    ${ascii}\n`;
+                        }
+                        hex = '';
+                        ascii = '';
+                        result += `${toHex(fileData.address + idx, 4)}:`;
+                    }
+                    hex += ` ${toHex(val)}`;
+                    ascii += (val & 0x7f) >= 0x20 ? String.fromCharCode(val & 0x7f) : '.';
+                }
+                result += '\n';
+            } break;
+        }
+        return result;
+    }
+
+    /**
+     * Read VTOC data from disk
+     *
+     * @param trackSector Track and sector to read from, or default
+     * @returns VTOC
+     */
+    readVolumeTOC(trackSector: TrackSector = DEFAULT_VTOC_TRACK_SECTOR) {
+        const data = this.rwts(trackSector.track, trackSector.sector);
+        this.vtoc = {
+            catalog: {
+                track: data[VTOC_OFFSETS.CATALOG_TRACK],
+                sector: data[VTOC_OFFSETS.CATALOG_SECTOR]
+            },
+            version: data[VTOC_OFFSETS.VERSION],
+            volume: data[VTOC_OFFSETS.VOLUME],
+            trackSectorListSize: data[VTOC_OFFSETS.TRACK_SECTOR_LIST_SIZE],
+            lastAllocationTrack: data[VTOC_OFFSETS.LAST_ALLOCATION_TRACK],
+            allocationDirection: data[VTOC_OFFSETS.ALLOCATION_DIRECTION],
+            trackCount: data[VTOC_OFFSETS.TRACK_COUNT],
+            sectorCount: data[VTOC_OFFSETS.SECTOR_COUNT],
+            sectorByteCount: data[VTOC_OFFSETS.SECTOR_BYTE_COUNT_LOW] |
+                (data[VTOC_OFFSETS.SECTOR_BYTE_COUNT_HIGH] << 8),
+            trackSectorMap: []
+        };
+
+        for (let idx = 0; idx < this.vtoc.trackCount; idx++) {
+            const sectorMap = [];
+            const offset = 0x38 + idx * 4;
+            let bitmap =
+                (data[offset] << 24) |
+                (data[offset + 1] << 16) |
+                (data[offset + 2] << 8) |
+                data[offset + 3];
+
+            for (let jdx = 0; jdx < this.vtoc.sectorCount; jdx++) {
+                sectorMap.unshift(!!(bitmap & 0x80000000));
+                bitmap <<= 1;
+            }
+            this.vtoc.trackSectorMap.push(sectorMap);
+        }
+
+        debug(`DISK VOLUME ${this.vtoc.volume}`);
+
+        return this.vtoc;
+    }
+
+    /**
+     * Write VTOC data back to disk.
+     *
+     * @param trackSector Track and sector to read from, or default
+     */
+    writeVolumeTOC(trackSector: TrackSector = DEFAULT_VTOC_TRACK_SECTOR) {
+        const { vtoc } = this;
+        const data = new Uint8Array(0x100).fill(0);
+        data[VTOC_OFFSETS.CATALOG_TRACK] = vtoc.catalog.track;
+        data[VTOC_OFFSETS.CATALOG_SECTOR] = vtoc.catalog.sector;
+        data[VTOC_OFFSETS.VERSION] = vtoc.version || 3;
+        data[VTOC_OFFSETS.VOLUME] = vtoc.volume || 0xFE;
+        data[VTOC_OFFSETS.TRACK_SECTOR_LIST_SIZE] = vtoc.trackSectorListSize || 0x7a;
+        data[VTOC_OFFSETS.LAST_ALLOCATION_TRACK] = vtoc.lastAllocationTrack;
+        data[VTOC_OFFSETS.ALLOCATION_DIRECTION] = vtoc.allocationDirection;
+        data[VTOC_OFFSETS.TRACK_COUNT] = vtoc.trackCount;
+        data[VTOC_OFFSETS.SECTOR_COUNT] = vtoc.sectorCount;
+        data[VTOC_OFFSETS.SECTOR_BYTE_COUNT_LOW] = vtoc.sectorByteCount & 0xff;
+        data[VTOC_OFFSETS.SECTOR_BYTE_COUNT_HIGH] = vtoc.sectorByteCount >> 8;
+
+        for (let idx = 0; idx < vtoc.trackSectorMap.length; idx++) {
+            const offset = 0x38 + idx * 4;
+            const sectorMap = vtoc.trackSectorMap[idx];
+
+            let mask = 0;
+            for (let jdx = 0; jdx < sectorMap.length; jdx++) {
+                mask >>= 1;
+                if (sectorMap[jdx]) {
+                    mask |= 0x80000000;
+                }
+            }
+
+            data[offset] = (mask >> 24) & 0xff;
+            data[offset + 1] = (mask >> 16) & 0xff;
+            data[offset + 2] = (mask >> 8) & 0xff;
+            data[offset + 3] = mask & 0xff;
+        }
+        this.rwts(trackSector.track, trackSector.sector, data);
+    }
+
+    /**
+     * Reads catalog from disk.
+     *
+     * @returns Catalog entries
+     */
+    readCatalog(): FileEntry[] {
+        const { catalog } = this.vtoc;
+        this.files = [];
+
+        let catTrack = catalog.track;
+        let catSector = catalog.sector;
+        while (catSector || catTrack) {
+            const data = this.rwts(catTrack, catSector);
+
+            catTrack = data[CATALOG_OFFSETS.NEXT_CATALOG_TRACK];
+            catSector = data[CATALOG_OFFSETS.NEXT_CATALOG_SECTOR];
+
+            for (let idx = CATALOG_OFFSETS.ENTRY1; idx < 0x100; idx += CATALOG_ENTRY_LENGTH) {
+                const file: FileEntry = {
+                    locked: false,
+                    deleted: false,
+                    type: 'A',
+                    size: 0,
+                    name: '',
+                    trackSectorList: { track: 0, sector: 0 },
+                };
+                let str = '';
+                const entry = data.slice(idx, idx + CATALOG_ENTRY_LENGTH);
+
+                if (!entry[CATALOG_ENTRY_OFFSETS.SECTOR_LIST_TRACK]) {
+                    continue;
+                }
+
+                file.trackSectorList = {
+                    track: entry[CATALOG_ENTRY_OFFSETS.SECTOR_LIST_TRACK],
+                    sector: entry[CATALOG_ENTRY_OFFSETS.SECTOR_LIST_SECTOR]
+                };
+
+                if (file.trackSectorList.track === 0xff) {
+                    file.deleted = true;
+                    file.trackSectorList.track = entry[CATALOG_ENTRY_OFFSETS.DELETED_FILE_TRACK];
+                }
+
+                // Locked
+                if (entry[CATALOG_ENTRY_OFFSETS.FILE_TYPE] & 0x80) {
+                    file.locked = true;
+                }
+
+                str += file.locked ? '*' : ' ';
+
+                // File type
+                switch (entry[CATALOG_ENTRY_OFFSETS.FILE_TYPE] & 0x7f) {
+                    case 0x00:
+                        file.type = 'T';
+                        break;
+                    case 0x01:
+                        file.type = 'I';
+                        break;
+                    case 0x02:
+                        file.type = 'A';
+                        break;
+                    case 0x04:
+                        file.type = 'B';
+                        break;
+                    case 0x08:
+                        file.type = 'S';
+                        break;
+                    case 0x10:
+                        file.type = 'R';
+                        break;
+                    case 0x20:
+                        file.type = 'A';
+                        break;
+                    case 0x40:
+                        file.type = 'B';
+                        break;
+                }
+                str += file.type;
+                str += ' ';
+
+                // Size
+                file.size = entry[CATALOG_ENTRY_OFFSETS.FILE_LENGTH_LOW] |
+                    entry[CATALOG_ENTRY_OFFSETS.FILE_LENGTH_HIGH] << 8;
+                str += Math.floor(file.size / 100);
+                str += Math.floor(file.size / 10) % 10;
+                str += file.size % 10;
+                str += ' ';
+
+                // Filename
+                for (let jdx = CATALOG_ENTRY_OFFSETS.FILE_NAME; jdx < 0x21; jdx++) {
+                    file.name += String.fromCharCode(entry[jdx] & 0x7f);
+                }
+                str += file.name;
+                debug(str);
+                this.files.push(file);
+            }
+        }
+        return this.files;
+    }
+
+    /**
+     * Writes catalog back to disk
+     */
+    writeCatalog() {
+        const { catalog } = this.vtoc;
+
+        let catTrack = catalog.track;
+        let catSector = catalog.sector;
+        while (catSector || catTrack) {
+            const data = this.rwts(catTrack, catSector);
+
+            for (let idx = CATALOG_OFFSETS.ENTRY1; idx < 0x100; idx += CATALOG_ENTRY_OFFSETS.SECTOR_LIST_TRACK) {
+                const file = this.files.shift();
+
+                if (!file?.trackSectorList) {
+                    continue;
+                }
+
+                data[idx + CATALOG_ENTRY_OFFSETS.SECTOR_LIST_TRACK] = file.trackSectorList.track;
+                data[idx + CATALOG_ENTRY_OFFSETS.SECTOR_LIST_SECTOR] = file.trackSectorList.sector;
+
+                data[idx + CATALOG_ENTRY_OFFSETS.FILE_TYPE] = file.locked ? 0x80 : 0x00;
+
+                // File type
+                switch (file.type) {
+                    case 'T':
+                        break;
+                    case 'I':
+                        data[idx + CATALOG_ENTRY_OFFSETS.FILE_TYPE] |= 0x01;
+                        break;
+                    case 'A':
+                        data[idx + CATALOG_ENTRY_OFFSETS.FILE_TYPE] |= 0x02;
+                        break;
+                    case 'B':
+                        data[idx + CATALOG_ENTRY_OFFSETS.FILE_TYPE] |= 0x04;
+                        break;
+                    case 'S':
+                        data[idx + CATALOG_ENTRY_OFFSETS.FILE_TYPE] |= 0x08;
+                        break;
+                    case 'R':
+                        data[idx + CATALOG_ENTRY_OFFSETS.FILE_TYPE] |= 0x10;
+                        break;
+                }
+
+                // Size
+                data[idx + CATALOG_ENTRY_OFFSETS.FILE_LENGTH_LOW] = file.size & 0xff;
+                data[idx + CATALOG_ENTRY_OFFSETS.FILE_LENGTH_HIGH] = file.size >> 8;
+
+                // Filename
+                for (let jdx = 0; jdx < 0x1E; jdx++) {
+                    data[idx + CATALOG_ENTRY_OFFSETS.FILE_NAME + jdx] = file.name.charCodeAt(jdx) | 0x80;
+                }
+            }
+            this.rwts(catTrack, catSector, data);
+
+            catTrack = data[CATALOG_OFFSETS.NEXT_CATALOG_TRACK];
+            catSector = data[CATALOG_OFFSETS.NEXT_CATALOG_SECTOR];
+        }
+    }
+
+    /**
+     * Return the volume number from the VTOC
+     *
+     * @returns Volume number
+     */
+    getVolumeNumber() {
+        return this.vtoc.volume;
+    }
+}
+
+/**
+ * Very lose check for DOS disks, currently simply checks for the
+ * version byte in the probable VTOC.
+ *
+ * @param disk Image to check for DOS
+ * @returns true if VTOC version byte is 3
+ */
+export function isMaybeDOS33(disk: NibbleDisk | MassStorageData) {
+    let data;
+    if (isNibbleDisk(disk)) {
+        data = readSector(disk, DEFAULT_VTOC_TRACK, _DO[DEFAULT_VTOC_SECTOR]);
+    } else if (disk.data.byteLength > 0) {
+        data = new Uint8Array(
+            disk.data,
+            DEFAULT_VTOC_TRACK * 4096 + DEFAULT_VTOC_SECTOR * 0x100,
+            0x100
+        );
+    } else {
+        return false;
+    }
+    return data[VTOC_OFFSETS.VERSION] === 3;
+}
diff --git a/js/formats/format_utils.ts b/js/formats/format_utils.ts
index 9032771..fd2be68 100644
--- a/js/formats/format_utils.ts
+++ b/js/formats/format_utils.ts
@@ -1,18 +1,7 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { bit, byte, memory } from '../types';
 import { base64_decode, base64_encode } from '../base64';
 import { bytify, debug, toHex } from '../util';
-import { NibbleDisk, ENCODING_NIBBLE } from './types';
+import { NibbleDisk, ENCODING_NIBBLE, JSONDisk, isNibbleDiskFormat, SupportedSectors } from './types';
 
 /**
  * DOS 3.3 Physical sector order (index is physical sector, value is DOS sector).
@@ -58,14 +47,29 @@ export const _D13O = [
     0x0, 0x1, 0x2, 0x3, 0x4, 0x5, 0x6, 0x7, 0x8, 0x9, 0xa, 0xb, 0xc
 ] as const;
 
-const _trans53 = [
+const TRANS53 = [
     0xab, 0xad, 0xae, 0xaf, 0xb5, 0xb6, 0xb7, 0xba,
     0xbb, 0xbd, 0xbe, 0xbf, 0xd6, 0xd7, 0xda, 0xdb,
     0xdd, 0xde, 0xdf, 0xea, 0xeb, 0xed, 0xee, 0xef,
     0xf5, 0xf6, 0xf7, 0xfa, 0xfb, 0xfd, 0xfe, 0xff
 ] as const;
 
-const _trans62 = [
+export const DETRANS53 = [
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // A0
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x01, 0x02, 0x03, // A8
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x04, 0x05, 0x06, // B0
+    0x00, 0x00, 0x07, 0x08, 0x00, 0x09, 0x0A, 0x0B, // B8
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // C0
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // C8
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x0C, 0x0D, // D0
+    0x00, 0x00, 0x0E, 0x0F, 0x00, 0x10, 0x11, 0x12, // D8
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, // E0
+    0x00, 0x00, 0x13, 0x14, 0x00, 0x15, 0x16, 0x17, // E8
+    0x00, 0x00, 0x00, 0x00, 0x00, 0x18, 0x19, 0x1A, // F0
+    0x00, 0x00, 0x1B, 0x1C, 0x00, 0x1D, 0x1E, 0x1F, // F8
+] as const;
+
+const TRANS62 = [
     0x96, 0x97, 0x9a, 0x9b, 0x9d, 0x9e, 0x9f, 0xa6,
     0xa7, 0xab, 0xac, 0xad, 0xae, 0xaf, 0xb2, 0xb3,
     0xb4, 0xb5, 0xb6, 0xb7, 0xb9, 0xba, 0xbb, 0xbc,
@@ -76,7 +80,7 @@ const _trans62 = [
     0xf7, 0xf9, 0xfa, 0xfb, 0xfc, 0xfd, 0xfe, 0xff
 ] as const;
 
-export const detrans62 = [
+export const DETRANS62 = [
     0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
     0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
     0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x01,
@@ -205,10 +209,10 @@ export function explodeSector16(volume: byte, track: byte, sector: byte, data: m
     let last = 0;
     for (let idx = 0; idx < 0x156; idx++) {
         const val = nibbles[idx];
-        buf.push(_trans62[last ^ val]);
+        buf.push(TRANS62[last ^ val]);
         last = val;
     }
-    buf.push(_trans62[last]);
+    buf.push(TRANS62[last]);
 
     buf = buf.concat([0xde, 0xaa, 0xeb]); // Epilog DE AA EB
 
@@ -309,15 +313,15 @@ export function explodeSector13(volume: byte, track: byte, sector: byte, data: m
     let last = 0;
     for (let idx = 0x199; idx >= 0x100; idx--) {
         const val = nibbles[idx];
-        buf.push(_trans53[last ^ val]);
+        buf.push(TRANS53[last ^ val]);
         last = val;
     }
     for (let idx = 0x0; idx < 0x100; idx++) {
         const val = nibbles[idx];
-        buf.push(_trans53[last ^ val]);
+        buf.push(TRANS53[last ^ val]);
         last = val;
     }
-    buf.push(_trans53[last]);
+    buf.push(TRANS53[last]);
 
     buf = buf.concat([0xde, 0xaa, 0xeb]); // Epilog DE AA EB
 
@@ -330,22 +334,50 @@ export function explodeSector13(volume: byte, track: byte, sector: byte, data: m
     return buf;
 }
 
+export interface TrackNibble {
+    track: byte;
+    sector: byte;
+    nibble: byte;
+    sectors: SupportedSectors;
+}
+
+enum LookingFor {
+    START_OF_FIELD_MARKER_FIRST_NIBBLE,
+    START_OF_FIELD_MARKER_SECOND_NIBBLE,
+    FIELD_TYPE_MARKER,
+    ADDRESS_FIELD,
+    ADDRESS_FIELD_13,
+    DATA_FIELD_6AND2,
+    DATA_FIELD_5AND3,
+}
+
+export class FindSectorError extends Error {
+    constructor(track: byte, sector: byte, e: unknown | Error | string) {
+        super(`Error finding track ${track} (${toHex(track)}), sector ${sector} (${toHex(sector)}): `
+            + (e instanceof Error
+                ? `${e.message}`
+                : `${String(e)}`));
+    }
+}
+
 /**
- * Reads a sector of data from a nibblized disk
- *
- * TODO(flan): Does not work on WOZ disks
+ * Finds a sector of data from a nibblized disk. The sector given should be the
+ * "physical" sector number, meaning the one that appears in the address field.
+ * The first sector with the right sector number and data whose checksum matches
+ * is returned. This means that for a dual-boot disk (DOS 3.2 and DOS 3.3),
+ * whichever sector is found first wins.
  *
  * @param disk Nibble disk
  * @param track track number to read
  * @param sector sector number to read
- * @returns An array of sector data bytes.
+ * @returns the track, sector, nibble offset, and detected sectors
  */
-export function readSector(disk: NibbleDisk, track: byte, sector: byte): memory {
-    const _sector = disk.format == 'po' ? _PO[sector] : _DO[sector];
-    let val, state = 0;
+export function findSector(disk: NibbleDisk, track: byte, sector: byte): TrackNibble {
+    const cur = disk.tracks[track];
+    let sectors: SupportedSectors = 16;
+    let state = LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
     let idx = 0;
     let retry = 0;
-    const cur = disk.tracks[track];
 
     function _readNext() {
         const result = cur[idx++];
@@ -363,76 +395,258 @@ export function readSector(disk: NibbleDisk, track: byte, sector: byte): memory
         }
     }
     let t = 0, s = 0, v = 0, checkSum;
-    const data = new Uint8Array(256);
     while (retry < 4) {
+        let val: byte;
         switch (state) {
-            case 0:
+            case LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE:
                 val = _readNext();
-                state = (val === 0xd5) ? 1 : 0;
+                state = (val === 0xd5)
+                    ? LookingFor.START_OF_FIELD_MARKER_SECOND_NIBBLE
+                    : LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
                 break;
-            case 1:
+            case LookingFor.START_OF_FIELD_MARKER_SECOND_NIBBLE:
                 val = _readNext();
-                state = (val === 0xaa) ? 2 : 0;
+                state = (val === 0xaa)
+                    ? LookingFor.FIELD_TYPE_MARKER
+                    : LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
                 break;
-            case 2:
+            case LookingFor.FIELD_TYPE_MARKER:
                 val = _readNext();
-                state = (val === 0x96) ? 3 : (val === 0xad ? 4 : 0);
+                switch (val) {
+                    case 0x96:
+                        state = LookingFor.ADDRESS_FIELD;
+                        sectors = 16;
+                        break;
+                    case 0xB5:
+                        state = LookingFor.ADDRESS_FIELD;
+                        sectors = 13;
+                        break;
+                    case 0xAD:
+                        state = sectors === 16 ? LookingFor.DATA_FIELD_6AND2 : LookingFor.DATA_FIELD_5AND3;
+                        break;
+                    default:
+                        state = LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
+                }
                 break;
-            case 3: // Address
+            case LookingFor.ADDRESS_FIELD:
                 v = defourXfour(_readNext(), _readNext()); // Volume
-                t = defourXfour(_readNext(), _readNext());
-                s = defourXfour(_readNext(), _readNext());
+                t = defourXfour(_readNext(), _readNext()); // Track
+                s = defourXfour(_readNext(), _readNext()); // Sector
                 checkSum = defourXfour(_readNext(), _readNext());
-                if (checkSum != (v ^ t ^ s)) {
+                if (checkSum !== (v ^ t ^ s)) {
                     debug('Invalid header checksum:', toHex(v), toHex(t), toHex(s), toHex(checkSum));
                 }
                 _skipBytes(3); // Skip footer
                 state = 0;
                 break;
-            case 4: // Data
-                if (s === _sector && t === track) {
-                    const data2 = [];
+            case LookingFor.DATA_FIELD_6AND2:
+                if (s === sector && t === track) {
+                    // Save start of data
+                    const nibble = idx;
+
+                    // Do checksum on data
                     let last = 0;
-                    for (let jdx = 0x55; jdx >= 0; jdx--) {
-                        val = detrans62[_readNext() - 0x80] ^ last;
-                        data2[jdx] = val;
-                        last = val;
+                    for (let jdx = 0; jdx < 0x156; jdx++) {
+                        last = DETRANS62[_readNext() - 0x80] ^ last;
                     }
-                    for (let jdx = 0; jdx < 0x100; jdx++) {
-                        val = detrans62[_readNext() - 0x80] ^ last;
-                        data[jdx] = val;
-                        last = val;
+                    const checkSum = DETRANS62[_readNext() - 0x80] ^ last;
+                    // Validate checksum before returning
+                    if (!checkSum) {
+                        return { track, sector, nibble, sectors };
+                    } else {
+                        debug('Invalid data checksum:', toHex(last), toHex(track), toHex(sector), toHex(checkSum));
                     }
-                    checkSum = detrans62[_readNext() - 0x80] ^ last;
-                    if (checkSum) {
-                        debug('Invalid data checksum:', toHex(v), toHex(t), toHex(s), toHex(checkSum));
-                    }
-                    for (let kdx = 0, jdx = 0x55; kdx < 0x100; kdx++) {
-                        data[kdx] <<= 1;
-                        if ((data2[jdx] & 0x01) !== 0) {
-                            data[kdx] |= 0x01;
-                        }
-                        data2[jdx] >>= 1;
-
-                        data[kdx] <<= 1;
-                        if ((data2[jdx] & 0x01) !== 0) {
-                            data[kdx] |= 0x01;
-                        }
-                        data2[jdx] >>= 1;
-
-                        if (--jdx < 0) jdx = 0x55;
-                    }
-                    return data;
+                    _skipBytes(3); // Skip footer
                 }
                 else
                     _skipBytes(0x159); // Skip data, checksum and footer
-                state = 0;
+                state = LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
+                break;
+            case LookingFor.DATA_FIELD_5AND3:
+                if (s === sector && t === track) {
+                    // Save start of data
+                    const nibble = idx;
+
+                    // Do checksum on data
+                    let last = 0;
+                    for (let jdx = 0; jdx < 0x19A; jdx++) {
+                        last = DETRANS53[_readNext() - 0xA0] ^ last;
+                    }
+                    const checkSum = DETRANS53[_readNext() - 0xA0] ^ last;
+                    // Validate checksum before returning
+                    if (!checkSum) {
+                        return { track, sector, nibble, sectors };
+                    } else {
+                        debug('Invalid data checksum:', toHex(last), toHex(track), toHex(sector), toHex(checkSum));
+                    }
+                    _skipBytes(3); // Skip footer
+                }
+                else {
+                    _skipBytes(0x19A); // Skip data, checksum and footer
+                }
+                state = LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
                 break;
             default:
+                state = LookingFor.START_OF_FIELD_MARKER_FIRST_NIBBLE;
                 break;
         }
     }
-    return new Uint8Array();
+    throw new FindSectorError(track, sector, `too many retries (${retry})`);
+}
+
+export class InvalidChecksum extends Error {
+    constructor(expected: byte, received: byte) {
+        super(`Expected: ${toHex(expected)}, received: ${toHex(received)}`);
+    }
+}
+
+export class ReadSectorError extends Error {
+    constructor(track: byte, sector: byte, e: unknown | Error) {
+        super(`Error reading track ${track} (${toHex(track)}), sector ${sector} (${toHex(sector)}): `
+            + (e instanceof Error
+                ? `${e.message}`
+                : `${String(e)}`));
+    }
+}
+
+/**
+ * Reads a sector of data from a nibblized disk. The sector given should be the
+ * "physical" sector number, meaning the one that appears in the address field. 
+ * Like `findSector`, the first sector with the right sector number and data
+ * whose checksum matches is returned. This means that for a dual-boot disk
+ * (DOS 3.2 and DOS 3.3), whichever sector is found first wins.
+ *
+ * This does not work for WOZ disks.
+ * 
+ * If the given track and sector combination is not found, a `ReadSectorError`
+ * will be thrown.
+ *
+ * @param disk Nibble disk
+ * @param track track number to read
+ * @param sector sector number to read
+ * @returns An array of sector data bytes.
+ */
+export function readSector(disk: NibbleDisk, track: byte, sector: byte): Uint8Array {
+    const trackNibble = findSector(disk, track, sector);
+    const { nibble, sectors } = trackNibble;
+    const cur = disk.tracks[track];
+
+    let idx = nibble;
+    const _readNext = () => {
+        const result = cur[idx++];
+        if (idx >= cur.length) {
+            idx = 0;
+        }
+        return result;
+    };
+
+    try {
+        return sectors === 13 ? readSector13(_readNext) : readSector16(_readNext);
+    } catch (e: unknown) {
+        throw new ReadSectorError(track, sector, e);
+    }
+}
+
+function readSector16(_readNext: () => byte): Uint8Array {
+    const data = new Uint8Array(256);
+    const data2 = [];
+    let last: byte = 0;
+    let val;
+
+    for (let jdx = 0x55; jdx >= 0; jdx--) {
+        val = DETRANS62[_readNext() - 0x80] ^ last;
+        data2[jdx] = val;
+        last = val;
+    }
+    for (let jdx = 0; jdx < 0x100; jdx++) {
+        val = DETRANS62[_readNext() - 0x80] ^ last;
+        data[jdx] = val;
+        last = val;
+    }
+    const checkSum = DETRANS62[_readNext() - 0x80] ^ last;
+    if (checkSum) {
+        throw new InvalidChecksum(last, checkSum ^ last);
+    }
+    for (let kdx = 0, jdx = 0x55; kdx < 0x100; kdx++) {
+        data[kdx] <<= 1;
+        if ((data2[jdx] & 0x01) !== 0) {
+            data[kdx] |= 0x01;
+        }
+        data2[jdx] >>= 1;
+
+        data[kdx] <<= 1;
+        if ((data2[jdx] & 0x01) !== 0) {
+            data[kdx] |= 0x01;
+        }
+        data2[jdx] >>= 1;
+
+        if (--jdx < 0) jdx = 0x55;
+    }
+    return data;
+}
+
+function readSector13(_readNext: () => byte) {
+    const data = new Uint8Array(256);
+    let val: byte;
+    let last: byte = 0;
+
+    // special low 3-bits of 0xFF
+    val = DETRANS53[_readNext() - 0xA0] ^ last;
+    last = val;
+    data[0xff] = val & 0b111;
+
+    // expect 0x99 nibbles of packed lower 3-bits in reverse order
+    for (let i = 0x98; i >= 0x00; i--) {
+        val = DETRANS53[_readNext() - 0xA0] ^ last;
+        last = val;
+        const off = Math.floor(i / 0x33) + 5 * (0x32 - (i % 0x33));
+        const dOff = 3 + 5 * (0x32 - (i % 0x33));
+        const eOff = 4 + 5 * (0x32 - (i % 0x33));
+        const bit = 2 - Math.floor(i / 0x33);
+        data[off] = (val & 0b11100) >> 2;
+        data[dOff] ^= ((val & 0b00010) >> 1) << bit;
+        data[eOff] ^= (val & 0b1) << bit;
+    }
+
+    // expect 0xFE nibbles of upper 5-bits
+    for (let i = 0; i < 0xFF; i++) {
+        val = DETRANS53[_readNext() - 0xA0] ^ last;
+        last = val;
+        const off = Math.floor(i / 0x33) + 5 * (0x32 - (i % 0x33));
+        data[off] ^= val << 3;
+    }
+
+    // and the last special nibble for 0xFF
+    val = DETRANS53[_readNext() - 0xA0] ^ last;
+    last = val;
+    data[0xFF] ^= val << 3;
+
+    const checkSum = DETRANS53[_readNext() - 0xA0] ^ last;
+    if (checkSum) {
+        throw new InvalidChecksum(last, checkSum ^ last);
+    }
+    return data;
+}
+
+/**
+ * Reads a sector of data from a nibblized disk
+ *
+ * TODO(flan): Does not work on WOZ disks
+ *
+ * @param disk Nibble disk
+ * @param track track number to read
+ * @param sector sector number to read
+ * @returns An array of sector data bytes.
+ */
+export function writeSector(disk: NibbleDisk, track: byte, sector: byte, _data: Uint8Array): boolean {
+    const trackNibble = findSector(disk, track, sector);
+    if (!trackNibble) {
+        return false;
+    }
+
+    // Todo
+
+    return true;
 }
 
 /**
@@ -454,7 +668,8 @@ export function jsonEncode(disk: NibbleDisk, pretty: boolean): string {
             data[t] = base64_encode(disk.tracks[t]);
         } else {
             for (let s = 0; s < 0x10; s++) {
-                (data[t] as string[])[s] = base64_encode(readSector(disk, t, s));
+                const _sector = disk.format === 'po' ? _PO[s] : _DO[s];
+                (data[t] as string[])[s] = base64_encode(readSector(disk, t, _sector));
             }
         }
     }
@@ -476,24 +691,27 @@ export function jsonEncode(disk: NibbleDisk, pretty: boolean): string {
 
 export function jsonDecode(data: string): NibbleDisk {
     const tracks: memory[] = [];
-    const json = JSON.parse(data);
-    const v = json.volume;
-    const readOnly = json.readOnly;
+    const json = JSON.parse(data) as JSONDisk;
+    const v = json.volume || 254;
+    const readOnly = json.readOnly || false;
     for (let t = 0; t < json.data.length; t++) {
         let track: byte[] = [];
         for (let s = 0; s < json.data[t].length; s++) {
-            const _s = json.type == 'po' ? PO[s] : DO[s];
-            const sector: string = json.data[t][_s];
+            const _s = json.type === 'po' ? PO[s] : DO[s];
+            const sector: string = json.data[t][_s] as string;
             const d = base64_decode(sector);
             track = track.concat(explodeSector16(v, t, s, d));
         }
         tracks[t] = bytify(track);
     }
+    if (!isNibbleDiskFormat(json.type)) {
+        throw new Error(`JSON disks of type ${json.type} are not supported`);
+    }
     const disk: NibbleDisk = {
         volume: v,
         format: json.type,
         encoding: ENCODING_NIBBLE,
-        name: json.name,
+        metadata: { name: json.name },
         tracks,
         readOnly,
     };
@@ -508,7 +726,7 @@ export function jsonDecode(data: string): NibbleDisk {
  */
 
 export function analyseDisk(disk: NibbleDisk) {
-    for (let track = 0; track < 35; track++) {
+    for (let track = 0; track < disk.tracks.length; track++) {
         let outStr = `${toHex(track)}: `;
         let val, state = 0;
         let idx = 0;
@@ -543,7 +761,7 @@ export function analyseDisk(disk: NibbleDisk) {
                     t = defourXfour(_readNext(), _readNext());
                     s = defourXfour(_readNext(), _readNext());
                     checkSum = defourXfour(_readNext(), _readNext());
-                    if (checkSum != (v ^ t ^ s)) {
+                    if (checkSum !== (v ^ t ^ s)) {
                         debug('Invalid header checksum:', toHex(v), toHex(t), toHex(s), toHex(checkSum));
                     } else {
                         outStr += toHex(s, 1);
diff --git a/js/formats/nib.ts b/js/formats/nib.ts
index 3970697..51d34e8 100644
--- a/js/formats/nib.ts
+++ b/js/formats/nib.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { NibbleDisk, DiskOptions, ENCODING_NIBBLE } from './types';
 import { memory } from '../types';
 
@@ -22,8 +11,7 @@ export default function createDiskFromNibble(options: DiskOptions): NibbleDisk {
     const disk: NibbleDisk = {
         format: 'nib',
         encoding: ENCODING_NIBBLE,
-        name,
-        side,
+        metadata: { name, side },
         volume: volume || 254,
         readOnly: readOnly || false,
         tracks: []
diff --git a/js/formats/po.ts b/js/formats/po.ts
index 0c5f7f7..41150b0 100644
--- a/js/formats/po.ts
+++ b/js/formats/po.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { explodeSector16, PO } from './format_utils';
 import { bytify } from '../util';
 import type { byte } from '../types';
@@ -22,10 +11,9 @@ import { NibbleDisk, DiskOptions, ENCODING_NIBBLE } from './types';
 export default function createDiskFromProDOS(options: DiskOptions) {
     const { data, name, side, rawData, volume, readOnly } = options;
     const disk: NibbleDisk = {
-        format: 'nib',
+        format: 'po',
         encoding: ENCODING_NIBBLE,
-        name,
-        side,
+        metadata: { name, side },
         volume: volume || 254,
         tracks: [],
         readOnly: readOnly || false,
diff --git a/js/formats/prodos/base_file.ts b/js/formats/prodos/base_file.ts
new file mode 100644
index 0000000..cd5a057
--- /dev/null
+++ b/js/formats/prodos/base_file.ts
@@ -0,0 +1,14 @@
+import { word } from 'js/types';
+import { ProDOSVolume } from '.';
+
+export interface ProDOSFileData {
+    data: Uint8Array;
+    address: word;
+}
+
+export abstract class ProDOSFile {
+    constructor(public volume: ProDOSVolume) { }
+
+    abstract read(): Uint8Array;
+    abstract write(data: Uint8Array): void;
+}
diff --git a/js/formats/prodos/bit_map.js b/js/formats/prodos/bit_map.js
deleted file mode 100644
index ed3525a..0000000
--- a/js/formats/prodos/bit_map.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-export function BitMap(volume) {
-    var vdh = volume.vdh();
-    var blocks = volume.blocks();
-
-    var BLOCK_ENTRIES = 4096;
-
-    function _init() {
-    }
-
-    _init();
-
-    return {
-        allocBlock: function () {
-            for (var idx = 0; idx < vdh.totalBlocks; idx++) {
-                var blockOffset = vdh.bitMapPointer + Math.floor(idx / BLOCK_ENTRIES);
-                var bitMapBlock = blocks[blockOffset];
-                var byteOffset = (idx - blockOffset * BLOCK_ENTRIES) >> 8;
-                var bits = bitMapBlock[byteOffset];
-                if (bits !== 0xff) {
-                    var mask = 0x01;
-                    for (var bitOffset = 0; bitOffset < 8; bitOffset++) {
-                        if (!(bits & mask)) {
-                            bitMapBlock[byteOffset] |= mask;
-                            return idx;
-                        }
-                        mask <<= 1;
-                    }
-                }
-            }
-            throw new Error('Disk full');
-        },
-
-        freeBlock: function (block) {
-            if (block >= vdh.totalBlocks) {
-                throw new Error('Block out of range');
-            }
-            var blockOffset = vdh.bitMapPointer + Math.floor(block / BLOCK_ENTRIES);
-            var byteOffset = (block - blockOffset * BLOCK_ENTRIES) >> 8;
-            var bitOffset = block & 0x7;
-
-            var bitMapBlock = blocks[blockOffset];
-
-            bitMapBlock[byteOffset] &= 0xff ^ (0x01 << bitOffset);
-        }
-    };
-}
diff --git a/js/formats/prodos/bit_map.ts b/js/formats/prodos/bit_map.ts
new file mode 100644
index 0000000..2ee141f
--- /dev/null
+++ b/js/formats/prodos/bit_map.ts
@@ -0,0 +1,74 @@
+import { word } from 'js/types';
+import { ProDOSVolume } from '.';
+import type { VDH } from './vdh';
+
+const BLOCK_ENTRIES = 4096;
+
+export class BitMap {
+    private vdh: VDH;
+    private blocks: Uint8Array[];
+
+    constructor(volume: ProDOSVolume) {
+        this.vdh = volume.vdh();
+        this.blocks = volume.blocks();
+    }
+
+    freeBlocks() {
+        const free: word[] = [];
+        let blockOffset = 0;
+        let byteOffset = 0;
+        let bitOffset = 0;
+        let bitMapBlock = this.blocks[this.vdh.bitMapPointer + blockOffset];
+        for (let idx = 0; idx < this.vdh.totalBlocks; idx++) {
+            const currentByte = bitMapBlock[byteOffset];
+            const mask = 1 << bitOffset;
+            if (currentByte & mask) {
+                free.push(idx);
+            }
+            bitOffset += 1;
+            if (bitOffset > 7) {
+                bitOffset = 0;
+                byteOffset += 1;
+                if (byteOffset > (BLOCK_ENTRIES >> 3)) {
+                    byteOffset = 0;
+                    blockOffset += 1;
+                    bitMapBlock = this.blocks[this.vdh.bitMapPointer + blockOffset];
+                }
+            }
+        }
+        return free;
+    }
+
+    allocBlock() {
+        for (let idx = 0; idx < this.vdh.totalBlocks; idx++) {
+            const blockOffset = Math.floor(idx / BLOCK_ENTRIES);
+            const bitMapBlock = this.blocks[this.vdh.bitMapPointer + blockOffset];
+            const byteOffset = (idx - blockOffset * BLOCK_ENTRIES) >> 8;
+            const bits = bitMapBlock[byteOffset];
+            if (bits !== 0xff) {
+                let mask = 0x01;
+                for (let bitOffset = 0; bitOffset < 8; bitOffset++) {
+                    if (!(bits & mask)) {
+                        bitMapBlock[byteOffset] |= mask;
+                        return idx;
+                    }
+                    mask <<= 1;
+                }
+            }
+        }
+        throw new Error('Disk full');
+    }
+
+    freeBlock(block: word) {
+        if (block >= this.vdh.totalBlocks) {
+            throw new Error('Block out of range');
+        }
+        const blockOffset = Math.floor(block / BLOCK_ENTRIES);
+        const byteOffset = (block - blockOffset * BLOCK_ENTRIES) >> 8;
+        const bitOffset = block & 0x7;
+
+        const bitMapBlock = this.blocks[this.vdh.bitMapPointer + blockOffset];
+
+        bitMapBlock[byteOffset] &= 0xff ^ (0x01 << bitOffset);
+    }
+}
diff --git a/js/formats/prodos/constants.js b/js/formats/prodos/constants.ts
similarity index 70%
rename from js/formats/prodos/constants.js
rename to js/formats/prodos/constants.ts
index 38087a8..32247e2 100644
--- a/js/formats/prodos/constants.js
+++ b/js/formats/prodos/constants.ts
@@ -1,36 +1,29 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
+import { byte } from 'js/types';
 
-export var BLOCK_SIZE = 512;
+export const BLOCK_SIZE = 512;
 
-export var STORAGE_TYPES = {
+export const STORAGE_TYPES = {
     DELETED: 0x0,
     SEEDLING: 0x1,
     SAPLING: 0x2,
     TREE: 0x3,
+    PASCAL: 0x4,
+    EXTENDED: 0x5,
     DIRECTORY: 0xD,
     SUBDIRECTORY_HEADER: 0xE,
     VDH_HEADER: 0xF
-};
+} as const;
 
-export var ACCESS_TYPES = {
+export const ACCESS_TYPES = {
     DELETE: 0x80,
     RENAME: 0x40,
     BACKUP: 0x20,
     WRITE: 0x02,
     READ: 0x01,
     ALL: 0xE3
-};
+} as const;
 
-export var FILE_TYPES = {
+export const FILE_TYPES: Record<byte, string> = {
     0x00: 'UNK', // Typeless file (SOS and ProDOS)
     0x01: 'BAD', // Bad block file
     0x02: 'PDC', // Pascal code file
@@ -62,4 +55,4 @@ export var FILE_TYPES = {
     0xFD: 'VAR', // Applesoft variables file
     0xFE: 'REL', // Relocatable code file (EDASM)
     0xFF: 'SYS'  // ProDOS system file
-};
+} as const;
diff --git a/js/formats/prodos/directory.js b/js/formats/prodos/directory.js
deleted file mode 100644
index 1caee59..0000000
--- a/js/formats/prodos/directory.js
+++ /dev/null
@@ -1,98 +0,0 @@
-
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { dateToUint32, readFileName, writeFileName, uint32ToDate } from './utils';
-import { readEntries, writeEntries } from './file_entry';
-import { STORAGE_TYPES, ACCESS_TYPES } from './constants';
-
-export function Directory(volume, fileEntry) {
-    var _fileEntry = fileEntry;
-
-    var DIRECTORY_OFFSETS = {
-        PREV: 0x00,
-        NEXT: 0x02,
-        STORAGE_TYPE: 0x04,
-        NAME_LENGTH: 0x04,
-        VOLUME_NAME: 0x05,
-        RESERVED_1: 0x14,
-        CREATION: 0x1C,
-        VERSION: 0x20,
-        MIN_VERSION: 0x21,
-        ACCESS: 0x22,
-        ENTRY_LENGTH: 0x23,
-        ENTRIES_PER_BLOCK: 0x24,
-        FILE_COUNT: 0x25,
-        PARENT: 0x27,
-        PARENT_ENTRY_NUMBER: 0x29,
-        PARENT_ENTRY_LENGTH: 0x2A
-    };
-
-    var blocks = volume.blocks();
-
-    return {
-        prev: 0,
-        next: 0,
-        storageType: STORAGE_TYPES.DIRECTORY,
-        name: 'Untitled',
-        creation: new Date(),
-        access: ACCESS_TYPES.ALL,
-        entryLength: 0x27,
-        entriesPerBlock: 23,
-        fileCount: 0,
-        parent: 0,
-        parentEntryLength: 0,
-        parentEntryNumber: 0,
-        entries: [],
-
-        read: function(fileEntry) {
-            fileEntry = fileEntry || _fileEntry;
-
-            var block = new DataView(blocks[fileEntry.keyPointer].buffer);
-
-            this.prev = block.getUint16(DIRECTORY_OFFSETS.PREV, true);
-            this.next = block.getUint16(DIRECTORY_OFFSETS.NEXT, true);
-            this.storageType = block.getUint8(DIRECTORY_OFFSETS.STORAGE_TYPE) >> 4;
-            var nameLength = block.getUint8(DIRECTORY_OFFSETS.NAME_LENGTH) & 0xF;
-            var caseBits = block.getUint8(DIRECTORY_OFFSETS.CASE_BITS);
-            this.name = readFileName(block, DIRECTORY_OFFSETS.VOLUME_NAME, nameLength, caseBits);
-            this.creation = uint32ToDate(block.getUint32(DIRECTORY_OFFSETS.CREATION, true));
-            this.access = block.getUint8(DIRECTORY_OFFSETS.ACCESS);
-            this.entryLength = block.getUint8(DIRECTORY_OFFSETS.ENTRY_LENGTH);
-            this.entriesPerBlock = block.getUint8(DIRECTORY_OFFSETS.ENTRIES_PER_BLOCK);
-            this.fileCount = block.getUint16(DIRECTORY_OFFSETS.FILE_COUNT, true);
-            this.parent = block.getUint16(DIRECTORY_OFFSETS.PARENT, true);
-            this.parentEntryNumber = block.getUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_NUMBER);
-            this.parentEntryLength = block.getUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_LENGTH);
-
-            this.entries = readEntries(volume, block, this);
-        },
-
-        write: function() {
-            var block = new DataView(blocks[fileEntry.keyPointer].buffer);
-
-            var nameLength = name.length & 0x0f;
-            block.setUint8(DIRECTORY_OFFSETS.STORAGE_TYPE, this.storageType << 4 & nameLength);
-            var caseBits = writeFileName(block, DIRECTORY_OFFSETS.FILE_NAME, this.name);
-            block.setUint32(DIRECTORY_OFFSETS.CREATION, dateToUint32(this.creation), true);
-            block.setUint16(DIRECTORY_OFFSETS.CASE_BITS, caseBits);
-            block.setUint8(DIRECTORY_OFFSETS.ACCESS, this.access);
-            block.setUint8(DIRECTORY_OFFSETS.ENTRY_LENGTH, this.entryLength);
-            block.setUint8(DIRECTORY_OFFSETS.ENTRIES_PER_BLOCK, this.entriesPerBlock);
-            block.setUint16(DIRECTORY_OFFSETS.FILE_COUNT, this.fileCount, true);
-            block.setUint16(DIRECTORY_OFFSETS.PARENT, this.parent, true);
-            block.setUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_NUMBER, this.parentEntryNumber);
-            block.setUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_LENGTH, this.parentEntryLength);
-
-            writeEntries(volume, block, this);
-        }
-    };
-}
diff --git a/js/formats/prodos/directory.ts b/js/formats/prodos/directory.ts
new file mode 100644
index 0000000..abeed3b
--- /dev/null
+++ b/js/formats/prodos/directory.ts
@@ -0,0 +1,94 @@
+
+import { dateToUint32, readFileName, writeFileName, uint32ToDate } from './utils';
+import { FileEntry, readEntries, writeEntries } from './file_entry';
+import { STORAGE_TYPES, ACCESS_TYPES } from './constants';
+import { byte, word } from 'js/types';
+import { ProDOSVolume } from '.';
+import { VDH } from './vdh';
+
+export const DIRECTORY_OFFSETS = {
+    PREV: 0x00,
+    NEXT: 0x02,
+    STORAGE_TYPE: 0x04,
+    NAME_LENGTH: 0x04,
+    DIRECTORY_NAME: 0x05,
+    RESERVED_1: 0x14,
+    CREATION: 0x1C,
+    CASE_BITS: 0x20,
+    VERSION: 0x20,
+    MIN_VERSION: 0x21,
+    ACCESS: 0x22,
+    ENTRY_LENGTH: 0x23,
+    ENTRIES_PER_BLOCK: 0x24,
+    FILE_COUNT: 0x25,
+    PARENT: 0x27,
+    PARENT_ENTRY_NUMBER: 0x29,
+    PARENT_ENTRY_LENGTH: 0x2A
+} as const;
+
+export class Directory {
+    blocks: Uint8Array[];
+    vdh: VDH;
+
+    prev: word = 0;
+    next: word = 0;
+    storageType: byte = STORAGE_TYPES.DIRECTORY;
+    name: string = 'Untitled';
+    creation: Date = new Date();
+    access: byte = ACCESS_TYPES.ALL;
+    entryLength = 0x27;
+    entriesPerBlock: byte = 23;
+    fileCount = 0;
+    parent: word = 0;
+    parentEntryLength: byte = 0;
+    parentEntryNumber: byte = 0;
+    entries: FileEntry[] = [];
+
+    constructor(private volume: ProDOSVolume, private fileEntry: FileEntry) {
+        this.blocks = this.volume.blocks();
+        this.vdh = this.volume.vdh();
+        this.read();
+    }
+
+    read(fileEntry?: FileEntry) {
+        this.fileEntry = fileEntry ?? this.fileEntry;
+
+        const block = new DataView(this.blocks[this.fileEntry.keyPointer].buffer);
+
+        this.prev = block.getUint16(DIRECTORY_OFFSETS.PREV, true);
+        this.next = block.getUint16(DIRECTORY_OFFSETS.NEXT, true);
+        this.storageType = block.getUint8(DIRECTORY_OFFSETS.STORAGE_TYPE) >> 4;
+        const nameLength = block.getUint8(DIRECTORY_OFFSETS.NAME_LENGTH) & 0xF;
+        const caseBits = block.getUint8(DIRECTORY_OFFSETS.CASE_BITS);
+        this.name = readFileName(block, DIRECTORY_OFFSETS.DIRECTORY_NAME, nameLength, caseBits);
+        this.creation = uint32ToDate(block.getUint32(DIRECTORY_OFFSETS.CREATION, true));
+        this.access = block.getUint8(DIRECTORY_OFFSETS.ACCESS);
+        this.entryLength = block.getUint8(DIRECTORY_OFFSETS.ENTRY_LENGTH);
+        this.entriesPerBlock = block.getUint8(DIRECTORY_OFFSETS.ENTRIES_PER_BLOCK);
+        this.fileCount = block.getUint16(DIRECTORY_OFFSETS.FILE_COUNT, true);
+        this.parent = block.getUint16(DIRECTORY_OFFSETS.PARENT, true);
+        this.parentEntryNumber = block.getUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_NUMBER);
+        this.parentEntryLength = block.getUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_LENGTH);
+
+        this.entries = readEntries(this.volume, block, this);
+    }
+
+    write() {
+        const block = new DataView(this.blocks[this.fileEntry.keyPointer].buffer);
+
+        const nameLength = this.name.length & 0x0f;
+        block.setUint8(DIRECTORY_OFFSETS.STORAGE_TYPE, this.storageType << 4 & nameLength);
+        const caseBits = writeFileName(block, DIRECTORY_OFFSETS.DIRECTORY_NAME, this.name);
+        block.setUint32(DIRECTORY_OFFSETS.CREATION, dateToUint32(this.creation), true);
+        block.setUint16(DIRECTORY_OFFSETS.CASE_BITS, caseBits);
+        block.setUint8(DIRECTORY_OFFSETS.ACCESS, this.access);
+        block.setUint8(DIRECTORY_OFFSETS.ENTRY_LENGTH, this.entryLength);
+        block.setUint8(DIRECTORY_OFFSETS.ENTRIES_PER_BLOCK, this.entriesPerBlock);
+        block.setUint16(DIRECTORY_OFFSETS.FILE_COUNT, this.fileCount, true);
+        block.setUint16(DIRECTORY_OFFSETS.PARENT, this.parent, true);
+        block.setUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_NUMBER, this.parentEntryNumber);
+        block.setUint8(DIRECTORY_OFFSETS.PARENT_ENTRY_LENGTH, this.parentEntryLength);
+
+        writeEntries(this.volume, block, this.vdh);
+    }
+}
diff --git a/js/formats/prodos/file_entry.js b/js/formats/prodos/file_entry.js
deleted file mode 100644
index 764e4ae..0000000
--- a/js/formats/prodos/file_entry.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { dateToUint32, readFileName, writeFileName, uint32ToDate } from './utils';
-import { STORAGE_TYPES, ACCESS_TYPES } from './constants';
-
-export function FileEntry () {
-    var ENTRY_OFFSETS = {
-        STORAGE_TYPE: 0x00,
-        NAME_LENGTH: 0x00,
-        FILE_NAME: 0x01,
-        FILE_TYPE: 0x10,
-        KEY_POINTER: 0x11,
-        BLOCKS_USED: 0x13,
-        EOF: 0x15,
-        CREATION: 0x18,
-        CASE_BITS: 0x1C,
-        VERSION: 0x1C,
-        MIN_VERSION: 0x1D,
-        ACCESS: 0x1E,
-        AUX_TYPE: 0x1F,
-        LAST_MOD: 0x21,
-        HEADER_POINTER: 0x25
-    };
-
-    var _block;
-    var _offset;
-
-    return {
-        storageType: STORAGE_TYPES.SEEDLING,
-        name: 'Untitled',
-        fileType: 0,
-        auxType: 0,
-        blocksUsed: 0,
-        eof: 0,
-        access: ACCESS_TYPES.ALL,
-        creation: new Date(),
-        lastMod: new Date(),
-        keyPointer: 0,
-        headerPointer: 0,
-
-        read: function(block, offset) {
-            _block = block;
-            _offset = offset;
-
-            this.storageType = block.getUint8(offset + ENTRY_OFFSETS.STORAGE_TYPE) >> 4;
-            var nameLength = block.getUint8(offset + ENTRY_OFFSETS.NAME_LENGTH) & 0xF;
-            var caseBits = block.getUint16(offset + ENTRY_OFFSETS.CASE_BITS, true);
-            this.name = readFileName(block, offset + ENTRY_OFFSETS.FILE_NAME, nameLength, caseBits);
-            this.fileType = block.getUint8(offset + ENTRY_OFFSETS.FILE_TYPE);
-            this.keyPointer = block.getUint16(offset + ENTRY_OFFSETS.KEY_POINTER, true);
-            this.blocksUsed = block.getUint16(offset + ENTRY_OFFSETS.BLOCKS_USED, true);
-            this.eof =
-                block.getUint8(offset + ENTRY_OFFSETS.EOF) |
-                block.getUint8(offset + ENTRY_OFFSETS.EOF + 1) << 8 |
-                block.getUint8(offset + ENTRY_OFFSETS.EOF + 2) << 16;
-            this.creation = uint32ToDate(block.getUint32(offset + ENTRY_OFFSETS.CREATION, true));
-            this.access = block.getUint8(offset + ENTRY_OFFSETS.ACCESS);
-            this.auxType = block.getUint16(offset + ENTRY_OFFSETS.AUX_TYPE, true);
-            this.lastMod = uint32ToDate(block.getUint32(offset + ENTRY_OFFSETS.LAST_MOD, true));
-            this.headerPointer = block.getUint16(offset + ENTRY_OFFSETS.HEADER_POINTER, true);
-        },
-
-        write: function(block, offset) {
-            block = block || _block;
-            offset = offset || _offset;
-
-            var nameLength = name.length & 0x0f;
-            block.setUint8(offset + ENTRY_OFFSETS.STORAGE_TYPE, this.storageType << 4 & nameLength);
-            var caseBits = writeFileName(block, offset + ENTRY_OFFSETS.FILE_NAME, this.name);
-            block.setUint16(offset + ENTRY_OFFSETS.CASE_BITS, caseBits);
-            block.setUint8(offset + ENTRY_OFFSETS.FILE_TYPE, this.fileType);
-            block.setUint16(offset + ENTRY_OFFSETS.KEY_POINTER, this.keyPointer, true);
-            block.setUint16(offset + ENTRY_OFFSETS.BLOCKS_USED, this.blocksUsed, true);
-            block.setUint8(offset + ENTRY_OFFSETS.EOF, this.eof & 0xff);
-            block.setUint8(offset + ENTRY_OFFSETS.EOF + 1, (this.eof && 0xff00) >> 8);
-            block.setUint8(offset + ENTRY_OFFSETS.EOF + 2, this.eof >> 16);
-            block.setUint32(offset + ENTRY_OFFSETS.CREATION, dateToUint32(this.creation), true);
-            block.setUint8(offset + ENTRY_OFFSETS.ACCESS, this.access);
-            block.setUint16(offset + ENTRY_OFFSETS.AUX_TYPE, this.auxType, true);
-            block.setUint32(offset + ENTRY_OFFSETS.LAST_MOD, dateToUint32(this.lastMod), true);
-            block.setUint16(offset + ENTRY_OFFSETS.HEADER_POINTER, this.headerPointer, true);
-        }
-    };
-}
-
-export function readEntries(volume, block, header) {
-    var blocks = volume.blocks();
-    var entries = [];
-    var offset = header.entryLength + 0x4;
-    var count = 2;
-    var next = header.next;
-
-    for (var idx = 0; idx < header.fileCount; idx++) {
-        var fileEntry = new FileEntry();
-        fileEntry.read(block, offset);
-        entries.push(fileEntry);
-        offset += header.entryLength;
-        count++;
-        if (count >= header.entriesPerBlock) {
-            block = new DataView(blocks[next].buffer);
-            next = block.getUint16(0x02, true);
-            offset = 0x4;
-            count = 0;
-        }
-    }
-
-    return entries;
-}
-
-export function writeEntries(volume, block, header) {
-    var blocks = volume.blocks();
-    var bitMap = volume.bitmap();
-    var offset = header.entryLength + 0x4;
-    var count = 2;
-    var next = header.next;
-
-    for (var idx = 0; idx < header.fileCount; idx++) {
-        var fileEntry = new header.entries[idx];
-        fileEntry.write(block, offset);
-        offset += header.entryLength;
-        count++;
-        if (count >= header.entriesPerBlock) {
-            var prev = next;
-            if (!next) {
-                next = bitMap.allocBlock();
-            }
-            block = new DataView(blocks[next].buffer);
-            block.setUint16(0x00, prev, true);
-            next = block.getUint16(0x02, true);
-            offset = 0x4;
-            count = 0;
-        }
-    }
-    next = block.getUint16(0x02, true);
-    block.setUint16(0x02, 0, true);
-    while (next) {
-        block = new DataView(blocks[next].buffer);
-        bitMap.freeLock(next);
-        next = block.getUint16(0x02, true);
-    }
-}
diff --git a/js/formats/prodos/file_entry.ts b/js/formats/prodos/file_entry.ts
new file mode 100644
index 0000000..ae82946
--- /dev/null
+++ b/js/formats/prodos/file_entry.ts
@@ -0,0 +1,206 @@
+import { dateToUint32, readFileName, writeFileName, uint32ToDate } from './utils';
+import { STORAGE_TYPES, ACCESS_TYPES } from './constants';
+import type { byte, word } from 'js/types';
+import { toHex } from 'js/util';
+import { ProDOSVolume } from '.';
+import { VDH } from './vdh';
+import { Directory } from './directory';
+import { ProDOSFile } from './base_file';
+import { SaplingFile } from './sapling_file';
+import { SeedlingFile } from './seedling_file';
+import { TreeFile } from './tree_file';
+import ApplesoftDump from 'js/applesoft/decompiler';
+
+const ENTRY_OFFSETS = {
+    STORAGE_TYPE: 0x00,
+    NAME_LENGTH: 0x00,
+    FILE_NAME: 0x01,
+    FILE_TYPE: 0x10,
+    KEY_POINTER: 0x11,
+    BLOCKS_USED: 0x13,
+    EOF: 0x15,
+    CREATION: 0x18,
+    CASE_BITS: 0x1C,
+    VERSION: 0x1C,
+    MIN_VERSION: 0x1D,
+    ACCESS: 0x1E,
+    AUX_TYPE: 0x1F,
+    LAST_MOD: 0x21,
+    HEADER_POINTER: 0x25
+} as const;
+
+export class FileEntry {
+    block: DataView;
+    offset: word;
+
+    storageType: byte = STORAGE_TYPES.SEEDLING;
+    name: string = 'Untitled';
+    fileType: byte = 0;
+    auxType: word = 0;
+    blocksUsed: word = 0;
+    eof: number = 0;
+    access: byte = ACCESS_TYPES.ALL;
+    creation: Date = new Date();
+    lastMod: Date = new Date();
+    keyPointer: word = 0;
+    headerPointer: word = 0;
+
+    constructor(public volume: ProDOSVolume) { }
+
+    read(block: DataView, offset: word) {
+        this.block = block;
+        this.offset = offset;
+
+        this.storageType = block.getUint8(offset + ENTRY_OFFSETS.STORAGE_TYPE) >> 4;
+        const nameLength = block.getUint8(offset + ENTRY_OFFSETS.NAME_LENGTH) & 0xF;
+        const caseBits = block.getUint16(offset + ENTRY_OFFSETS.CASE_BITS, true);
+        this.name = readFileName(block, offset + ENTRY_OFFSETS.FILE_NAME, nameLength, caseBits);
+        this.fileType = block.getUint8(offset + ENTRY_OFFSETS.FILE_TYPE);
+        this.keyPointer = block.getUint16(offset + ENTRY_OFFSETS.KEY_POINTER, true);
+        this.blocksUsed = block.getUint16(offset + ENTRY_OFFSETS.BLOCKS_USED, true);
+        this.eof =
+            block.getUint8(offset + ENTRY_OFFSETS.EOF) |
+            block.getUint8(offset + ENTRY_OFFSETS.EOF + 1) << 8 |
+            block.getUint8(offset + ENTRY_OFFSETS.EOF + 2) << 16;
+        this.creation = uint32ToDate(block.getUint32(offset + ENTRY_OFFSETS.CREATION, true));
+        this.access = block.getUint8(offset + ENTRY_OFFSETS.ACCESS);
+        this.auxType = block.getUint16(offset + ENTRY_OFFSETS.AUX_TYPE, true);
+        this.lastMod = uint32ToDate(block.getUint32(offset + ENTRY_OFFSETS.LAST_MOD, true));
+        this.headerPointer = block.getUint16(offset + ENTRY_OFFSETS.HEADER_POINTER, true);
+    }
+
+    write(block?: DataView, offset?: word) {
+        this.block = block ?? this.block;
+        this.offset = offset ?? this.offset;
+
+        const nameLength = this.name.length & 0x0f;
+        this.block.setUint8(this.offset + ENTRY_OFFSETS.STORAGE_TYPE, this.storageType << 4 & nameLength);
+        const caseBits = writeFileName(this.block, this.offset + ENTRY_OFFSETS.FILE_NAME, this.name);
+        this.block.setUint16(this.offset + ENTRY_OFFSETS.CASE_BITS, caseBits);
+        this.block.setUint8(this.offset + ENTRY_OFFSETS.FILE_TYPE, this.fileType);
+        this.block.setUint16(this.offset + ENTRY_OFFSETS.KEY_POINTER, this.keyPointer, true);
+        this.block.setUint16(this.offset + ENTRY_OFFSETS.BLOCKS_USED, this.blocksUsed, true);
+        this.block.setUint8(this.offset + ENTRY_OFFSETS.EOF, this.eof & 0xff);
+        this.block.setUint8(this.offset + ENTRY_OFFSETS.EOF + 1, (this.eof && 0xff00) >> 8);
+        this.block.setUint8(this.offset + ENTRY_OFFSETS.EOF + 2, this.eof >> 16);
+        this.block.setUint32(this.offset + ENTRY_OFFSETS.CREATION, dateToUint32(this.creation), true);
+        this.block.setUint8(this.offset + ENTRY_OFFSETS.ACCESS, this.access);
+        this.block.setUint16(this.offset + ENTRY_OFFSETS.AUX_TYPE, this.auxType, true);
+        this.block.setUint32(this.offset + ENTRY_OFFSETS.LAST_MOD, dateToUint32(this.lastMod), true);
+        this.block.setUint16(this.offset + ENTRY_OFFSETS.HEADER_POINTER, this.headerPointer, true);
+    }
+
+    getFileData() {
+        let file: ProDOSFile | null = null;
+
+        switch (this.storageType) {
+            case STORAGE_TYPES.SEEDLING:
+                file = new SeedlingFile(this.volume, this);
+                break;
+            case STORAGE_TYPES.SAPLING:
+                file = new SaplingFile(this.volume, this);
+                break;
+            case STORAGE_TYPES.TREE:
+                file = new TreeFile(this.volume, this);
+                break;
+        }
+
+        if (file) {
+            return file.read();
+        }
+    }
+
+    getFileText() {
+        const data = this.getFileData();
+        let result: string | null = null;
+        let address = 0;
+
+        if (data) {
+            if (this.fileType === 0xFC) { // BAS
+                result = new ApplesoftDump(data, 0).decompile();
+            } else {
+                if (this.fileType === 0x06) { // BIN
+                    address = this.auxType;
+                }
+                result = '';
+                let hex = '';
+                let ascii = '';
+                for (let idx = 0; idx < data.length; idx++) {
+                    const val = data[idx];
+                    if (idx % 16 === 0) {
+                        if (idx !== 0) {
+                            result += `${hex}    ${ascii}\n`;
+                        }
+                        hex = '';
+                        ascii = '';
+                        result += `${toHex(address + idx, 4)}:`;
+                    }
+                    hex += ` ${toHex(val)}`;
+                    ascii += (val & 0x7f) >= 0x20 ? String.fromCharCode(val & 0x7f) : '.';
+                }
+                result += '\n';
+            }
+        }
+        return result;
+    }
+}
+
+export function readEntries(volume: ProDOSVolume, block: DataView, header: VDH | Directory) {
+    const blocks = volume.blocks();
+    const entries = [];
+    let offset = header.entryLength + 0x4;
+    let count = 2;
+    let next = header.next;
+
+    for (let idx = 0; idx < header.fileCount;) {
+        const fileEntry = new FileEntry(volume);
+        fileEntry.read(block, offset);
+        entries.push(fileEntry);
+        if (fileEntry.storageType !== STORAGE_TYPES.DELETED) {
+            idx++;
+        }
+        offset += header.entryLength;
+        count++;
+        if (count > header.entriesPerBlock) {
+            block = new DataView(blocks[next].buffer);
+            next = block.getUint16(0x02, true);
+            offset = 0x4;
+            count = 1;
+        }
+    }
+
+    return entries;
+}
+
+export function writeEntries(volume: ProDOSVolume, block: DataView, header: VDH | Directory) {
+    const blocks = volume.blocks();
+    const bitMap = volume.bitMap();
+    let offset = header.entryLength + 0x4;
+    let count = 2;
+    let next = header.next;
+
+    for (let idx = 0; idx < header.fileCount; idx++) {
+        const fileEntry = header.entries[idx];
+        fileEntry.write(block, offset);
+        offset += header.entryLength;
+        count++;
+        if (count >= header.entriesPerBlock) {
+            const prev = next;
+            if (!next) {
+                next = bitMap.allocBlock();
+            }
+            block = new DataView(blocks[next].buffer);
+            block.setUint16(0x00, prev, true);
+            next = block.getUint16(0x02, true);
+            offset = 0x4;
+            count = 0;
+        }
+    }
+    next = block.getUint16(0x02, true);
+    block.setUint16(0x02, 0, true);
+    while (next) {
+        block = new DataView(blocks[next].buffer);
+        bitMap.freeBlock(next);
+        next = block.getUint16(0x02, true);
+    }
+}
diff --git a/js/formats/prodos/index.js b/js/formats/prodos/index.js
deleted file mode 100644
index bf7c7bf..0000000
--- a/js/formats/prodos/index.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { VDH } from './vdh';
-import { BitMap } from './bit_map';
-
-export function ProDOSVolume(disk) {
-    var _disk = disk;
-    var _vdh;
-    var _bitMap;
-
-    return {
-        disk() {
-            return _disk;
-        },
-
-        blocks() {
-            return _disk.blocks;
-        },
-
-        vdh() {
-            if (!_vdh) {
-                _vdh = new VDH(this);
-                _vdh.read();
-            }
-            return _vdh;
-        },
-
-        bitMap() {
-            if (!_bitMap) {
-                _bitMap = new BitMap(this);
-            }
-            return _bitMap;
-        }
-    };
-}
diff --git a/js/formats/prodos/index.ts b/js/formats/prodos/index.ts
new file mode 100644
index 0000000..f06911a
--- /dev/null
+++ b/js/formats/prodos/index.ts
@@ -0,0 +1,33 @@
+import { VDH } from './vdh';
+import { BitMap } from './bit_map';
+import { BlockDisk } from '../types';
+
+export class ProDOSVolume {
+    _vdh: VDH;
+    _bitMap: BitMap;
+
+    constructor(private _disk: BlockDisk) {}
+
+    disk() {
+        return this._disk;
+    }
+
+    blocks() {
+        return this._disk.blocks;
+    }
+
+    vdh() {
+        if (!this._vdh) {
+            this._vdh = new VDH(this);
+            this._vdh.read();
+        }
+        return this._vdh;
+    }
+
+    bitMap() {
+        if (!this._bitMap) {
+            this._bitMap = new BitMap(this);
+        }
+        return this._bitMap;
+    }
+}
diff --git a/js/formats/prodos/sapling_file.js b/js/formats/prodos/sapling_file.js
deleted file mode 100644
index aa58447..0000000
--- a/js/formats/prodos/sapling_file.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { BLOCK_SIZE, STORAGE_TYPES } from './constants';
-
-export function SaplingFile (volume, fileEntry) {
-    var blocks = volume.blocks();
-    var bitMap = volume.bitMap();
-
-    return {
-        getBlockPointers() {
-            var saplingBlock = blocks[fileEntry.keyPointer];
-            var seedlingPointers = new DataView(saplingBlock);
-
-            var pointers = [fileEntry.keyPointer];
-            for (var idx = 0; idx < 256; idx++) {
-                var seedlingPointer = seedlingPointers.getUint16(idx * 2);
-                if (seedlingPointer) {
-                    pointers.push(seedlingPointer);
-                }
-            }
-            return pointers;
-        },
-
-        read: function() {
-            var saplingBlock = blocks[fileEntry.keyPointer];
-            var seedlingPointers = new DataView(saplingBlock);
-
-            var remainingLength = fileEntry.oef;
-            var data = new Uint8Array(remainingLength);
-            var offset = 0;
-            var idx = 0;
-            while (remainingLength > 0) {
-                var seedlingPointer = seedlingPointers.getUint16(idx * 2);
-                if (seedlingPointer) {
-                    var seedlingBlock = blocks[seedlingPointer];
-                    var bytes = seedlingBlock.slice(0, Math.min(BLOCK_SIZE, remainingLength));
-
-                    data.set(bytes, offset);
-                }
-                idx++;
-                offset += BLOCK_SIZE;
-                remainingLength -= BLOCK_SIZE;
-            }
-            return data;
-        },
-
-        write: function(data) {
-            fileEntry.storageType = STORAGE_TYPES.SAPLING;
-            fileEntry.keyPointer = bitMap.allocBlock();
-            fileEntry.eof = data.byteLength;
-            var saplingBlock = blocks[fileEntry.keyPointer];
-            var seedlingPointers = new DataView(saplingBlock);
-
-            var remainingLength = data.byteLength;
-            var offset = 0;
-            var idx = 0;
-
-            while (remainingLength > 0) {
-                var seedlingPointer = bitMap.allocBlock();
-                seedlingPointers.setUint16(idx * 2, seedlingPointer, true);
-                var seedlingBlock = blocks[seedlingPointer];
-                seedlingBlock.set(data.slice(offset, Math.min(BLOCK_SIZE, remainingLength)));
-                idx++;
-                offset += BLOCK_SIZE;
-                remainingLength -= BLOCK_SIZE;
-            }
-            fileEntry.write();
-        },
-
-        delete: function() {
-            var pointers = this.getBlockPointers();
-            for (var idx; idx < pointers.length; idx++) {
-                bitMap.freeBlock(pointers[idx]);
-            }
-        }
-    };
-}
-
diff --git a/js/formats/prodos/sapling_file.ts b/js/formats/prodos/sapling_file.ts
new file mode 100644
index 0000000..11107cb
--- /dev/null
+++ b/js/formats/prodos/sapling_file.ts
@@ -0,0 +1,90 @@
+import { ProDOSVolume } from '.';
+import type { BitMap } from './bit_map';
+import { BLOCK_SIZE, STORAGE_TYPES } from './constants';
+import { FileEntry } from './file_entry';
+import { ProDOSFile } from './base_file';
+
+export class SaplingFile extends ProDOSFile {
+    blocks: Uint8Array[];
+    bitMap: BitMap;
+
+    constructor(volume: ProDOSVolume, private fileEntry: FileEntry) {
+        super(volume);
+        this.blocks = this.volume.blocks();
+        this.bitMap = this.volume.bitMap();
+    }
+
+    getBlockPointers() {
+        const saplingBlock = this.blocks[this.fileEntry.keyPointer];
+        const seedlingPointers = new DataView(saplingBlock);
+
+        const pointers = [this.fileEntry.keyPointer];
+        for (let idx = 0; idx < 256; idx++) {
+            const seedlingPointer =
+                seedlingPointers.getUint8(idx) |
+                (seedlingPointers.getUint8(0x100 + idx) << 8);
+            if (seedlingPointer) {
+                pointers.push(seedlingPointer);
+            }
+        }
+        return pointers;
+    }
+
+    // TODO(whscullin): Why did I not use getBlockPointers for these...
+    read() {
+        const saplingBlock = this.blocks[this.fileEntry.keyPointer];
+        const seedlingPointers = new DataView(saplingBlock.buffer);
+
+        let remainingLength = this.fileEntry.eof;
+        const data = new Uint8Array(remainingLength);
+        let offset = 0;
+        let idx = 0;
+        while (remainingLength > 0) {
+            const seedlingPointer =
+                seedlingPointers.getUint8(idx) |
+                (seedlingPointers.getUint8(0x100 + idx) << 8);
+            if (seedlingPointer) {
+                const seedlingBlock = this.blocks[seedlingPointer];
+                const bytes = seedlingBlock.slice(0, Math.min(BLOCK_SIZE, remainingLength));
+
+                data.set(bytes, offset);
+            }
+            idx++;
+            offset += BLOCK_SIZE;
+            remainingLength -= BLOCK_SIZE;
+        }
+        return data;
+    }
+
+    write(data: Uint8Array) {
+        this.fileEntry.storageType = STORAGE_TYPES.SAPLING;
+        this.fileEntry.keyPointer = this.bitMap.allocBlock();
+        this.fileEntry.eof = data.byteLength;
+        const saplingBlock = this.blocks[this.fileEntry.keyPointer];
+        const seedlingPointers = new DataView(saplingBlock);
+
+        let remainingLength = data.byteLength;
+        let offset = 0;
+        let idx = 0;
+
+        while (remainingLength > 0) {
+            const seedlingPointer = this.bitMap.allocBlock();
+            seedlingPointers.setUint8(idx, seedlingPointer & 0xff);
+            seedlingPointers.setUint8(0x100 + idx, seedlingPointer >> 8);
+            const seedlingBlock = this.blocks[seedlingPointer];
+            seedlingBlock.set(data.slice(offset, Math.min(BLOCK_SIZE, remainingLength)));
+            idx++;
+            offset += BLOCK_SIZE;
+            remainingLength -= BLOCK_SIZE;
+        }
+        this.fileEntry.write();
+    }
+
+    delete() {
+        const pointers = this.getBlockPointers();
+        for (let idx = 0; idx < pointers.length; idx++) {
+            this.bitMap.freeBlock(pointers[idx]);
+        }
+    }
+}
+
diff --git a/js/formats/prodos/seedling_file.js b/js/formats/prodos/seedling_file.js
deleted file mode 100644
index 5a4d95c..0000000
--- a/js/formats/prodos/seedling_file.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-import { STORAGE_TYPES } from './constants';
-
-export function SeedlingFile (volume, fileEntry) {
-    var blocks = volume.blocks();
-    var bitMap = volume.bitMap();
-
-    return {
-        getBlockPointers() {
-            var pointers = [fileEntry.keyPointer];
-            return pointers;
-        },
-
-        read: function () {
-            var seedlingBlock = blocks[fileEntry.keyPointer];
-            var data = new Uint8Array(fileEntry.eof);
-            data.set(seedlingBlock.slice(0, fileEntry.eof));
-            return data;
-        },
-
-        write: function(data) {
-            if (fileEntry.keyPointer) {
-                this.delete();
-            }
-            fileEntry.storageType = STORAGE_TYPES.SEEDLING;
-            fileEntry.keyPointer = bitMap.allocBlock();
-            fileEntry.eof = data.byteLength;
-            var seedlingBlock = blocks[fileEntry.keyPointer];
-            seedlingBlock.set(data);
-            fileEntry.write();
-        },
-
-        delete: function() {
-            var pointers = this.getBlockPointers();
-            for (var idx; idx < pointers.length; idx++) {
-                bitMap.freeBlock(pointers[idx]);
-            }
-        }
-    };
-}
-
diff --git a/js/formats/prodos/seedling_file.ts b/js/formats/prodos/seedling_file.ts
new file mode 100644
index 0000000..8061f4a
--- /dev/null
+++ b/js/formats/prodos/seedling_file.ts
@@ -0,0 +1,48 @@
+import type { ProDOSVolume } from '.';
+import { ProDOSFile } from './base_file';
+import { BitMap } from './bit_map';
+import { STORAGE_TYPES } from './constants';
+import { FileEntry } from './file_entry';
+
+export class SeedlingFile extends ProDOSFile {
+    blocks: Uint8Array[];
+    bitMap: BitMap;
+
+    constructor(volume: ProDOSVolume, private fileEntry: FileEntry) {
+        super(volume);
+        this.blocks = volume.blocks();
+        this.bitMap = volume.bitMap();
+    }
+
+    getBlockPointers() {
+        const pointers = [this.fileEntry.keyPointer];
+        return pointers;
+    }
+
+    read() {
+        const seedlingBlock = this.blocks[this.fileEntry.keyPointer];
+        const data = new Uint8Array(this.fileEntry.eof);
+        data.set(seedlingBlock.slice(0, this.fileEntry.eof));
+        return data;
+    }
+
+    write(data: Uint8Array) {
+        if (this.fileEntry.keyPointer) {
+            this.delete();
+        }
+        this.fileEntry.storageType = STORAGE_TYPES.SEEDLING;
+        this.fileEntry.keyPointer = this.bitMap.allocBlock();
+        this.fileEntry.eof = data.byteLength;
+        const seedlingBlock = this.blocks[this.fileEntry.keyPointer];
+        seedlingBlock.set(data);
+        this.fileEntry.write();
+    }
+
+    delete() {
+        const pointers = this.getBlockPointers();
+        for (let idx = 0; idx < pointers.length; idx++) {
+            this.bitMap.freeBlock(pointers[idx]);
+        }
+    }
+}
+
diff --git a/js/formats/prodos/tree_file.js b/js/formats/prodos/tree_file.js
deleted file mode 100644
index 6f9fedc..0000000
--- a/js/formats/prodos/tree_file.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { BLOCK_SIZE, STORAGE_TYPES } from './constants';
-
-export function TreeFile (volume, fileEntry) {
-    var blocks = volume.blocks();
-    var bitMap = volume.bitMap();
-
-    return {
-        getBlockPointers() {
-            var treeBlock = blocks[fileEntry.keyPointer];
-            var saplingPointers = new DataView(treeBlock);
-            var pointers = [];
-            for (var idx = 0; idx < 256; idx++) {
-                var saplingPointer = saplingPointers.getUint16(idx * 2);
-                if (saplingPointer) {
-                    pointers.push(saplingPointer);
-                    var seedlingPointers = new DataView(blocks[saplingPointer]);
-                    for (var jdx = 0; jdx < 256; jdx++) {
-                        var seedlingPointer = seedlingPointers.getUint16(idx * 2);
-                        if (seedlingPointer) {
-                            pointers.push(seedlingPointer);
-                        }
-                    }
-                }
-            }
-            return pointers;
-        },
-
-        read: function() {
-            var treeBlock = blocks[fileEntry.keyPointer];
-            var saplingPointers = new DataView(treeBlock);
-            var remainingLength = fileEntry.eof;
-            var data = new Uint8Array(remainingLength);
-            var offset = 0;
-            var idx = 0;
-
-            while (remainingLength > 0) {
-                var saplingPointer = saplingPointers.getUint16(idx * 2, true);
-                var jdx = 0;
-                if (saplingPointer) {
-                    var saplingBlock = blocks[saplingPointer];
-                    var seedlingPointers = new DataView(saplingBlock);
-
-                    while (jdx < 256 && remainingLength > 0) {
-                        var seedlingPointer = seedlingPointers.getUint16(idx * 2, true);
-                        if (seedlingPointer) {
-                            var seedlingBlock = blocks[seedlingPointer];
-                            var bytes = seedlingBlock.slice(Math.min(BLOCK_SIZE, remainingLength));
-
-                            data.set(bytes, offset);
-                        }
-                        jdx++;
-                        offset += BLOCK_SIZE;
-                        remainingLength -= BLOCK_SIZE;
-                    }
-                } else {
-                    offset += BLOCK_SIZE * 256;
-                    remainingLength -= BLOCK_SIZE * 256;
-                }
-                idx++;
-            }
-            return data;
-        },
-
-        write: function(data) {
-            fileEntry.storageType = STORAGE_TYPES.TREE;
-            fileEntry.keyPointer = bitMap.allocBlock();
-            fileEntry.eof = data.byteLength;
-
-            var treeBlock = blocks[fileEntry.keyPointer];
-            var saplingPointers = new DataView(treeBlock);
-
-            var remainingLength = fileEntry.eof;
-            var offset = 0;
-            var idx = 0;
-
-            while (remainingLength > 0) {
-                var saplingPointer = bitMap.allocBlock();
-                var saplingBlock = blocks[saplingPointer];
-                saplingPointers.setUint16(idx * 2, saplingPointer, true);
-                var seedlingPointers = new DataView(saplingBlock);
-
-                var jdx = 0;
-
-                while (jdx < 256 && remainingLength > 0) {
-                    var seedlingPointer = bitMap.allocBlock();
-                    seedlingPointers.setUint16(idx * 2, seedlingPointer, true);
-                    var seedlingBlock = blocks[seedlingPointer];
-                    seedlingBlock.set(data.slice(offset, Math.min(BLOCK_SIZE, remainingLength)));
-                    jdx++;
-                    offset += BLOCK_SIZE;
-                    remainingLength -= BLOCK_SIZE;
-                }
-                idx++;
-            }
-            fileEntry.write();
-        },
-
-        delete: function() {
-            var pointers = this.getBlockPointers();
-            for (var idx; idx < pointers.length; idx++) {
-                bitMap.freeBlock(pointers[idx]);
-            }
-        }
-    };
-}
diff --git a/js/formats/prodos/tree_file.ts b/js/formats/prodos/tree_file.ts
new file mode 100644
index 0000000..78880c7
--- /dev/null
+++ b/js/formats/prodos/tree_file.ts
@@ -0,0 +1,125 @@
+import type { ProDOSVolume } from '.';
+import { ProDOSFile } from './base_file';
+import { BitMap } from './bit_map';
+import { BLOCK_SIZE, STORAGE_TYPES } from './constants';
+import type { FileEntry } from './file_entry';
+
+export class TreeFile extends ProDOSFile {
+    private bitMap: BitMap;
+    private blocks: Uint8Array[];
+
+    constructor(volume: ProDOSVolume, private fileEntry: FileEntry) {
+        super(volume);
+        this.blocks = volume.blocks();
+        this.bitMap = volume.bitMap();
+    }
+
+    getBlockPointers() {
+        const treeBlock = this.blocks[this.fileEntry.keyPointer];
+        const saplingPointers = new DataView(treeBlock);
+        const pointers = [];
+        for (let idx = 0; idx < 256; idx++) {
+            const saplingPointer =
+                saplingPointers.getUint8(idx) |
+                (saplingPointers.getUint8(0x100 + idx) << 8);
+            if (saplingPointer) {
+                pointers.push(saplingPointer);
+                const seedlingPointers = new DataView(this.blocks[saplingPointer]);
+                for (let jdx = 0; jdx < 256; jdx++) {
+                    const seedlingPointer =
+                        seedlingPointers.getUint8(idx) |
+                        (seedlingPointers.getUint8(0x100 + idx) << 8);
+                    if (seedlingPointer) {
+                        pointers.push(seedlingPointer);
+                    }
+                }
+            }
+        }
+        return pointers;
+    }
+
+    // TODO(whscullin): Why did I not use getBlockPointers for these...
+    read() {
+        const treeBlock = this.blocks[this.fileEntry.keyPointer];
+        const saplingPointers = new DataView(treeBlock);
+        let remainingLength = this.fileEntry.eof;
+        const data = new Uint8Array(remainingLength);
+        let offset = 0;
+        let idx = 0;
+
+        while (remainingLength > 0) {
+            const saplingPointer =
+                saplingPointers.getUint8(idx) |
+                (saplingPointers.getUint8(0x100 + idx) << 8);
+            let jdx = 0;
+            if (saplingPointer) {
+                const saplingBlock = this.blocks[saplingPointer];
+                const seedlingPointers = new DataView(saplingBlock);
+
+                while (jdx < 256 && remainingLength > 0) {
+                    const seedlingPointer =
+                        seedlingPointers.getUint8(idx) |
+                        (seedlingPointers.getUint8(0x100 + idx) << 8);
+                    if (seedlingPointer) {
+                        const seedlingBlock = this.blocks[seedlingPointer];
+                        const bytes = seedlingBlock.slice(Math.min(BLOCK_SIZE, remainingLength));
+
+                        data.set(bytes, offset);
+                    }
+                    jdx++;
+                    offset += BLOCK_SIZE;
+                    remainingLength -= BLOCK_SIZE;
+                }
+            } else {
+                offset += BLOCK_SIZE * 256;
+                remainingLength -= BLOCK_SIZE * 256;
+            }
+            idx++;
+        }
+        return data;
+    }
+
+    write(data: Uint8Array) {
+        this.fileEntry.storageType = STORAGE_TYPES.TREE;
+        this.fileEntry.keyPointer = this.bitMap.allocBlock();
+        this.fileEntry.eof = data.byteLength;
+
+        const treeBlock = this.blocks[this.fileEntry.keyPointer];
+        const saplingPointers = new DataView(treeBlock);
+
+        let remainingLength = this.fileEntry.eof;
+        let offset = 0;
+        let idx = 0;
+
+        while (remainingLength > 0) {
+            const saplingPointer = this.bitMap.allocBlock();
+            const saplingBlock = this.blocks[saplingPointer];
+            saplingPointers.setUint8(idx, saplingPointer & 0xff);
+            saplingPointers.setUint8(0x100 + idx, saplingPointer >> 8);
+            const seedlingPointers = new DataView(saplingBlock);
+
+            let jdx = 0;
+
+            while (jdx < 256 && remainingLength > 0) {
+                const seedlingPointer = this.bitMap.allocBlock();
+                seedlingPointers.setUint8(idx, seedlingPointer & 0xff);
+                seedlingPointers.setUint8(0x100 + idx, seedlingPointer >> 8);
+                const seedlingBlock = this.blocks[seedlingPointer];
+                seedlingBlock.set(data.slice(offset, Math.min(BLOCK_SIZE, remainingLength)));
+                jdx++;
+                offset += BLOCK_SIZE;
+                remainingLength -= BLOCK_SIZE;
+            }
+            idx++;
+        }
+        this.fileEntry.write();
+    }
+
+    delete() {
+        const pointers = this.getBlockPointers();
+        for (let idx = 0; idx < pointers.length; idx++) {
+            this.bitMap.freeBlock(pointers[idx]);
+        }
+    }
+}
+
diff --git a/js/formats/prodos/types.ts b/js/formats/prodos/types.ts
new file mode 100644
index 0000000..e69de29
diff --git a/js/formats/prodos/utils.js b/js/formats/prodos/utils.js
deleted file mode 100644
index 9dd1588..0000000
--- a/js/formats/prodos/utils.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { debug } from '../../util';
-import { STORAGE_TYPES } from './constants';
-import { Directory } from './directory';
-
-export function uint32ToDate(val) {
-    // yyyyyyy m|mmmm ddddd|000hhhhh|00mmmmmm
-
-    if (val) {
-        var yearMonthDay = val & 0xffff;
-        var hourMinute = val >> 16;
-
-        var year = yearMonthDay >> 9;
-        var month = (yearMonthDay & 0x01E0) >> 5;
-        var day = yearMonthDay & 0x001F;
-
-        var hour = hourMinute >> 8;
-        var min = hourMinute & 0xff;
-
-        return new Date(1900 + year, month - 1, day, hour, min);
-    }
-    return null;
-}
-
-export function dateToUint32(date) {
-    // yyyyyyy m|mmmm ddddd|000hhhhh|00mmmmmm
-
-    var val = 0;
-
-    if (date) {
-        var year = date.getYear() - 1900;
-        var month = date.getMonth() + 1;
-        var day = date.getDate();
-
-        var hour = date.getHour();
-        var min = date.getMinute();
-
-        var yearMonthDay = year << 9 | month << 5 | day;
-        var hourMinute = hour << 8 | min;
-        val = hourMinute << 16 | yearMonthDay;
-    }
-
-    return val;
-}
-
-export function readFileName(block, offset, nameLength, caseBits) {
-    var name = '';
-    if (!(caseBits & 0x8000)) {
-        caseBits = 0;
-    }
-    for (var idx = 0; idx < nameLength; idx++) {
-        caseBits <<= 1;
-        var char = String.fromCharCode(block.getUint8(offset + idx));
-        name += caseBits & 0x8000 ? char.toLowerCase() : char;
-    }
-    return name;
-}
-
-export function writeFileName(block, offset, name) {
-    var caseBits = 0;
-    for (var idx = 0; idx < name.length; idx++) {
-        caseBits <<= 1;
-        var charCode = name.charCodeAt(idx);
-        if (charCode > 0x60 && charCode < 0x7B) {
-            caseBits |= 0x1;
-            charCode -= 0x20;
-        }
-        block.setUint8(offset + idx, charCode);
-    }
-    return caseBits;
-}
-
-export function dumpDirectory(volume, dirEntry, depth) {
-    var dir = new Directory(volume, dirEntry);
-    dir.read();
-
-    for (var idx = 0; idx < dir.entries.length; idx++) {
-        var fileEntry = dir.entries[idx];
-        if (fileEntry.storageType !== STORAGE_TYPES.DELETED) {
-            debug(depth, fileEntry.name);
-            if (fileEntry.storageType === STORAGE_TYPES.DIRECTORY) {
-                dumpDirectory(volume, fileEntry, depth + '  ');
-            }
-        }
-    }
-}
-
-export function dump(volume) {
-    var vdh = volume.vdh();
-    debug(vdh.name);
-    for (var idx = 0; idx < vdh.entries.length; idx++) {
-        var fileEntry = vdh.entries[idx];
-        debug(fileEntry.name);
-        if (fileEntry.storageType === STORAGE_TYPES.DIRECTORY) {
-            dumpDirectory(volume, fileEntry, '  ');
-        }
-    }
-}
diff --git a/js/formats/prodos/utils.ts b/js/formats/prodos/utils.ts
new file mode 100644
index 0000000..b5274ed
--- /dev/null
+++ b/js/formats/prodos/utils.ts
@@ -0,0 +1,105 @@
+import { STORAGE_TYPES } from './constants';
+import { Directory } from './directory';
+import type { byte, word } from 'js/types';
+import { ProDOSVolume } from '.';
+import { FileEntry } from './file_entry';
+
+export function uint32ToDate(val: word) {
+    // yyyyyyy m|mmmm ddddd|000hhhhh|00mmmmmm
+
+    if (val) {
+        const yearMonthDay = val & 0xffff;
+        const hourMinute = val >> 16;
+
+        const year = yearMonthDay >> 9;
+        const month = (yearMonthDay & 0x01E0) >> 5;
+        const day = yearMonthDay & 0x001F;
+
+        const hour = hourMinute >> 8;
+        const min = hourMinute & 0xff;
+
+        return new Date(year < 70 ? 2000 + year : 1900 + year, month - 1, day, hour, min);
+    }
+    return new Date(0);
+}
+
+export function dateToUint32(date: Date) {
+    // yyyyyyy m|mmmm ddddd|000hhhhh|00mmmmmm
+
+    let val = 0;
+
+    if (date) {
+        const year = date.getFullYear() - 1900;
+        const month = date.getMonth() + 1;
+        const day = date.getDate();
+
+        const hour = date.getHours();
+        const min = date.getMinutes();
+
+        const yearMonthDay = year << 9 | month << 5 | day;
+        const hourMinute = hour << 8 | min;
+        val = hourMinute << 16 | yearMonthDay;
+    }
+
+    return val;
+}
+
+export function readFileName(block: DataView, offset: word, nameLength: byte, caseBits: word) {
+    let name = '';
+    if (!(caseBits & 0x8000)) {
+        caseBits = 0;
+    }
+    // File is deleted, brute force old name
+    if (nameLength === 0) {
+        nameLength = 15;
+    }
+    for (let idx = 0; idx < nameLength; idx++) {
+        caseBits <<= 1;
+        const char = String.fromCharCode(block.getUint8(offset + idx) & 0x7f);
+        name += caseBits & 0x8000 ? char.toLowerCase() : char;
+    }
+    return name;
+}
+
+export function writeFileName(block: DataView, offset: word, name: string) {
+    let caseBits = 0;
+    for (let idx = 0; idx < name.length; idx++) {
+        caseBits <<= 1;
+        let charCode = name.charCodeAt(idx);
+        if (charCode > 0x60 && charCode < 0x7B) {
+            caseBits |= 0x1;
+            charCode -= 0x20;
+        }
+        block.setUint8(offset + idx, charCode);
+    }
+    return caseBits;
+}
+
+export function dumpDirectory(volume: ProDOSVolume, dirEntry: FileEntry, depth: string) {
+    const dir = new Directory(volume, dirEntry);
+    let str = '';
+
+    for (let idx = 0; idx < dir.entries.length; idx++) {
+        const fileEntry = dir.entries[idx];
+        if (fileEntry.storageType !== STORAGE_TYPES.DELETED) {
+            str += depth + fileEntry.name + '\n';
+            if (fileEntry.storageType === STORAGE_TYPES.DIRECTORY) {
+                str += dumpDirectory(volume, fileEntry, depth + '  ');
+            }
+        }
+    }
+    return str;
+}
+
+export function dump(volume: ProDOSVolume) {
+    const vdh = volume.vdh();
+    let str = vdh.name;
+    for (let idx = 0; idx < vdh.entries.length; idx++) {
+        const fileEntry = vdh.entries[idx];
+        str += fileEntry.name + '\n';
+        if (fileEntry.storageType === STORAGE_TYPES.DIRECTORY) {
+            str += dumpDirectory(volume, fileEntry, '  ');
+        }
+    }
+    return str;
+}
diff --git a/js/formats/prodos/vdh.js b/js/formats/prodos/vdh.js
deleted file mode 100644
index 86bbbac..0000000
--- a/js/formats/prodos/vdh.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { dateToUint32, readFileName, writeFileName, uint32ToDate } from './utils';
-import { readEntries, writeEntries } from './file_entry';
-import { STORAGE_TYPES, ACCESS_TYPES } from './constants';
-
-export function VDH(volume) {
-    var blocks = volume.blocks();
-
-    var VDH_BLOCK = 2;
-    var VDH_OFFSETS = {
-        PREV: 0x00,
-        NEXT: 0x02,
-        STORAGE_TYPE: 0x04,
-        NAME_LENGTH: 0x04,
-        VOLUME_NAME: 0x05,
-        RESERVED_1: 0x14,
-        CASE_BITS: 0x1A,
-        CREATION: 0x1C,
-        VERSION: 0x20,
-        MIN_VERSION: 0x21,
-        ACCESS: 0x22,
-        ENTRY_LENGTH: 0x23,
-        ENTRIES_PER_BLOCK: 0x24,
-        FILE_COUNT: 0x25,
-        BIT_MAP_POINTER: 0x27,
-        TOTAL_BLOCKS: 0x29,
-    };
-
-    return {
-        prev: 0,
-        next: 0,
-        storageType: STORAGE_TYPES.VDH_HEADER,
-        name: '',
-        creation: new Date(),
-        access: ACCESS_TYPES.ALL,
-        entryLength: 0x27,
-        entriesPerBlock: 23,
-        fileCount: 0,
-        bitMapPointer: 0,
-        totalBlocks: 0,
-        entries: [],
-
-        read: function () {
-            var block = new DataView(blocks[VDH_BLOCK].buffer);
-
-            this.next = block.getUint16(VDH_OFFSETS.NEXT, true);
-            this.storageType = block.getUint8(VDH_OFFSETS.STORAGE_TYPE) >> 4;
-            var nameLength = block.getUint8(VDH_OFFSETS.NAME_LENGTH) & 0xF;
-            var caseBits = block.getUint8(VDH_OFFSETS.CASE_BITS);
-            this.name = readFileName(block, VDH_OFFSETS.VOLUME_NAME, nameLength, caseBits);
-            this.creation = uint32ToDate(block.getUint32(VDH_OFFSETS.CREATION, true));
-            this.access = block.getUint8(VDH_OFFSETS.ACCESS);
-            this.entryLength = block.getUint8(VDH_OFFSETS.ENTRY_LENGTH);
-            this.entriesPerBlock = block.getUint8(VDH_OFFSETS.ENTRIES_PER_BLOCK);
-            this.fileCount = block.getUint16(VDH_OFFSETS.FILE_COUNT, true);
-            this.bitMapPointer = block.getUint16(VDH_OFFSETS.BIT_MAP_POINTER, true);
-            this.totalBlocks = block.getUint16(VDH_OFFSETS.TOTAL_BLOCKS, true);
-
-            this.entries = readEntries(volume, block, this);
-        },
-
-        write: function() {
-            var block = new DataView(blocks[VDH_BLOCK].buffer);
-
-            var nameLength = name.length & 0x0f;
-            block.setUint8(VDH_OFFSETS.STORAGE_TYPE, this.storageType << 4 & nameLength);
-            var caseBits = writeFileName(block, VDH_OFFSETS.FILE_NAME, this.name);
-            block.setUint32(VDH_OFFSETS.CREATION, dateToUint32(this.creation), true);
-            block.setUint16(VDH_OFFSETS.CASE_BITS, caseBits);
-            block.setUint8(VDH_OFFSETS.ACCESS, this.access);
-            block.setUint8(VDH_OFFSETS.ENTRY_LENGTH, this.entryLength);
-            block.setUint8(VDH_OFFSETS.ENTRIES_PER_BLOCK, this.entriesPerBlock);
-            block.setUint16(VDH_OFFSETS.FILE_COUNT, this.fileCount, true);
-            block.setUint16(VDH_OFFSETS.BIT_MAP_POINTER, this.bitMapPointer, true);
-            block.setUint16(VDH_OFFSETS.TOTAL_BLOCKS, this.totalBlocks, true);
-
-            writeEntries(blocks, block, this);
-        }
-
-    };
-}
diff --git a/js/formats/prodos/vdh.ts b/js/formats/prodos/vdh.ts
new file mode 100644
index 0000000..d53776c
--- /dev/null
+++ b/js/formats/prodos/vdh.ts
@@ -0,0 +1,84 @@
+import { dateToUint32, readFileName, writeFileName, uint32ToDate } from './utils';
+import { FileEntry, readEntries, writeEntries } from './file_entry';
+import { STORAGE_TYPES, ACCESS_TYPES } from './constants';
+import { byte, word } from 'js/types';
+import { ProDOSVolume } from '.';
+
+const VDH_BLOCK = 2;
+const VDH_OFFSETS = {
+    PREV: 0x00,
+    NEXT: 0x02,
+    STORAGE_TYPE: 0x04,
+    NAME_LENGTH: 0x04,
+    VOLUME_NAME: 0x05,
+    RESERVED_1: 0x14,
+    CASE_BITS: 0x1A,
+    CREATION: 0x1C,
+    VERSION: 0x20,
+    MIN_VERSION: 0x21,
+    ACCESS: 0x22,
+    ENTRY_LENGTH: 0x23,
+    ENTRIES_PER_BLOCK: 0x24,
+    FILE_COUNT: 0x25,
+    BIT_MAP_POINTER: 0x27,
+    TOTAL_BLOCKS: 0x29,
+} as const;
+
+export class VDH {
+    private blocks: Uint8Array[];
+
+    prev: word = 0;
+    next: word = 0;
+    storageType: byte = STORAGE_TYPES.VDH_HEADER;
+    name: string = '';
+    creation: Date = new Date();
+    access: byte = ACCESS_TYPES.ALL;
+    entryLength = 0x27;
+    entriesPerBlock = 23;
+    fileCount = 0;
+    bitMapPointer: word = 0;
+    totalBlocks: word = 0;
+    entries: FileEntry[] = [];
+
+    constructor(private volume: ProDOSVolume) {
+        this.blocks = this.volume.blocks();
+    }
+
+
+    read() {
+        const block = new DataView(this.blocks[VDH_BLOCK].buffer);
+
+        this.next = block.getUint16(VDH_OFFSETS.NEXT, true);
+        this.storageType = block.getUint8(VDH_OFFSETS.STORAGE_TYPE) >> 4;
+        const nameLength = block.getUint8(VDH_OFFSETS.NAME_LENGTH) & 0xF;
+        const caseBits = block.getUint8(VDH_OFFSETS.CASE_BITS);
+        this.name = readFileName(block, VDH_OFFSETS.VOLUME_NAME, nameLength, caseBits);
+        this.creation = uint32ToDate(block.getUint32(VDH_OFFSETS.CREATION, true));
+        this.access = block.getUint8(VDH_OFFSETS.ACCESS);
+        this.entryLength = block.getUint8(VDH_OFFSETS.ENTRY_LENGTH);
+        this.entriesPerBlock = block.getUint8(VDH_OFFSETS.ENTRIES_PER_BLOCK);
+        this.fileCount = block.getUint16(VDH_OFFSETS.FILE_COUNT, true);
+        this.bitMapPointer = block.getUint16(VDH_OFFSETS.BIT_MAP_POINTER, true);
+        this.totalBlocks = block.getUint16(VDH_OFFSETS.TOTAL_BLOCKS, true);
+
+        this.entries = readEntries(this.volume, block, this);
+    }
+
+    write() {
+        const block = new DataView(this.blocks[VDH_BLOCK].buffer);
+
+        const nameLength = this.name.length & 0x0f;
+        block.setUint8(VDH_OFFSETS.STORAGE_TYPE, this.storageType << 4 & nameLength);
+        const caseBits = writeFileName(block, VDH_OFFSETS.VOLUME_NAME, this.name);
+        block.setUint32(VDH_OFFSETS.CREATION, dateToUint32(this.creation), true);
+        block.setUint16(VDH_OFFSETS.CASE_BITS, caseBits);
+        block.setUint8(VDH_OFFSETS.ACCESS, this.access);
+        block.setUint8(VDH_OFFSETS.ENTRY_LENGTH, this.entryLength);
+        block.setUint8(VDH_OFFSETS.ENTRIES_PER_BLOCK, this.entriesPerBlock);
+        block.setUint16(VDH_OFFSETS.FILE_COUNT, this.fileCount, true);
+        block.setUint16(VDH_OFFSETS.BIT_MAP_POINTER, this.bitMapPointer, true);
+        block.setUint16(VDH_OFFSETS.TOTAL_BLOCKS, this.totalBlocks, true);
+
+        writeEntries(this.volume, block, this);
+    }
+}
diff --git a/js/formats/types.ts b/js/formats/types.ts
index efd8408..a3553b9 100644
--- a/js/formats/types.ts
+++ b/js/formats/types.ts
@@ -1,16 +1,9 @@
-/* Copyright 2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import type { byte, memory, MemberOf } from '../types';
+import type { byte, memory, MemberOf, word } from '../types';
 import type { GamepadConfiguration } from '../ui/types';
+import { InfoChunk } from './woz';
+
+export const SUPPORTED_SECTORS = [13, 16] as const;
+export type SupportedSectors = MemberOf<typeof SUPPORTED_SECTORS>;
 
 export const DRIVE_NUMBERS = [1, 2] as const;
 export type DriveNumber = MemberOf<typeof DRIVE_NUMBERS>;
@@ -18,58 +11,96 @@ export type DriveNumber = MemberOf<typeof DRIVE_NUMBERS>;
 /**
  * Arguments for the disk format processors.
  */
-
 export interface DiskOptions {
-    name: string
-    side?: string
-    volume: byte
-    readOnly: boolean
-    data?: memory[][]
-    rawData?: ArrayBuffer
-    blockVolume?: boolean
+    name: string;
+    side?: string | undefined;
+    volume: byte;
+    readOnly: boolean;
+    data?: memory[][];
+    rawData?: ArrayBuffer;
+    blockVolume?: boolean;
+}
+
+/**
+ * JSON file entry format
+ */
+export interface DiskDescriptor {
+    name: string;
+    disk?: number;
+    filename: string;
+    e?: boolean;
+    category: string;
+}
+
+/**
+ * JSON binary image (not used?)
+ */
+export interface JSONBinaryImage {
+    type: 'binary';
+    start: word;
+    length: word;
+    data: byte[];
+    gamepad?: GamepadConfiguration;
+}
+
+/**
+ * Information about a disk image not directly related to the
+ * disk contents. For example, the name or even a scan of the
+ * disk label are "metadata", but the volume number is not.
+ */
+export interface DiskMetadata {
+    /** Displayed disk name */
+    name: string;
+    /** (Optional) Disk side (Front/Back, A/B) */
+    side?: string | undefined;
 }
 
 /**
  * Return value from disk format processors. Describes raw disk
  * data which the DiskII card can process.
  */
-
 export interface Disk {
-    name: string
-    side?: string
-    readOnly: boolean
+    metadata: DiskMetadata;
+    readOnly: boolean;
 }
 
+export const NO_DISK = 'empty';
 export const ENCODING_NIBBLE = 'nibble';
 export const ENCODING_BITSTREAM = 'bitstream';
 export const ENCODING_BLOCK = 'block';
 
 export interface FloppyDisk extends Disk {
-    tracks: memory[]
+    encoding: typeof ENCODING_NIBBLE | typeof ENCODING_BITSTREAM | typeof NO_DISK;
+}
+
+export interface NoFloppyDisk extends FloppyDisk {
+    encoding: typeof NO_DISK;
 }
 
 export interface NibbleDisk extends FloppyDisk {
-    encoding: typeof ENCODING_NIBBLE
-    format: DiskFormat
-    volume: byte
+    encoding: typeof ENCODING_NIBBLE;
+    format: Exclude<NibbleFormat, 'woz'>;
+    volume: byte;
+    tracks: memory[];
 }
 
 export interface WozDisk extends FloppyDisk {
-    encoding: typeof ENCODING_BITSTREAM
-    trackMap: number[]
-    rawTracks: Uint8Array[]
+    encoding: typeof ENCODING_BITSTREAM;
+    format: 'woz';
+    trackMap: number[];
+    rawTracks: Uint8Array[];
+    info: InfoChunk | undefined;
 }
 
 export interface BlockDisk extends Disk {
-    encoding: typeof ENCODING_BLOCK
-    blocks: Uint8Array[]
+    encoding: typeof ENCODING_BLOCK;
+    format: BlockFormat;
+    blocks: Uint8Array[];
 }
 
 /**
- * File types supported by the disk format processors and
- * block devices.
+ * File types supported by floppy devices in nibble mode.
  */
-
 export const NIBBLE_FORMATS = [
     '2mg',
     'd13',
@@ -77,33 +108,82 @@ export const NIBBLE_FORMATS = [
     'dsk',
     'po',
     'nib',
-    'woz'
 ] as const;
 
+/**
+ * File types supported by floppy devices in bitstream mode.
+ */
+export const BITSTREAM_FORMATS = [
+    'woz',
+] as const;
+
+/**
+ * All file types supported by floppy devices.
+ */
+export const FLOPPY_FORMATS = [
+    ...NIBBLE_FORMATS,
+    ...BITSTREAM_FORMATS,
+] as const;
+
+/**
+ * File types supported by block devices.
+ */
 export const BLOCK_FORMATS = [
     '2mg',
     'hdv',
     'po',
 ] as const;
 
-export const DISK_FORMATS = [...NIBBLE_FORMATS, ...BLOCK_FORMATS ] as const;
+/**
+ * All supported disk formats.
+ */
+export const DISK_FORMATS = [
+    ...FLOPPY_FORMATS,
+    ...BLOCK_FORMATS,
+] as const;
 
+export type FloppyFormat = MemberOf<typeof FLOPPY_FORMATS>;
 export type NibbleFormat = MemberOf<typeof NIBBLE_FORMATS>;
+export type BitstreamFormat = 'woz';
 export type BlockFormat = MemberOf<typeof BLOCK_FORMATS>;
 export type DiskFormat = MemberOf<typeof DISK_FORMATS>;
 
+/** Type guard for nibble disk formats. */
+export function isNibbleDiskFormat(f: DiskFormat): f is NibbleFormat {
+    return f in NIBBLE_FORMATS;
+}
+
+/** Type guard for block disk formats. */
+export function isBlockDiskFormat(f: DiskFormat): f is BlockFormat {
+    return f in BLOCK_FORMATS;
+}
+
+export function isNoFloppyDisk(disk: Disk): disk is NoFloppyDisk {
+    return (disk as NoFloppyDisk)?.encoding === NO_DISK;
+}
+
+/** Type guard for NibbleDisks */
+export function isNibbleDisk(disk: Disk): disk is NibbleDisk {
+    return (disk as NibbleDisk)?.encoding === ENCODING_NIBBLE;
+}
+
+/** Type guard for NibbleDisks */
+export function isWozDisk(disk: Disk): disk is WozDisk {
+    return (disk as WozDisk)?.encoding === ENCODING_BITSTREAM;
+}
+
 /**
  * Base format for JSON defined disks
  */
 
 export class JSONDiskBase {
-    type: DiskFormat
-    name: string
-    disk?: string
-    category?: string
-    volume?: byte
-    readOnly?: boolean
-    gamepad?: GamepadConfiguration
+    type: DiskFormat;
+    name: string;
+    disk?: string;
+    category?: string;
+    volume?: byte;
+    readOnly?: boolean;
+    gamepad?: GamepadConfiguration;
 }
 
 /**
@@ -111,9 +191,9 @@ export class JSONDiskBase {
  */
 
 export interface Base64JSONDisk extends JSONDiskBase {
-    type: Exclude<DiskFormat, 'nib'>
-    encoding: 'base64'
-    data: string[][]
+    type: Exclude<DiskFormat, 'nib'>;
+    encoding: 'base64';
+    data: string[][];
 }
 
 /**
@@ -121,9 +201,9 @@ export interface Base64JSONDisk extends JSONDiskBase {
  */
 
 export interface Base64JSONNibbleDisk extends JSONDiskBase {
-    type: 'nib'
-    encoding: 'base64'
-    data: string[]
+    type: 'nib';
+    encoding: 'base64';
+    data: string[];
 }
 
 /**
@@ -131,9 +211,9 @@ export interface Base64JSONNibbleDisk extends JSONDiskBase {
  */
 
 export interface BinaryJSONDisk extends JSONDiskBase {
-    type: DiskFormat
-    encoding: 'binary'
-    data: memory[][]
+    type: DiskFormat;
+    encoding: 'binary';
+    data: memory[][];
 }
 
 /**
@@ -152,30 +232,30 @@ export const PROCESS_JSON = 'PROCESS_JSON';
 
 /** Binary disk file message */
 export interface ProcessBinaryMessage {
-    type: typeof PROCESS_BINARY
+    type: typeof PROCESS_BINARY;
     payload: {
-        drive: DriveNumber
-        fmt: NibbleFormat
-        options: DiskOptions
-    }
+        drive: DriveNumber;
+        fmt: FloppyFormat;
+        options: DiskOptions;
+    };
 }
 
 /** Processed JSON file message (used for localStorage) */
 export interface ProcessJsonDiskMessage {
-    type: typeof PROCESS_JSON_DISK
+    type: typeof PROCESS_JSON_DISK;
     payload: {
-        drive: DriveNumber
-        jsonDisk: JSONDisk
-    }
+        drive: DriveNumber;
+        jsonDisk: JSONDisk;
+    };
 }
 
 /** Raw JSON file message */
 export interface ProcessJsonMessage {
-    type: typeof PROCESS_JSON
+    type: typeof PROCESS_JSON;
     payload: {
-        drive: DriveNumber
-        json: string
-    }
+        drive: DriveNumber;
+        json: string;
+    };
 }
 
 export type FormatWorkerMessage =
@@ -190,19 +270,28 @@ export type FormatWorkerMessage =
 export const DISK_PROCESSED = 'DISK_PROCESSED';
 
 export interface DiskProcessedResponse {
-    type: typeof DISK_PROCESSED
+    type: typeof DISK_PROCESSED;
     payload: {
-        drive: DriveNumber
-        disk: Disk | null
-    }
+        drive: DriveNumber;
+        disk: FloppyDisk | null;
+    };
 }
 
 export type FormatWorkerResponse =
-    DiskProcessedResponse
+    DiskProcessedResponse;
+
+export interface MassStorageData {
+    metadata: DiskMetadata;
+    ext: DiskFormat;
+    readOnly: boolean;
+    volume?: byte;
+    data: ArrayBuffer;
+}
 
 /**
  * Block device common interface
  */
-export interface MassStorage {
-    setBinary(drive: number, name: string, ext: BlockFormat, data: ArrayBuffer): boolean
+export interface MassStorage<T> {
+    setBinary(drive: number, name: string, ext: T, data: ArrayBuffer): boolean;
+    getBinary(drive: number, ext?: T): MassStorageData | null;
 }
diff --git a/js/formats/woz.ts b/js/formats/woz.ts
index a713fe9..5160cae 100644
--- a/js/formats/woz.ts
+++ b/js/formats/woz.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { debug, toHex } from '../util';
 import { bit, byte, word } from '../types';
 import { grabNibble } from './format_utils';
@@ -30,29 +19,29 @@ const WOZ_INTEGRITY_CHECK = 0x0a0d0aff;
  * @returns ASCII string
  */
 function stringFromBytes(data: DataView, start: number, end: number): string {
-    return String.fromCharCode.apply(
-        null,
-        new Uint8Array(data.buffer.slice(data.byteOffset + start, data.byteOffset + end))
+    const byteArray = new Uint8Array(
+        data.buffer.slice(data.byteOffset + start, data.byteOffset + end)
     );
+    return String.fromCharCode(...byteArray);
 }
 
 export class InfoChunk {
-    version: byte
+    version: byte;
 
     // Version 1
-    diskType: byte
-    writeProtected: byte
-    synchronized: byte
-    cleaned: byte
-    creator: string
+    diskType: byte;
+    writeProtected: byte;
+    synchronized: byte;
+    cleaned: byte;
+    creator: string;
 
     // Version 2
-    sides: byte = 0
-    bootSector: byte = 0
-    bitTiming: byte = 0
-    compatibleHardware: word = 0
-    requiredRAM: word = 0
-    largestTrack: word = 0
+    sides: byte = 0;
+    bootSector: byte = 0;
+    bitTiming: byte = 0;
+    compatibleHardware: word = 0;
+    requiredRAM: word = 0;
+    largestTrack: word = 0;
 
     constructor(data: DataView) {
         this.version = data.getUint8(0);
@@ -74,7 +63,7 @@ export class InfoChunk {
 }
 
 export class TMapChunk {
-    trackMap: byte[]
+    trackMap: byte[];
 
     constructor(data: DataView) {
         this.trackMap = [];
@@ -89,8 +78,8 @@ const WOZ_TRACK_SIZE = 6656;
 const WOZ_TRACK_INFO_BITS = 6648;
 
 export class TrksChunk {
-    rawTracks: Uint8Array[]
-    tracks: Uint8Array[]
+    rawTracks: Uint8Array[];
+    tracks: Uint8Array[];
 }
 
 export class TrksChunk1 extends TrksChunk {
@@ -129,13 +118,13 @@ export class TrksChunk1 extends TrksChunk {
 }
 
 export interface Trk {
-    startBlock: word
-    blockCount: word
-    bitCount: number
+    startBlock: word;
+    blockCount: word;
+    bitCount: number;
 }
 
 export class TrksChunk2 extends TrksChunk {
-    trks: Trk[]
+    trks: Trk[];
 
     constructor (data: DataView) {
         super();
@@ -166,6 +155,9 @@ export class TrksChunk2 extends TrksChunk {
             const end = start + trk.blockCount * 512;
             const slice = bits.slice(start, end);
             const trackData = new Uint8Array(slice);
+            if (trackNo === 0) {
+                // debug(`First bytes: ${toHex(trackData[0])} ${toHex(trackData[1])} ${toHex(trackData[2])} ${toHex(trackData[3])}`);
+            }
             for (let jdx = 0; jdx < trk.bitCount; jdx++) {
                 const byteIndex = jdx >> 3;
                 const bitIndex = 7 - (jdx & 0x07);
@@ -188,7 +180,7 @@ export class TrksChunk2 extends TrksChunk {
 }
 
 export class MetaChunk  {
-    values: Record<string, string>
+    values: Record<string, string>;
 
     constructor (data: DataView) {
         const infoStr = stringFromBytes(data, 0, data.byteLength);
@@ -202,11 +194,11 @@ export class MetaChunk  {
 }
 
 interface Chunks {
-    [key: string]: any
-    info?: InfoChunk
-    tmap?: TMapChunk
-    trks?: TrksChunk
-    meta?: MetaChunk
+    [key: string]: unknown;
+    info?: InfoChunk;
+    tmap?: TMapChunk;
+    trks?: TrksChunk;
+    meta?: MetaChunk;
 }
 
 /**
@@ -295,18 +287,21 @@ export default function createDiskFromWoz(options: DiskOptions): WozDisk {
         debug('Invalid woz header');
     }
 
-    debug(chunks);
+    // debug(chunks);
 
-    const { meta, tmap, trks } = chunks;
+    const { meta, tmap, trks, info } = chunks;
 
     const disk: WozDisk = {
         encoding: ENCODING_BITSTREAM,
+        format: 'woz',
         trackMap: tmap?.trackMap || [],
-        tracks: trks?.tracks || [],
         rawTracks: trks?.rawTracks || [],
         readOnly: true, //chunks.info.writeProtected === 1;
-        name: meta?.values['title'] || options.name,
-        side: meta?.values['side_name'] || meta?.values['side'],
+        metadata: {
+            name: meta?.values['title'] || options.name,
+            side: meta?.values['side_name'] || meta?.values['side']
+        },
+        info
     };
 
     return disk;
diff --git a/js/gl.ts b/js/gl.ts
index 9ace807..09d0edc 100644
--- a/js/gl.ts
+++ b/js/gl.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { byte, Color, memory, MemoryPages, rom } from './types';
 import { allocMemPages } from './util';
 
@@ -51,7 +40,7 @@ export class LoresPageGL implements LoresPage {
     private _refreshing = false;
     private _blink = false;
 
-    dirty: Region = {...notDirty}
+    dirty: Region = {...notDirty};
     imageData: ImageData;
 
     constructor(
@@ -86,7 +75,7 @@ export class LoresPageGL implements LoresPage {
         let inverse = false;
         if (this.e) {
             if (!this.vm._80colMode && !this.vm.altCharMode) {
-                inverse = ((val & 0xc0) == 0x40) && this._blink;
+                inverse = ((val & 0xc0) === 0x40) && this._blink;
             }
         } else {
             inverse = !((val & 0x80) || (val & 0x40) && this._blink);
@@ -130,7 +119,7 @@ export class LoresPageGL implements LoresPage {
         const base = addr & 0x3FF;
         let fore, back;
 
-        if (this._buffer[bank][base] == val && !this._refreshing) {
+        if (this._buffer[bank][base] === val && !this._refreshing) {
             return;
         }
         this._buffer[bank][base] = val;
@@ -275,7 +264,7 @@ export class LoresPageGL implements LoresPage {
         this._blink = !this._blink;
         for (let idx = 0; idx < 0x400; idx++, addr++) {
             const b = this._buffer[0][idx];
-            if ((b & 0xC0) == 0x40) {
+            if ((b & 0xC0) === 0x40) {
                 this._write(addr >> 8, addr & 0xff, this._buffer[0][idx], 0);
             }
         }
@@ -363,6 +352,22 @@ export class LoresPageGL implements LoresPage {
  *
  ***************************************************************************/
 
+const _drawPixel = (data: Uint8ClampedArray, off: number, color: Color) => {
+    const c0 = color[0], c1 = color[1], c2 = color[2];
+
+    data[off + 0] = data[off + 4] = c0;
+    data[off + 1] = data[off + 5] = c1;
+    data[off + 2] = data[off + 6] = c2;
+};
+
+const _drawHalfPixel = (data: Uint8ClampedArray, off: number, color: Color) => {
+    const c0 = color[0], c1 = color[1], c2 = color[2];
+
+    data[off + 0] = c0;
+    data[off + 1] = c1;
+    data[off + 2] = c2;
+};
+
 export class HiresPageGL implements HiresPage {
     public imageData: ImageData;
     dirty: Region = {...notDirty};
@@ -382,22 +387,6 @@ export class HiresPageGL implements HiresPage {
         this.vm.setHiresPage(page, this);
     }
 
-    private _drawPixel(data: Uint8ClampedArray, off: number, color: Color) {
-        const c0 = color[0], c1 = color[1], c2 = color[2];
-
-        data[off + 0] = data[off + 4] = c0;
-        data[off + 1] = data[off + 5] = c1;
-        data[off + 2] = data[off + 6] = c2;
-    }
-
-    private _drawHalfPixel(data: Uint8ClampedArray, off: number, color: Color) {
-        const c0 = color[0], c1 = color[1], c2 = color[2];
-
-        data[off + 0] = c0;
-        data[off + 1] = c1;
-        data[off + 2] = c2;
-    }
-
     bank0(): MemoryPages {
         return {
             start: () => this._start(),
@@ -429,7 +418,7 @@ export class HiresPageGL implements HiresPage {
         const addr = (page << 8) | off;
         const base = addr & 0x1FFF;
 
-        if (this._buffer[bank][base] == val && !this._refreshing) {
+        if (this._buffer[bank][base] === val && !this._refreshing) {
             return;
         }
         this._buffer[bank][base] = val;
@@ -464,9 +453,9 @@ export class HiresPageGL implements HiresPage {
                 let bits = val;
                 for (let jdx = 0; jdx < 7; jdx++, offset += 4) {
                     if (bits & 0x01) {
-                        this._drawHalfPixel(data, offset, whiteCol);
+                        _drawHalfPixel(data, offset, whiteCol);
                     } else {
-                        this._drawHalfPixel(data, offset, blackCol);
+                        _drawHalfPixel(data, offset, blackCol);
                     }
                     bits >>= 1;
                 }
@@ -479,17 +468,17 @@ export class HiresPageGL implements HiresPage {
                 if (hbs) {
                     const val0 = this._buffer[bank][base - 1] || 0;
                     if (val0 & 0x40) {
-                        this._drawHalfPixel(data, offset, whiteCol);
+                        _drawHalfPixel(data, offset, whiteCol);
                     } else {
-                        this._drawHalfPixel(data, offset, blackCol);
+                        _drawHalfPixel(data, offset, blackCol);
                     }
                     offset += 4;
                 }
                 let bits = val;
                 for (let idx = 0; idx < 7; idx++, offset += 8) {
-                    const drawPixel = cropLastPixel && idx == 6
-                        ? this._drawHalfPixel
-                        : this._drawPixel;
+                    const drawPixel = cropLastPixel && idx === 6
+                        ? _drawHalfPixel
+                        : _drawPixel;
                     if (bits & 0x01) {
                         drawPixel(data, offset, whiteCol);
                     } else {
@@ -563,7 +552,7 @@ export class VideoModesGL implements VideoModes {
     private _refreshFlag: boolean = true;
     private _canvas: HTMLCanvasElement;
 
-    public ready: Promise<void>
+    public ready: Promise<void>;
 
     public textMode: boolean;
     public mixedMode: boolean;
@@ -673,11 +662,19 @@ export class VideoModesGL implements VideoModes {
         this._hgrs[page - 1] = hires;
     }
 
+    getLoresPage(page: pageNo) {
+        return this._grs[page - 1];
+    }
+
+    getHiresPage(page: pageNo) {
+        return this._hgrs[page - 1];
+    }
+
     text(on: boolean) {
         const old = this.textMode;
         this.textMode = on;
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -688,7 +685,7 @@ export class VideoModesGL implements VideoModes {
         const old = this._80colMode;
         this._80colMode = on;
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -698,7 +695,7 @@ export class VideoModesGL implements VideoModes {
 
         const old = this.altCharMode;
         this.altCharMode = on;
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -707,7 +704,7 @@ export class VideoModesGL implements VideoModes {
         const old = this.hiresMode;
         this.hiresMode = on;
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -718,7 +715,7 @@ export class VideoModesGL implements VideoModes {
         const old = this.an3State;
         this.an3State = on;
 
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -730,7 +727,7 @@ export class VideoModesGL implements VideoModes {
     mixed(on: boolean) {
         const old = this.mixedMode;
         this.mixedMode = on;
-        if (old != on) {
+        if (old !== on) {
             this._refresh();
         }
     }
@@ -738,7 +735,7 @@ export class VideoModesGL implements VideoModes {
     page(pageNo: pageNo) {
         const old = this.pageMode;
         this.pageMode = pageNo;
-        if (old != pageNo) {
+        if (old !== pageNo) {
             this._refresh();
         }
     }
@@ -752,7 +749,7 @@ export class VideoModesGL implements VideoModes {
     }
 
     isPage2() {
-        return this.pageMode == 2;
+        return this.pageMode === 2;
     }
 
     isHires() {
@@ -808,6 +805,8 @@ export class VideoModesGL implements VideoModes {
         const gr = this._grs[this.pageMode - 1];
 
         if (this._refreshFlag) {
+            const { width, height } = screenEmu.C.NTSC_DETAILS.imageSize;
+            this.context.clearRect(0, 0, width, height);
             hgr.refresh();
             gr.refresh();
             this._refreshFlag = false;
diff --git a/js/intbasic/decompiler.js b/js/intbasic/decompiler.js
deleted file mode 100644
index ccbb188..0000000
--- a/js/intbasic/decompiler.js
+++ /dev/null
@@ -1,190 +0,0 @@
-export default function IntBasicDump(mem)
-{
-    var _mem = mem;
-
-    var LETTERS =
-	'                                ' +
-	' !"#$%&\'()*+,-./0123456789:;<=>?' +
-	'@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_' +
-	'`abcdefghijklmnopqrstuvwxyz{|}~ ';
-
-    var TOKENS = {
-        0x02: '_',
-        0x03: ':',
-        0x04: 'LOAD',
-        0x05: 'SAVE',
-        0x06: 'CON',
-        0x07: 'RUN',
-        0x08: 'RUN',
-        0x09: 'DEL',
-        0x0A: ',',
-        0x0B: 'NEW',
-        0x0C: 'CLR',
-        0x0D: 'AUTO',
-        0x0E: ',',
-        0x0F: 'MAN',
-        0x10: 'HIMEM:',
-        0x11: 'LOMEM:',
-        0x12: '+',
-        0x13: '-',
-        0x14: '*',
-        0x15: '/',
-        0x16: '=',
-        0x17: '#',
-        0x18: '>=',
-        0x19: '>',
-        0x1A: '<=',
-        0x1B: '<>',
-        0x1C: '<',
-        0x1D: 'AND',
-        0x1E: 'OR',
-        0x1F: 'MOD',
-        0x20: '^',
-        0x21: '+',
-        0x22: '(',
-        0x23: ',',
-        0x24: 'THEN',
-        0x25: 'THEN',
-        0x26: ',',
-        0x27: ',',
-        0x28: '\'',
-        0x29: '\'',
-        0x2A: '(',
-        0x2B: '!',
-        0x2C: '!',
-        0x2D: '(',
-        0x2E: 'PEEK',
-        0x2F: 'RND',
-        0x30: 'SGN',
-        0x31: 'ABS',
-        0x32: 'PDL',
-        0x33: 'RNDX',
-        0x34: '(',
-        0x35: '+',
-        0x36: '-',
-        0x37: 'NOT',
-        0x38: '(',
-        0x39: '=',
-        0x3A: '#',
-        0x3B: 'LEN(',
-        0x3C: 'ASC(',
-        0x3D: 'SCRN(',
-        0x3E: ',',
-        0x3F: '(',
-        0x40: '$',
-        0x41: '$',
-        0x42: '(',
-        0x43: ',',
-        0x44: ',',
-        0x45: ';',
-        0x46: ';',
-        0x47: ';',
-        0x48: ',',
-        0x49: ',',
-        0x4A: ',',
-        0x4B: 'TEXT',
-        0x4C: 'GR',
-        0x4D: 'CALL',
-        0x4E: 'DIM',
-        0x4F: 'DIM',
-        0x50: 'TAB',
-        0x51: 'END',
-        0x52: 'INPUT',
-        0x53: 'INPUT',
-        0x54: 'INPUT',
-        0x55: 'FOR',
-        0x56: '=',
-        0x57: 'TO',
-        0x58: 'STEP',
-        0x59: 'NEXT',
-        0x5A: ',',
-        0x5B: 'RETURN',
-        0x5C: 'GOSUB',
-        0x5D: 'REM',
-        0x5E: 'LET',
-        0x5F: 'GOTO',
-        0x60: 'IF',
-        0x61: 'PRINT',
-        0x62: 'PRINT',
-        0x63: 'PRINT',
-        0x64: 'POKE',
-        0x65: ',',
-        0x66: 'COLOR=',
-        0x67: 'PLOT',
-        0x68: ',',
-        0x69: 'HLIN',
-        0x6A: ',',
-        0x6B: 'AT',
-        0x6C: 'VLIN',
-        0x6E: 'AT',
-        0x6F: 'VTAB',
-        0x70: '=',
-        0x71: '=',
-        0x72: ')',
-        0x73: ')',
-        0x74: 'LIST',
-        0x76: 'LIST',
-        0x77: 'POP',
-        0x78: 'NODSP',
-        0x79: 'NODSP',
-        0x7A: 'NOTRACE',
-        0x7B: 'DSP',
-        0x7C: 'DSP',
-        0x7D: 'TRACE',
-        0x7E: 'PR#',
-        0x7F: 'IN#'
-    };
-
-    function readByte(addr) {
-        var page = addr >> 8,
-            off = addr & 0xff;
-
-        return _mem.read(page, off);
-    }
-
-    function readWord(addr) {
-        var lsb, msb;
-
-        lsb = readByte(addr);
-        msb = readByte(addr + 1);
-
-        return (msb << 8) | lsb;
-    }
-
-    return {
-        toString: function () {
-            var str = '';
-            var addr = readWord(0xca); // Start
-            var himem = readWord(0x4c);
-            do {
-                /*var len = */readByte(addr++);
-                var lineno = readWord(addr);
-                addr += 2;
-
-                str += lineno;
-                str += ' ';
-                var val = 0;
-                do {
-                    val = readByte(addr++);
-                    if (val >= 0xB0 && val <= 0xB9) {
-                        str += readWord(addr);
-                        addr += 2;
-                    }
-                    else if (val < 0x80 && val > 0x01) {
-                        var t = TOKENS[val];
-                        if (t.length > 1)
-                            str += ' ';
-                        str += t;
-                        if (t.length > 1)
-                            str += ' ';
-                    }
-                    else if (val > 0x80)
-                        str += LETTERS[val - 0x80];
-                } while (val != 0x01);
-                str += '\n';
-            } while (addr < himem);
-
-            return str;
-        }
-    };
-}
diff --git a/js/intbasic/decompiler.ts b/js/intbasic/decompiler.ts
new file mode 100644
index 0000000..ee53f2e
--- /dev/null
+++ b/js/intbasic/decompiler.ts
@@ -0,0 +1,194 @@
+import { byte, word } from 'js/types';
+
+const LETTERS =
+    '                                ' +
+    ' !"#$%&\'()*+,-./0123456789:;<=>?' +
+    '@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_' +
+    '`abcdefghijklmnopqrstuvwxyz{|}~ ';
+
+const TOKENS: Record<byte, string> = {
+    0x00: 'HIMEM:',
+    0x01: '$01',
+    0x02: '_',
+    0x03: ':',
+    0x04: 'LOAD',
+    0x05: 'SAVE',
+    0x06: 'CON',
+    0x07: 'RUN',
+    0x08: 'RUN',
+    0x09: 'DEL',
+    0x0A: ',',
+    0x0B: 'NEW',
+    0x0C: 'CLR',
+    0x0D: 'AUTO',
+    0x0E: ',',
+    0x0F: 'MAN',
+    0x10: 'HIMEM:',
+    0x11: 'LOMEM:',
+    0x12: '+',
+    0x13: '-',
+    0x14: '*',
+    0x15: '/',
+    0x16: '=',
+    0x17: '#',
+    0x18: '>=',
+    0x19: '>',
+    0x1A: '<=',
+    0x1B: '<>',
+    0x1C: '<',
+    0x1D: 'AND',
+    0x1E: 'OR',
+    0x1F: 'MOD',
+    0x20: '^',
+    0x21: '+',
+    0x22: '(',
+    0x23: ',',
+    0x24: 'THEN',
+    0x25: 'THEN',
+    0x26: ',',
+    0x27: ',',
+    0x28: '"',
+    0x29: '"',
+    0x2A: '(',
+    0x2B: '!',
+    0x2C: '!',
+    0x2D: '(',
+    0x2E: 'PEEK',
+    0x2F: 'RND',
+    0x30: 'SGN',
+    0x31: 'ABS',
+    0x32: 'PDL',
+    0x33: 'RNDX',
+    0x34: '(',
+    0x35: '+',
+    0x36: '-',
+    0x37: 'NOT',
+    0x38: '(',
+    0x39: '=',
+    0x3A: '#',
+    0x3B: 'LEN(',
+    0x3C: 'ASC(',
+    0x3D: 'SCRN(',
+    0x3E: ',',
+    0x3F: '(',
+    0x40: '$',
+    0x41: '$',
+    0x42: '(',
+    0x43: ',',
+    0x44: ',',
+    0x45: ';',
+    0x46: ';',
+    0x47: ';',
+    0x48: ',',
+    0x49: ',',
+    0x4A: ',',
+    0x4B: 'TEXT',
+    0x4C: 'GR',
+    0x4D: 'CALL',
+    0x4E: 'DIM',
+    0x4F: 'DIM',
+    0x50: 'TAB',
+    0x51: 'END',
+    0x52: 'INPUT',
+    0x53: 'INPUT',
+    0x54: 'INPUT',
+    0x55: 'FOR',
+    0x56: '=',
+    0x57: 'TO',
+    0x58: 'STEP',
+    0x59: 'NEXT',
+    0x5A: ',',
+    0x5B: 'RETURN',
+    0x5C: 'GOSUB',
+    0x5D: 'REM',
+    0x5E: 'LET',
+    0x5F: 'GOTO',
+    0x60: 'IF',
+    0x61: 'PRINT',
+    0x62: 'PRINT',
+    0x63: 'PRINT',
+    0x64: 'POKE',
+    0x65: ',',
+    0x66: 'COLOR=',
+    0x67: 'PLOT',
+    0x68: ',',
+    0x69: 'HLIN',
+    0x6A: ',',
+    0x6B: 'AT',
+    0x6C: 'VLIN',
+    0x6D: ',',
+    0x6E: 'AT',
+    0x6F: 'VTAB',
+    0x70: '=',
+    0x71: '=',
+    0x72: ')',
+    0x73: ')',
+    0x74: 'LIST',
+    0x75: ',',
+    0x76: 'LIST',
+    0x77: 'POP',
+    0x78: 'NODSP',
+    0x79: 'NODSP',
+    0x7A: 'NOTRACE',
+    0x7B: 'DSP',
+    0x7C: 'DSP',
+    0x7D: 'TRACE',
+    0x7E: 'PR#',
+    0x7F: 'IN#'
+};
+
+export default class IntBasicDump {
+    constructor(private data: Uint8Array) { }
+
+    private readByte(addr: word) {
+        return this.data[addr];
+    }
+
+    private readWord(addr: word) {
+        const lsb = this.readByte(addr);
+        const msb = this.readByte(addr + 1);
+
+        return (msb << 8) | lsb;
+    }
+
+    toString() {
+        let str = '';
+        let addr = 0;
+        const himem = this.data.length;
+        do {
+            let inRem = false;
+            let inQuote = false;
+            let isAlphaNum = false;
+            /* const length = */ this.readByte(addr++);
+            const lineno = this.readWord(addr);
+            addr += 2;
+
+            str += lineno;
+            str += ' ';
+            let val = 0;
+            do {
+                val = this.readByte(addr++);
+                if (!inRem && !inQuote && !isAlphaNum && val >= 0xB0 && val <= 0xB9) {
+                    str += this.readWord(addr);
+                    addr += 2;
+                } else if (val < 0x80 && val > 0x01) {
+                    const t = TOKENS[val];
+                    if (t.length > 1) { str += ' '; }
+                    str += t;
+                    if (t.length > 1) { str += ' '; }
+                    if (val === 0x28) { inQuote = true; }
+                    if (val === 0x29) { inQuote = false; }
+                    if (val === 0x5d) { inRem = true; }
+                    isAlphaNum = false;
+                } else if (val > 0x80) {
+                    const char = LETTERS[val - 0x80];
+                    str += char;
+                    isAlphaNum = /[A-Z0-9]/.test(char);
+                }
+            } while (val !== 0x01);
+            str += '\n';
+        } while (addr < himem);
+
+        return str;
+    }
+}
diff --git a/js/main2.ts b/js/main2.ts
index 0adddb3..ef4a2ac 100644
--- a/js/main2.ts
+++ b/js/main2.ts
@@ -12,12 +12,13 @@ import Thunderclock from './cards/thunderclock';
 import VideoTerm from './cards/videoterm';
 
 import { Apple2 } from './apple2';
+import { SupportedSectors } from './formats/types';
 
 const prefs = new Prefs();
 const romVersion = prefs.readPref('computer_type2');
 let rom: string;
 let characterRom: string;
-let sectors = 16;
+let sectors: SupportedSectors = 16;
 
 switch (romVersion) {
     case 'apple2':
@@ -51,6 +52,7 @@ switch (romVersion) {
 }
 
 const options = {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     canvas: document.querySelector<HTMLCanvasElement>('#screen')!,
     gl: prefs.readPref('gl_canvas', 'true') === 'true',
     rom,
@@ -73,7 +75,7 @@ apple2.ready.then(() => {
     const slinky = new RAMFactor(1024 * 1024);
     const disk2 = new DiskII(io, driveLights, sectors);
     const clock = new Thunderclock();
-    const smartport = new SmartPort(cpu, { block: true });
+    const smartport = new SmartPort(cpu, null, { block: true });
 
     io.setSlot(0, lc);
     io.setSlot(1, parallel);
diff --git a/js/main2e.ts b/js/main2e.ts
index 70aaf82..2280d58 100644
--- a/js/main2e.ts
+++ b/js/main2e.ts
@@ -2,12 +2,14 @@ import Prefs from './prefs';
 
 import { driveLights, initUI, updateUI } from './ui/apple2';
 import Printer from './ui/printer';
+import { MouseUI } from './ui/mouse';
 
 import DiskII from './cards/disk2';
 import Parallel from './cards/parallel';
 import RAMFactor from './cards/ramfactor';
 import SmartPort from './cards/smartport';
 import Thunderclock from './cards/thunderclock';
+import Mouse from './cards/mouse';
 
 import { Apple2 } from './apple2';
 
@@ -40,6 +42,7 @@ switch (romVersion) {
 
 const options = {
     gl: prefs.readPref('gl_canvas', 'true') === 'true',
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     canvas: document.querySelector<HTMLCanvasElement>('#screen')!,
     rom,
     characterRom,
@@ -54,15 +57,18 @@ apple2.ready.then(() => {
     const cpu = apple2.getCPU();
 
     const printer = new Printer('#printer-modal .paper');
+    const mouseUI = new MouseUI(options.canvas);
 
     const parallel = new Parallel(printer);
     const slinky = new RAMFactor(1024 * 1024);
     const disk2 = new DiskII(io, driveLights);
     const clock = new Thunderclock();
-    const smartport = new SmartPort(cpu, { block: !enhanced });
+    const smartport = new SmartPort(cpu, null, { block: !enhanced });
+    const mouse = new Mouse(cpu, mouseUI);
 
     io.setSlot(1, parallel);
     io.setSlot(2, slinky);
+    io.setSlot(4, mouse);
     io.setSlot(5, clock);
     io.setSlot(6, disk2);
     io.setSlot(7, smartport);
diff --git a/js/mmu.ts b/js/mmu.ts
index f0d1ed3..edc0791 100644
--- a/js/mmu.ts
+++ b/js/mmu.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import CPU6502 from './cpu6502';
 import RAM, { RAMState } from './ram';
 import ROM, { ROMState } from './roms/rom';
@@ -112,11 +101,11 @@ class AuxRom implements Memory {
         private readonly rom: ROM) { }
 
     _access(page: byte, off: byte) {
-        if (page == 0xc3) {
+        if (page === 0xc3) {
             this.mmu._setIntc8rom(true);
             this.mmu._updateBanks();
         }
-        if (page == 0xcf && off == 0xff) {
+        if (page === 0xcf && off === 0xff) {
             this.mmu._setIntc8rom(false);
             this.mmu._updateBanks();
         }
@@ -133,29 +122,29 @@ class AuxRom implements Memory {
 }
 
 export interface MMUState {
-    bank1: boolean
-    readbsr: boolean
-    writebsr: boolean
-    prewrite: boolean
+    bank1: boolean;
+    readbsr: boolean;
+    writebsr: boolean;
+    prewrite: boolean;
 
-    intcxrom: boolean
-    slot3rom: boolean
-    intc8rom: boolean
+    intcxrom: boolean;
+    slot3rom: boolean;
+    intc8rom: boolean;
 
-    auxRamRead: boolean
-    auxRamWrite: boolean
-    altzp: boolean
+    auxRamRead: boolean;
+    auxRamWrite: boolean;
+    altzp: boolean;
 
-    _80store: boolean
-    page2: boolean
-    hires: boolean
+    _80store: boolean;
+    page2: boolean;
+    hires: boolean;
 
-    mem00_01: [RAMState, RAMState]
-    mem02_03: [RAMState, RAMState]
-    mem0C_1F: [RAMState, RAMState]
-    mem60_BF: [RAMState, RAMState]
-    memD0_DF: [ROMState, RAMState, RAMState, RAMState, RAMState]
-    memE0_FF: [ROMState, RAMState, RAMState]
+    mem00_01: [RAMState, RAMState];
+    mem02_03: [RAMState, RAMState];
+    mem0C_1F: [RAMState, RAMState];
+    mem60_BF: [RAMState, RAMState];
+    memD0_DF: [ROMState, RAMState, RAMState, RAMState, RAMState];
+    memE0_FF: [ROMState, RAMState, RAMState];
 }
 
 export default class MMU implements Memory, Restorable<MMUState> {
@@ -180,7 +169,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
     private _altzp: boolean;
 
     // Video
-    private _80store: boolean;
+    private __80store: boolean;
     private _page2: boolean;
     private _hires: boolean;
 
@@ -300,7 +289,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
         }
     }
 
-    _initSwitches() {
+    private _initSwitches() {
         this._bank1 = false;
         this._readbsr = false;
         this._writebsr = false;
@@ -314,14 +303,14 @@ export default class MMU implements Memory, Restorable<MMUState> {
         this._slot3rom = false;
         this._intc8rom = false;
 
-        this._80store = false;
+        this.__80store = false;
         this._page2 = false;
         this._hires = false;
 
         this._iouDisable = true;
     }
 
-    _debug(..._args: any[]) {
+    private _debug(..._args: unknown[]) {
         // debug.apply(this, _args);
     }
 
@@ -350,7 +339,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
             }
         }
 
-        if (this._80store) {
+        if (this.__80store) {
             if (this._page2) {
                 for (let idx = 0x4; idx < 0x8; idx++) {
                     this._readPages[idx] = this._pages[idx][1];
@@ -451,15 +440,15 @@ export default class MMU implements Memory, Restorable<MMUState> {
 
     // Apple //e memory management
 
-    _accessMMUSet(off: byte, _val?: byte) {
+    private _accessMMUSet(off: byte, _val?: byte) {
         switch (off) {
             case LOC._80STOREOFF:
-                this._80store = false;
+                this.__80store = false;
                 this._debug('80 Store Off', _val);
                 this.vm.page(this._page2 ? 2 : 1);
                 break;
             case LOC._80STOREON:
-                this._80store = true;
+                this.__80store = true;
                 this._debug('80 Store On', _val);
                 break;
             case LOC.RAMRDOFF:
@@ -531,24 +520,24 @@ export default class MMU implements Memory, Restorable<MMUState> {
 
     // Status registers
 
-    _accessStatus(off: byte, val?: byte) {
+    private _accessStatus(off: byte, val?: byte) {
         let result = undefined;
 
         switch(off) {
             case LOC.BSRBANK2:
-                this._debug('Bank 2 Read ' + !this._bank1);
+                this._debug(`Bank 2 Read ${!this._bank1 ? 'true' : 'false'}`);
                 result = !this._bank1 ? 0x80 : 0x00;
                 break;
             case LOC.BSRREADRAM:
-                this._debug('Bank SW RAM Read ' + this._readbsr);
+                this._debug(`Bank SW RAM Read ${this._readbsr ? 'true' : 'false'}`);
                 result = this._readbsr ? 0x80 : 0x00;
                 break;
             case LOC.RAMRD: // 0xC013
-                this._debug('Aux RAM Read ' + this._auxRamRead);
+                this._debug(`Aux RAM Read ${this._auxRamRead ? 'true' : 'false'}`);
                 result = this._auxRamRead ? 0x80 : 0x0;
                 break;
             case LOC.RAMWRT: // 0xC014
-                this._debug('Aux RAM Write ' + this._auxRamWrite);
+                this._debug(`Aux RAM Write ${this._auxRamWrite ? 'true' : 'false'}`);
                 result = this._auxRamWrite ? 0x80 : 0x0;
                 break;
             case LOC.INTCXROM: // 0xC015
@@ -556,16 +545,16 @@ export default class MMU implements Memory, Restorable<MMUState> {
                 result = this._intcxrom ? 0x80 : 0x00;
                 break;
             case LOC.ALTZP: // 0xC016
-                this._debug('Alt ZP ' + this._altzp);
+                this._debug(`Alt ZP ${this._altzp ? 'true' : 'false'}`);
                 result = this._altzp ? 0x80 : 0x0;
                 break;
             case LOC.SLOTC3ROM: // 0xC017
-                this._debug('Slot C3 ROM ' + this._slot3rom);
+                this._debug(`Slot C3 ROM ${this._slot3rom ? 'true' : 'false'}`);
                 result = this._slot3rom ? 0x80 : 0x00;
                 break;
             case LOC._80STORE: // 0xC018
-                this._debug('80 Store ' + this._80store);
-                result = this._80store ? 0x80 : 0x00;
+                this._debug(`80 Store ${this.__80store ? 'true' : 'false'}`);
+                result = this.__80store ? 0x80 : 0x00;
                 break;
             case LOC.VERTBLANK: // 0xC019
             // result = cpu.getCycles() % 20 < 5 ? 0x80 : 0x00;
@@ -596,7 +585,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
         return result;
     }
 
-    _accessIOUDisable(off: byte, val?: byte) {
+    private _accessIOUDisable(off: byte, val?: byte) {
         const writeMode = val !== undefined;
         let result;
 
@@ -625,13 +614,13 @@ export default class MMU implements Memory, Restorable<MMUState> {
     }
 
 
-    _accessGraphics(off: byte, val?: byte) {
+    private _accessGraphics(off: byte, val?: byte) {
         let result: byte | undefined = 0;
 
         switch (off) {
             case LOC.PAGE1:
                 this._page2 = false;
-                if (!this._80store) {
+                if (!this.__80store) {
                     result = this.io.ioSwitch(off, val);
                 }
                 this._debug('Page 2 off');
@@ -639,7 +628,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
 
             case LOC.PAGE2:
                 this._page2 = true;
-                if (!this._80store) {
+                if (!this.__80store) {
                     result = this.io.ioSwitch(off, val);
                 }
                 this._debug('Page 2 on');
@@ -682,7 +671,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
         return result;
     }
 
-    _accessLangCard(off: byte, val?: byte) {
+    private _accessLangCard(off: byte, val?: byte) {
         const readMode = val === undefined;
         const result = readMode ? 0 : undefined;
 
@@ -812,6 +801,46 @@ export default class MMU implements Memory, Restorable<MMUState> {
         this._vbEnd = this.cpu.getCycles() + 1000;
     }
 
+    public get bank1() {
+        return this._bank1;
+    }
+
+    public get readbsr() {
+        return this._readbsr;
+    }
+
+    public get writebsr() {
+        return this._writebsr;
+    }
+
+    public get auxread() {
+        return this._auxRamRead;
+    }
+
+    public get auxwrite() {
+        return this._auxRamWrite;
+    }
+
+    public get altzp() {
+        return this._altzp;
+    }
+
+    public get _80store() {
+        return this.__80store;
+    }
+
+    public get page2() {
+        return this._page2;
+    }
+
+    public get hires() {
+        return this._hires;
+    }
+
+    public get intcxrom() {
+        return this._intcxrom;
+    }
+
     public getState(): MMUState {
         return {
             bank1: this._bank1,
@@ -827,7 +856,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
             auxRamWrite: this._auxRamWrite,
             altzp: this._altzp,
 
-            _80store: this._80store,
+            _80store: this.__80store,
             page2: this._page2,
             hires: this._hires,
 
@@ -864,7 +893,7 @@ export default class MMU implements Memory, Restorable<MMUState> {
         this._auxRamWrite = state.auxRamWrite;
         this._altzp = state.altzp;
 
-        this._80store = state._80store;
+        this.__80store = state._80store;
         this._page2 = state.page2;
         this._hires = state.hires;
 
diff --git a/js/options.ts b/js/options.ts
new file mode 100644
index 0000000..b02075f
--- /dev/null
+++ b/js/options.ts
@@ -0,0 +1,94 @@
+import Prefs from './prefs';
+
+export const BOOLEAN_OPTION = 'BOOLEAN_OPTION';
+export const SELECT_OPTION = 'SELECT_OPTION';
+
+export interface Option {
+    name: string;
+    label: string;
+    type: string;
+    defaultVal: string | boolean;
+}
+
+export interface BooleanOption extends Option {
+    type: typeof BOOLEAN_OPTION;
+    defaultVal: boolean;
+}
+
+export interface SelectOption extends Option {
+    type: typeof SELECT_OPTION;
+    defaultVal: string;
+    values: Array<{name: string; value: string}>;
+}
+
+export interface OptionSection {
+    name: string;
+    options: Option[];
+}
+
+export interface OptionHandler {
+    getOptions: () => OptionSection[];
+    setOption: (name: string, value: string | boolean) => void;
+}
+
+export class Options {
+    private prefs: Prefs = new Prefs();
+    private options: Record<string, Option> = {};
+    private handlers: Record<string, OptionHandler> = {};
+    private sections: OptionSection[] = [];
+
+    addOptions(handler: OptionHandler) {
+        const sections = handler.getOptions();
+        for (const section of sections) {
+            const { options } = section;
+            for (const option of options) {
+                const { name } = option;
+                this.handlers[name] = handler;
+                this.options[name] = option;
+                const value = this.getOption(name);
+                if (value != null) {
+                    handler.setOption(name, value);
+                }
+            }
+            this.sections.push(section);
+        }
+    }
+
+    getOption(name: string): string | boolean | undefined {
+        const option = this.options[name];
+        if (option) {
+            const { name, defaultVal, type } = option;
+            const stringVal = String(defaultVal);
+            const prefVal = this.prefs.readPref(name, stringVal);
+            switch (type) {
+                case BOOLEAN_OPTION:
+                    return prefVal === 'true';
+                default:
+                    return prefVal;
+            }
+        }
+    }
+
+    setOption(name: string, value: string | boolean) {
+        if (name in this.options) {
+            const handler = this.handlers[name];
+            const option = this.options[name];
+            this.prefs.writePref(name, String(value));
+            switch (option.type) {
+                case BOOLEAN_OPTION:
+                    handler.setOption(name, Boolean(value));
+                    break;
+                default:
+                    handler.setOption(name, String(value));
+            }
+        }
+    }
+
+    getOptions() {
+        return this.options;
+    }
+
+    getSections() {
+        return this.sections;
+    }
+}
diff --git a/js/prefs.ts b/js/prefs.ts
index 5df7b85..3f49cac 100644
--- a/js/prefs.ts
+++ b/js/prefs.ts
@@ -1,25 +1,25 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 const havePrefs = typeof window.localStorage !== 'undefined';
 
 export default class Prefs {
+    url: URL;
+    title: string;
+
+    constructor() {
+        this.url = new URL(window.location.href);
+        this.title = window.document.title;
+    }
 
     havePrefs() {
         return havePrefs;
     }
 
-    readPref(name: string): string | null
-    readPref(name: string, defaultValue: string): string
+    readPref(name: string): string | null;
+    readPref(name: string, defaultValue: string): string;
     readPref(name: string, defaultValue: string | null = null) {
+        if (this.url.searchParams.has(name)) {
+            return this.url.searchParams.get(name);
+        }
+
         if (havePrefs) {
             return window.localStorage.getItem(name) ?? defaultValue;
         }
@@ -27,6 +27,15 @@ export default class Prefs {
     }
 
     writePref(name: string, value: string) {
+        if (this.url.searchParams.has(name)) {
+            this.url.searchParams.set(name, value);
+            history.replaceState(
+                null,
+                this.title,
+                this.url.toString()
+            );
+        }
+
         if (havePrefs) {
             window.localStorage.setItem(name, value);
         }
diff --git a/js/ram.ts b/js/ram.ts
index 7483603..17c8380 100644
--- a/js/ram.ts
+++ b/js/ram.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { byte, memory, Memory, Restorable } from './types';
 import { allocMemPages } from './util';
 
diff --git a/js/roms/cards/mouse.ts b/js/roms/cards/mouse.ts
new file mode 100644
index 0000000..c9a9d09
--- /dev/null
+++ b/js/roms/cards/mouse.ts
@@ -0,0 +1,37 @@
+import { ReadonlyUint8Array } from '../../types';
+
+export const rom: ReadonlyUint8Array = new Uint8Array([
+    0x00,0x00,0x00,0x00,0x00,0x38,0x00,0x18,
+    0x00,0x00,0x00,0x01,0x20,0x00,0x00,0x00,
+    0x00,0x00,0x20,0x21,0x22,0x23,0x24,0x25,
+    0x26,0x27,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x60,0x60,0x60,0x60,0x60,0x60,0x60,0x60,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0x00,0x00,0x00,0x00,0x00,
+    0x00,0x00,0x00,0xd6,0x00,0x00,0x00,0x00,
+]);
+
diff --git a/js/roms/rom.ts b/js/roms/rom.ts
index 9be7841..86cd024 100644
--- a/js/roms/rom.ts
+++ b/js/roms/rom.ts
@@ -5,11 +5,11 @@ export type ROMState = null;
 export default class ROM implements MemoryPages, Restorable<ROMState> {
 
     constructor(
-    private readonly startPage: byte,
-    private readonly endPage: byte,
-    private readonly rom: rom) {
-        const expectedLength = (endPage-startPage+1) * 256;
-        if (rom.length != expectedLength) {
+        private readonly startPage: byte,
+        private readonly endPage: byte,
+        private readonly rom: rom) {
+        const expectedLength = (endPage - startPage + 1) * 256;
+        if (rom.length !== expectedLength) {
             throw Error(`rom does not have the correct length: expected ${expectedLength} was ${rom.length}`);
         }
     }
@@ -24,10 +24,12 @@ export default class ROM implements MemoryPages, Restorable<ROMState> {
         return this.rom[(page - this.startPage) << 8 | off];
     }
     write() {
+        // not writable
     }
     getState() {
         return null;
     }
-    setState(_state: null) {
+    setState(_state: ROMState) {
+        // not restorable
     }
 }
diff --git a/js/types.ts b/js/types.ts
index 3e47499..03c27d7 100644
--- a/js/types.ts
+++ b/js/types.ts
@@ -86,7 +86,7 @@ export interface MemoryPages extends Memory {
 }
 
 /* An interface card */
-export interface Card extends Memory, Restorable {
+export interface Card<StateT = unknown> extends Memory, Restorable<StateT> {
     /* Reset the card */
     reset?(): void;
 
@@ -102,7 +102,7 @@ export interface Card extends Memory, Restorable {
 
 export type TapeData = Array<[duration: number, high: boolean]>;
 
-export interface Restorable<T = any> {
+export interface Restorable<T = unknown> {
     getState(): T;
     setState(state: T): void;
 }
@@ -110,7 +110,7 @@ export interface Restorable<T = any> {
 // Read-only typed arrays for constants
 export type TypedArrayMutableProperties = 'copyWithin' | 'fill' | 'reverse' | 'set' | 'sort';
 export interface ReadonlyUint8Array extends Omit<Uint8Array, TypedArrayMutableProperties> {
-    readonly [n: number]: number
+    readonly [n: number]: number;
 }
 
 // Readonly RGB color value
diff --git a/js/ui/apple2.ts b/js/ui/apple2.ts
index 4fb3988..498b5dc 100644
--- a/js/ui/apple2.ts
+++ b/js/ui/apple2.ts
@@ -3,35 +3,40 @@ import MicroModal from 'micromodal';
 import { base64_json_parse, base64_json_stringify } from '../base64';
 import { Audio, SOUND_ENABLED_OPTION } from './audio';
 import DriveLights from './drive_lights';
-import { byte, includes, word } from '../types';
-import { BLOCK_FORMATS, MassStorage, NIBBLE_FORMATS } from '../formats/types';
+import { includes, word } from '../types';
 import {
+    BLOCK_FORMATS,
     DISK_FORMATS,
+    DiskDescriptor,
     DriveNumber,
     DRIVE_NUMBERS,
-    JSONDisk
+    MassStorage,
+    JSONBinaryImage,
+    JSONDisk,
+    BlockFormat,
+    FLOPPY_FORMATS
 } from '../formats/types';
 import { initGamepad } from './gamepad';
 import KeyBoard from './keyboard';
 import Tape, { TAPE_TYPES } from './tape';
-import type { GamepadConfiguration } from './types';
 
-import ApplesoftDump from '../applesoft/decompiler';
+import ApplesoftDecompiler from '../applesoft/decompiler';
 import ApplesoftCompiler from '../applesoft/compiler';
+import { TXTTAB } from 'js/applesoft/zeropage';
 
 import { debug } from '../util';
-import { Apple2, Stats } from '../apple2';
+import { Apple2, Stats, State as Apple2State } from '../apple2';
 import DiskII from '../cards/disk2';
 import CPU6502 from '../cpu6502';
 import { VideoModes } from '../videomodes';
 import Apple2IO from '../apple2io';
-import {  } from '../formats/format_utils';
 import Printer from './printer';
 
 import { OptionsModal } from './options_modal';
-import { Screen } from './screen';
+import { Screen, SCREEN_FULL_PAGE } from './screen';
 import { JoyStick } from './joystick';
 import { System } from './system';
+import { Options } from '../options';
 
 let paused = false;
 
@@ -42,18 +47,11 @@ let lastRenderedFrames = 0;
 
 let hashtag = document.location.hash;
 
-const optionsModal = new OptionsModal();
-
-interface DiskDescriptor {
-    name: string;
-    disk?: number;
-    filename: string;
-    e?: boolean;
-    category: string;
-}
+const options = new Options();
+const optionsModal = new OptionsModal(options);
 
 type DiskCollection = {
-    [name: string]: DiskDescriptor[]
+    [name: string]: DiskDescriptor[];
 };
 
 const CIDERPRESS_EXTENSION = /#([0-9a-f]{2})([0-9a-f]{4})$/i;
@@ -78,7 +76,7 @@ let stats: Stats;
 let vm: VideoModes;
 let tape: Tape;
 let _disk2: DiskII;
-let _massStorage: MassStorage;
+let _massStorage: MassStorage<BlockFormat>;
 let _printer: Printer;
 let audio: Audio;
 let screen: Screen;
@@ -93,15 +91,15 @@ let ready: Promise<[void, void]>;
 
 export const driveLights = new DriveLights();
 
-export function dumpAppleSoftProgram() {
-    const dumper = new ApplesoftDump(cpu);
-    debug(dumper.toString());
+export function dumpApplesoftProgram() {
+    const decompiler = ApplesoftDecompiler.decompilerFromMemory(cpu);
+    debug(decompiler.list({apple2: _e ? 'e' : 'plus'}));
 }
 
-export function compileAppleSoftProgram(program: string) {
-    const compiler = new ApplesoftCompiler(cpu);
-    compiler.compile(program);
-    dumpAppleSoftProgram();
+export function compileApplesoftProgram(program: string) {
+    const start = cpu.read(TXTTAB) + (cpu.read(TXTTAB + 1) << 8);
+    ApplesoftCompiler.compileToMemory(cpu, program, start);
+    dumpApplesoftProgram();
 }
 
 export function openLoad(driveString: string, event: MouseEvent) {
@@ -123,14 +121,15 @@ export function openSave(driveString: string, event: MouseEvent) {
     const drive = parseInt(driveString, 10) as DriveNumber;
 
     const mimeType = 'application/octet-stream';
-    const data = _disk2.getBinary(drive);
+    const storageData = _disk2.getBinary(drive);
     const a = document.querySelector<HTMLAnchorElement>('#local_save_link')!;
 
-    if (!data) {
-        alert('No data from drive ' + drive);
+    if (!storageData) {
+        alert(`No data from drive ${drive}`);
         return;
     }
 
+    const { data } = storageData;
     const blob = new Blob([data], { 'type': mimeType });
     a.href = window.URL.createObjectURL(blob);
     a.download = driveLights.label(drive) + '.dsk';
@@ -185,10 +184,10 @@ export function handleDrop(drive: number, event: DragEvent) {
         }
     }
     const dt = event.dataTransfer!;
-    if (dt.files.length == 1) {
+    if (dt.files.length === 1) {
         const runOnLoad = event.shiftKey;
         doLoadLocal(drive as DriveNumber, dt.files[0], { runOnLoad });
-    } else if (dt.files.length == 2) {
+    } else if (dt.files.length === 2) {
         doLoadLocal(1, dt.files[0]);
         doLoadLocal(2, dt.files[1]);
     } else {
@@ -215,7 +214,7 @@ function loadingProgress(current: number, total: number) {
         const meter = document.querySelector<HTMLDivElement>('#loading-modal .meter')!;
         const progress = document.querySelector<HTMLDivElement>('#loading-modal .progress')!;
         meter.style.display = 'block';
-        progress.style.width = current / total * meter.clientWidth + 'px';
+        progress.style.width = `${current / total * meter.clientWidth}px`;
     }
 }
 
@@ -229,14 +228,6 @@ function loadingStop() {
     }
 }
 
-interface JSONBinaryImage {
-    type: 'binary',
-    start: word,
-    length: word,
-    data: byte[],
-    gamepad?: GamepadConfiguration,
-}
-
 export function loadAjax(drive: DriveNumber, url: string) {
     loadingStart();
 
@@ -248,15 +239,16 @@ export function loadAjax(drive: DriveNumber, url: string) {
         }
     }).then(function (data: JSONDisk | JSONBinaryImage) {
         if (data.type === 'binary') {
-            loadBinary(data as JSONBinaryImage);
+            loadBinary(data );
         } else if (includes(DISK_FORMATS, data.type)) {
             loadDisk(drive, data);
         }
         initGamepad(data.gamepad);
         loadingStop();
-    }).catch(function (error) {
+    }).catch(function (error: Error) {
         loadingStop();
         openAlert(error.message);
+        console.error(error);
     });
 }
 
@@ -266,7 +258,7 @@ export function doLoad(event: MouseEvent|KeyboardEvent) {
     const urls = select.value;
     let url;
     if (urls && urls.length) {
-        if (typeof (urls) == 'string') {
+        if (typeof (urls) === 'string') {
             url = urls;
         } else {
             url = urls[0];
@@ -275,15 +267,15 @@ export function doLoad(event: MouseEvent|KeyboardEvent) {
 
     const localFile = document.querySelector<HTMLInputElement>('#local_file')!;
     const files = localFile.files;
-    if (files && files.length == 1) {
+    if (files && files.length === 1) {
         const runOnLoad = event.shiftKey;
         doLoadLocal(_currentDrive, files[0], { runOnLoad });
     } else if (url) {
         let filename;
         MicroModal.close('load-modal');
-        if (url.substr(0, 6) == 'local:') {
-            filename = url.substr(6);
-            if (filename == '__manage') {
+        if (url.slice(0, 6) === 'local:') {
+            filename = url.slice(6);
+            if (filename === '__manage') {
                 openManage();
             } else {
                 loadLocalStorage(_currentDrive, filename);
@@ -317,8 +309,8 @@ export function doDelete(name: string) {
 }
 
 interface LoadOptions {
-    address?: word,
-    runOnLoad?: boolean,
+    address?: word;
+    runOnLoad?: boolean;
 }
 
 function doLoadLocal(drive: DriveNumber, file: File, options: Partial<LoadOptions> = {}) {
@@ -334,8 +326,8 @@ function doLoadLocal(drive: DriveNumber, file: File, options: Partial<LoadOption
     } else if (includes(TAPE_TYPES, ext)) {
         tape.doLoadLocalTape(file);
     } else if (BIN_TYPES.includes(ext) || type === '06' || options.address) {
-        const address = aux !== undefined ? parseInt(aux, 16) : undefined;
-        doLoadBinary(file, { address, ...options });
+        const auxAddress = aux !== undefined ? { address: parseInt(aux, 16) } : {};
+        doLoadBinary(file, { ...options, ...auxAddress });
     } else {
         const addressInput = document.querySelector<HTMLInputElement>('#local_file_address');
         const addressStr = addressInput?.value;
@@ -400,7 +392,7 @@ function doLoadLocalDisk(drive: DriveNumber, file: File) {
                 }
             } else {
                 if (
-                    includes(NIBBLE_FORMATS, ext) &&
+                    includes(FLOPPY_FORMATS, ext) &&
                     _disk2.setBinary(drive, name, ext, result)
                 ) {
                     initGamepad();
@@ -425,7 +417,7 @@ export function doLoadHTTP(drive: DriveNumber, url?: string) {
     if (url) {
         fetch(url).then(function (response) {
             if (response.ok) {
-                const reader = response!.body!.getReader();
+                const reader = response.body!.getReader();
                 let received = 0;
                 const chunks: Uint8Array[] = [];
                 const contentLength = parseInt(response.headers.get('content-length')!, 10);
@@ -461,15 +453,13 @@ export function doLoadHTTP(drive: DriveNumber, url?: string) {
             const name = decodeURIComponent(fileParts.join('.'));
             if (includes(DISK_FORMATS, ext)) {
                 if (data.byteLength >= 800 * 1024) {
-                    if (
-                        includes(BLOCK_FORMATS, ext) &&
-                        _massStorage.setBinary(drive, name, ext, data)
-                    ) {
+                    if (includes(BLOCK_FORMATS, ext)) {
+                        _massStorage.setBinary(drive, name, ext, data);
                         initGamepad();
                     }
                 } else {
                     if (
-                        includes(NIBBLE_FORMATS, ext) &&
+                        includes(FLOPPY_FORMATS, ext) &&
                         _disk2.setBinary(drive, name, ext, data)
                     ) {
                         initGamepad();
@@ -479,9 +469,10 @@ export function doLoadHTTP(drive: DriveNumber, url?: string) {
                 throw new Error(`Extension ${ext} not recognized.`);
             }
             loadingStop();
-        }).catch(function (error) {
+        }).catch((error: Error) => {
             loadingStop();
             openAlert(error.message);
+            console.error(error);
         });
     }
 }
@@ -509,19 +500,19 @@ export function updateKHz() {
         case 0: {
             delta = cycles - lastCycles;
             khz = Math.trunc(delta / ms);
-            kHzElement.innerText = khz + ' kHz';
+            kHzElement.innerText = `${khz} kHz`;
             break;
         }
         case 1: {
             delta = stats.renderedFrames - lastRenderedFrames;
             fps = Math.trunc(delta / (ms / 1000));
-            kHzElement.innerText = fps + ' rps';
+            kHzElement.innerText = `${fps} rps`;
             break;
         }
         default: {
             delta = stats.frames - lastFrames;
             fps = Math.trunc(delta / (ms / 1000));
-            kHzElement.innerText = fps + ' fps';
+            kHzElement.innerText = `${fps} fps`;
         }
     }
 
@@ -537,7 +528,7 @@ export function toggleShowFPS() {
 
 export function toggleSound() {
     const on = !audio.isEnabled();
-    optionsModal.setOption(SOUND_ENABLED_OPTION, on);
+    options.setOption(SOUND_ENABLED_OPTION, on);
     updateSoundButton(on);
 }
 
@@ -589,7 +580,7 @@ export function selectCategory() {
             const file = cat[idx];
             let name = file.name;
             if (file.disk) {
-                name += ' - ' + file.disk;
+                name += ` - ${file.disk}`;
             }
             const option = document.createElement('option');
             option.value = file.filename;
@@ -632,7 +623,7 @@ function loadDisk(drive: DriveNumber, disk: JSONDisk) {
  */
 
 function updateLocalStorage() {
-    const diskIndex = JSON.parse(window.localStorage.diskIndex || '{}');
+    const diskIndex = JSON.parse(window.localStorage.getItem('diskIndex') || '{}') as LocalDiskIndex;
     const names = Object.keys(diskIndex);
 
     const cat: DiskDescriptor[] = disk_categories['Local Saves'] = [];
@@ -660,16 +651,16 @@ function updateLocalStorage() {
 }
 
 type LocalDiskIndex = {
-    [name: string]: string,
-}
+    [name: string]: string;
+};
 
 function saveLocalStorage(drive: DriveNumber, name: string) {
-    const diskIndex = JSON.parse(window.localStorage.diskIndex || '{}') as LocalDiskIndex;
+    const diskIndex = JSON.parse(window.localStorage.getItem('diskIndex') || '{}') as LocalDiskIndex;
 
     const json = _disk2.getJSON(drive);
     diskIndex[name] = json;
 
-    window.localStorage.diskIndex = JSON.stringify(diskIndex);
+    window.localStorage.setItem('diskIndex',  JSON.stringify(diskIndex));
 
     driveLights.label(drive, name);
     driveLights.dirty(drive, false);
@@ -677,17 +668,17 @@ function saveLocalStorage(drive: DriveNumber, name: string) {
 }
 
 function deleteLocalStorage(name: string) {
-    const diskIndex = JSON.parse(window.localStorage.diskIndex || '{}') as LocalDiskIndex;
+    const diskIndex = JSON.parse(window.localStorage.getItem('diskIndex') || '{}') as LocalDiskIndex;
     if (diskIndex[name]) {
         delete diskIndex[name];
         openAlert('Deleted');
     }
-    window.localStorage.diskIndex = JSON.stringify(diskIndex);
+    window.localStorage.setItem('diskIndex',  JSON.stringify(diskIndex));
     updateLocalStorage();
 }
 
 function loadLocalStorage(drive: DriveNumber, name: string) {
-    const diskIndex = JSON.parse(window.localStorage.diskIndex || '{}') as LocalDiskIndex;
+    const diskIndex = JSON.parse(window.localStorage.getItem('diskIndex') || '{}') as LocalDiskIndex;
     if (diskIndex[name]) {
         _disk2.setJSON(drive, diskIndex[name]);
         driveLights.label(drive, name);
@@ -721,7 +712,7 @@ function buildDiskIndex() {
         if (file.e && !_e) {
             continue;
         }
-        if (cat != oldCat) {
+        if (cat !== oldCat) {
             option = document.createElement('option');
             option.value = cat;
             option.innerText = cat;
@@ -761,7 +752,7 @@ function processHash(hash: string) {
         if (file.indexOf('://') > 0) {
             const parts = file.split('.');
             const ext = parts[parts.length - 1].toLowerCase();
-            if (ext == 'json') {
+            if (ext === 'json') {
                 loadAjax(drive, file);
             } else {
                 doLoadHTTP(drive, file);
@@ -773,7 +764,7 @@ function processHash(hash: string) {
 }
 
 export function updateUI() {
-    if (document.location.hash != hashtag) {
+    if (document.location.hash !== hashtag) {
         hashtag = document.location.hash;
         const hash = hup();
         if (hash) {
@@ -852,7 +843,12 @@ function hup() {
         return results[1];
 }
 
-function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, printer: Printer, e: boolean) {
+function onLoaded(
+    apple2: Apple2,
+    disk2: DiskII,
+    massStorage: MassStorage<BlockFormat>,
+    printer: Printer, e: boolean
+) {
     _apple2 = apple2;
     cpu = _apple2.getCPU();
     io = _apple2.getIO();
@@ -865,16 +861,16 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
     _e = e;
 
     system = new System(io, e);
-    optionsModal.addOptions(system);
+    options.addOptions(system);
 
     joystick = new JoyStick(io);
-    optionsModal.addOptions(joystick);
+    options.addOptions(joystick);
 
     screen = new Screen(vm);
-    optionsModal.addOptions(screen);
+    options.addOptions(screen);
 
     audio = new Audio(io);
-    optionsModal.addOptions(audio);
+    options.addOptions(audio);
     initSoundToggle();
 
     ready = Promise.all([audio.ready, apple2.ready]);
@@ -884,14 +880,25 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
     keyboard = new KeyBoard(cpu, io, e);
     keyboard.create('#keyboard');
     keyboard.setFunction('F1', () => cpu.reset());
-    keyboard.setFunction('F2', screen.enterFullScreen);
+    keyboard.setFunction('F2', (event) => {
+        if (event.shiftKey) { // Full window, but not full screen
+            options.setOption(
+                SCREEN_FULL_PAGE,
+                !options.getOption(SCREEN_FULL_PAGE)
+            );
+        } else {
+            screen.enterFullScreen();
+        }
+    });
     keyboard.setFunction('F3', () => io.keyDown(0x1b)); // Escape
+    keyboard.setFunction('F4', optionsModal.openModal);
     keyboard.setFunction('F6', () => {
-        window.localStorage.state = base64_json_stringify(_apple2.getState());
+        window.localStorage.setItem('state', base64_json_stringify(_apple2.getState()));
     });
     keyboard.setFunction('F9', () => {
-        if (window.localStorage.state) {
-            _apple2.setState(base64_json_parse(window.localStorage.state));
+        const localState = window.localStorage.getItem('state');
+        if (localState) {
+            _apple2.setState(base64_json_parse(localState) as Apple2State);
         }
     });
 
@@ -901,15 +908,39 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
      * Input Handling
      */
 
-    window.addEventListener('paste', (event: Event) => {
+    const screenElement = document.querySelector('#screen')!;
+
+    const doPaste = (event: Event) => {
         const paste = (event.clipboardData || window.clipboardData)!.getData('text');
         io.setKeyBuffer(paste);
         event.preventDefault();
+    };
+
+    const doCopy = (event: Event) => {
+        event.clipboardData!.setData('text/plain', vm.getText());
+        event.preventDefault();
+    };
+
+    window.addEventListener('paste', (event: Event) => {
+        if (document.activeElement && document.activeElement !== document.body) {
+            return;
+        }
+        doPaste(event);
     });
 
     window.addEventListener('copy', (event: Event) => {
-        event.clipboardData!.setData('text/plain', vm.getText());
-        event.preventDefault();
+        if (document.activeElement && document.activeElement !== document.body) {
+            return;
+        }
+        doCopy(event);
+    });
+
+    screenElement.addEventListener('copy', (event: Event) => {
+        doCopy(event);
+    });
+
+    screenElement.addEventListener('paste', (event: Event) => {
+        doPaste(event);
     });
 
     if (navigator.standalone) {
@@ -949,7 +980,11 @@ function onLoaded(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, print
     );
 }
 
-export function initUI(apple2: Apple2, disk2: DiskII, massStorage: MassStorage, printer: Printer, e: boolean) {
+export function initUI(
+    apple2: Apple2,
+    disk2: DiskII,
+    massStorage: MassStorage<BlockFormat>,
+    printer: Printer, e: boolean) {
     window.addEventListener('load', () => {
         onLoaded(apple2, disk2, massStorage, printer, e);
     });
diff --git a/js/ui/audio.ts b/js/ui/audio.ts
index 1b8d684..ea2ac79 100644
--- a/js/ui/audio.ts
+++ b/js/ui/audio.ts
@@ -1,15 +1,4 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
-import { BOOLEAN_OPTION, OptionHandler } from './options_modal';
+import { BOOLEAN_OPTION, OptionHandler } from '../options';
 import Apple2IO from '../apple2io';
 import { debug } from '../util';
 
@@ -48,8 +37,8 @@ export class Audio implements OptionHandler {
         });
 
         if (window.AudioWorklet) {
-            this.ready = this.audioContext.audioWorklet.addModule('./dist/audio_worker.bundle.js');
-            this.ready
+            const workletReady = this.audioContext.audioWorklet.addModule('./dist/audio_worker.bundle.js');
+            this.ready = workletReady
                 .then(() => {
                     this.workletNode = new AudioWorkletNode(this.audioContext, 'audio_worker');
 
@@ -116,7 +105,7 @@ export class Audio implements OptionHandler {
                 console.warn('audio not started', error);
             });
         }
-    }
+    };
 
     start = () => {
         if (this.audioContext) {
@@ -125,11 +114,11 @@ export class Audio implements OptionHandler {
                 console.warn('audio not resumed', error);
             });
         }
-    }
+    };
 
     isEnabled = () => {
         return this.sound;
-    }
+    };
 
     getOptions() {
         return [
@@ -152,5 +141,5 @@ export class Audio implements OptionHandler {
             case SOUND_ENABLED_OPTION:
                 this.sound = value;
         }
-    }
+    };
 }
diff --git a/js/ui/audio_worker.ts b/js/ui/audio_worker.ts
index ff27599..2a7d110 100644
--- a/js/ui/audio_worker.ts
+++ b/js/ui/audio_worker.ts
@@ -1,14 +1,3 @@
-/* Copyright 2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 declare global {
     interface AudioWorkletProcessor {
         readonly port: MessagePort;
@@ -20,16 +9,20 @@ declare global {
         new(options?: AudioWorkletNodeOptions): AudioWorkletProcessor;
     };
 
-    function registerProcessor(name: string, ctor :{ new(): AudioWorkletProcessor; }): void
+    function registerProcessor(name: string, ctor :{ new(): AudioWorkletProcessor }): void;
+}
+
+export interface AppleAudioMessageEvent extends MessageEvent {
+    data: Float32Array;
 }
 
 export class AppleAudioProcessor extends AudioWorkletProcessor {
-    private samples: Float32Array[] = []
+    private samples: Float32Array[] = [];
 
     constructor() {
         super();
         console.info('AppleAudioProcessor constructor');
-        this.port.onmessage = (ev: MessageEvent) => {
+        this.port.onmessage = (ev: AppleAudioMessageEvent) => {
             this.samples.push(ev.data);
             if (this.samples.length > 256) {
                 this.samples.shift();
diff --git a/js/ui/drive_lights.ts b/js/ui/drive_lights.ts
index f189dcb..04399a9 100644
--- a/js/ui/drive_lights.ts
+++ b/js/ui/drive_lights.ts
@@ -3,11 +3,12 @@ import type { DriveNumber } from '../formats/types';
 
 export default class DriveLights implements Callbacks {
     public driveLight(drive: DriveNumber, on: boolean) {
-        const disk =
-            document.querySelector('#disk' + drive)! as HTMLElement;
-        disk.style.backgroundImage =
-            on ? 'url(css/red-on-16.png)' :
-                'url(css/red-off-16.png)';
+        const disk = document.querySelector<HTMLElement>(`#disk${drive}`);
+        if (disk) {
+            disk.style.backgroundImage =
+                on ? 'url(css/red-on-16.png)' :
+                    'url(css/red-off-16.png)';
+        }
     }
 
     public dirty(_drive: DriveNumber, _dirty: boolean) {
@@ -15,11 +16,15 @@ export default class DriveLights implements Callbacks {
     }
 
     public label(drive: DriveNumber, label?: string, side?: string) {
-        const labelElement =
-            document.querySelector('#disk-label' + drive)! as HTMLElement;
-        if (label) {
-            labelElement.innerText = label + (side ? ` - ${side}` : '');
+        const labelElement = document.querySelector<HTMLElement>(`#disk-label${drive}`);
+        let labelText = '';
+        if (labelElement) {
+            labelText = labelElement.innerText;
+            if (label) {
+                labelText = `${label || ''} ${(side ? `- ${side}` : '')}`;
+                labelElement.innerText = labelText;
+            }
         }
-        return labelElement.innerText;
+        return labelText;
     }
 }
diff --git a/js/ui/gamepad.ts b/js/ui/gamepad.ts
index e229113..3ef3d3b 100644
--- a/js/ui/gamepad.ts
+++ b/js/ui/gamepad.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import Apple2IO from '../apple2io';
 import { BUTTON, ButtonType, GamepadConfiguration } from './types';
 
@@ -69,7 +58,7 @@ export function processGamepad(io: Apple2IO) {
                 if (val <= 0) {
                     io.buttonDown(-val as 0 | 1 | 2);
                 } else {
-                    io.keyDown(gamepadMap[idx]!);
+                    io.keyDown(val);
                 }
             } else if (!pressed && old) {
                 if (val <= 0) {
diff --git a/js/ui/joystick.ts b/js/ui/joystick.ts
index 948f689..0ee109d 100644
--- a/js/ui/joystick.ts
+++ b/js/ui/joystick.ts
@@ -1,11 +1,17 @@
 import Apple2IO from '../apple2io';
-import { BOOLEAN_OPTION, OptionHandler } from './options_modal';
+import { BOOLEAN_OPTION, OptionHandler } from '../options';
 
 const JOYSTICK_DISABLE = 'disable_mouse';
 const JOYSTICK_FLIP_X_AXIS = 'flip_x';
 const JOYSTICK_FLIP_Y_AXIS = 'flip_y';
 const JOYSTICK_SWAP_AXIS = 'swap_x_y';
 
+let mouseMode = false;
+
+export function enableMouseMode(on: boolean) {
+    mouseMode = on;
+}
+
 export class JoyStick implements OptionHandler {
     private disableMouseJoystick = false;
     private flipX = false;
@@ -17,14 +23,14 @@ export class JoyStick implements OptionHandler {
         document.addEventListener('mousemove', this.mousemove);
         document.querySelectorAll('canvas').forEach((canvas) => {
             canvas.addEventListener('mousedown', (evt) => {
-                if (!this.gamepad) {
-                    io.buttonDown(evt.which == 1 ? 0 : 1);
+                if (!this.gamepad && !mouseMode) {
+                    io.buttonDown(evt.which === 1 ? 0 : 1);
                 }
                 evt.preventDefault();
             });
             canvas.addEventListener('mouseup', (evt) => {
-                if (!this.gamepad) {
-                    io.buttonUp(evt.which == 1 ? 0 : 1);
+                if (!this.gamepad && !mouseMode) {
+                    io.buttonUp(evt.which === 1 ? 0 : 1);
                 }
             });
             canvas.addEventListener('contextmenu', (evt) => {
@@ -83,11 +89,11 @@ export class JoyStick implements OptionHandler {
     }
 
     private mousemove = (evt: MouseEvent) => {
-        if (this.gamepad || this.disableMouseJoystick) {
+        if (this.gamepad || this.disableMouseJoystick || mouseMode) {
             return;
         }
 
-        const s = document.querySelector<HTMLDivElement>('#screen')!;
+        const s = document.querySelector<HTMLDivElement>('canvas')!;
         const offset = s.getBoundingClientRect();
         let x = (evt.pageX - offset.left) / s.clientWidth;
         let y = (evt.pageY - offset.top) / s.clientHeight;
@@ -100,5 +106,5 @@ export class JoyStick implements OptionHandler {
 
         this.io.paddle(0, this.flipX ? 1 - x : x);
         this.io.paddle(1, this.flipY ? 1 - y : y);
-    }
+    };
 }
diff --git a/js/ui/keyboard.ts b/js/ui/keyboard.ts
index 4bbd676..b715060 100644
--- a/js/ui/keyboard.ts
+++ b/js/ui/keyboard.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { byte, DeepMemberOf, KnownKeys } from '../types';
 import Apple2IO from '../apple2io';
 import CPU6502 from '../cpu6502';
@@ -213,7 +202,7 @@ type Key2e = DeepMemberOf<typeof keys2e>;
 
 type Key = Key2 | Key2e;
 
-type KeyFunction = (key: KeyboardEvent) => void
+type KeyFunction = (key: KeyboardEvent) => void;
 
 export default class KeyBoard {
     private kb: HTMLElement;
@@ -251,7 +240,7 @@ export default class KeyBoard {
         } else if (isKeyboardCode(code)) {
             key = keymap[code][evt.shiftKey ? 2 : (evt.ctrlKey ? 1 : 0)];
 
-            if (code != 20 && this.capslockKeyUsed) {
+            if (code !== 20 && this.capslockKeyUsed) {
                 this.capslockKey(evt.getModifierState('CapsLock'));
             }
 
@@ -262,7 +251,7 @@ export default class KeyBoard {
             debug('Unhandled key = ' + toHex(code));
         }
 
-        if (key == 0x7F && evt.shiftKey && evt.ctrlKey) {
+        if (key === 0x7F && evt.shiftKey && evt.ctrlKey) {
             this.cpu.reset();
             key = 0xff;
         }
@@ -332,7 +321,7 @@ export default class KeyBoard {
     capslockKey(down?: boolean | undefined) {
         const capsLock = this.kb.querySelector('.key-LOCK');
 
-        if (arguments.length == 0) {
+        if (arguments.length === 0) {
             if (this.capslockKeyUsed) {
                 this.capslocked = !this.capslocked;
             } else {
@@ -365,7 +354,7 @@ export default class KeyBoard {
         const buildLabel = (k: string) => {
             const span = document.createElement('span');
             span.innerHTML = k;
-            if (k.length > 1 && k.substr(0, 1) != '&')
+            if (k.length > 1 && k.slice(0, 1) !== '&')
                 span.classList.add('small');
             return span;
         };
@@ -373,7 +362,7 @@ export default class KeyBoard {
         for (y = 0; y < 5; y++) {
             row = document.createElement('div');
             row.classList.add('row');
-            row.classList.add('row' + y);
+            row.classList.add(`row${y}`);
             this.kb.append(row);
             for (x = 0; x < this.keys[0][y].length; x++) {
                 const key1 = this.keys[0][y][x];
@@ -388,17 +377,17 @@ export default class KeyBoard {
                 key.classList.add('key-' + key1.replace(/[&#;]/g, ''));
 
                 if (key1.length > 1) {
-                    if (key1 == 'LOCK')
+                    if (key1 === 'LOCK')
                         key.classList.add('v-center2');
                     else
                         key.classList.add('v-center');
                 }
-                if (key1 != key2) {
+                if (key1 !== key2) {
                     key.classList.add('key-' + key2.replace(/[&;]/g, ''));
                     label.append(label2);
                     label.append(document.createElement('br'));
                 }
-                if (key1 == 'LOCK') {
+                if (key1 === 'LOCK') {
                     key.classList.add('active');
                 }
 
@@ -548,7 +537,7 @@ export default class KeyBoard {
             }
         }
 
-    }
+    };
 
     private keyup = (evt: KeyboardEvent) => {
         if (!this.dialogOpen()) {
@@ -568,5 +557,5 @@ export default class KeyBoard {
                 this.optionKey(false);
             }
         }
-    }
+    };
 }
diff --git a/js/ui/mouse.ts b/js/ui/mouse.ts
new file mode 100644
index 0000000..fdcc3ef
--- /dev/null
+++ b/js/ui/mouse.ts
@@ -0,0 +1,99 @@
+import type Mouse from '../cards/mouse';
+import { enableMouseMode } from './joystick';
+
+type TouchEventWithTarget = TouchEvent & { target: HTMLCanvasElement };
+
+export class MouseUI {
+    private mouse: Mouse;
+
+    constructor(private canvas: HTMLCanvasElement)  {
+        const updateTouchXY = (event: TouchEventWithTarget) => {
+            const { targetTouches, target } = event;
+            if (targetTouches.length < 1) {
+                return;
+            }
+            const rect = target.getBoundingClientRect();
+            const leftPad = (rect.width - 560) / 2 + rect.left;
+            const topPad = (rect.height - 384) / 2 + rect.top;
+            const { clientX, clientY } = targetTouches[0];
+            const xPos = clientX - leftPad;
+            const yPos = clientY - topPad;
+            this.mouse.setMouseXY(
+                Math.max(Math.min(xPos, 559), 0),
+                Math.max(Math.min(yPos, 383), 0),
+                560,
+                384,
+            );
+        };
+
+        if ('ontouchstart' in window) {
+            this.canvas.addEventListener(
+                'touchmove',
+                (event: TouchEventWithTarget) => {
+                    updateTouchXY(event);
+                }
+            );
+
+            this.canvas.addEventListener(
+                'touchstart',
+                (event: TouchEventWithTarget) => {
+                    updateTouchXY(event);
+                    // Make sure the mouse down is processed in a different
+                    // pass as the move, so that a simple tap isn't treated like
+                    // a drag.
+                    setTimeout(() => this.mouse.setMouseDown(true), 100);
+                }
+            );
+
+            this.canvas.addEventListener(
+                'touchend',
+                (event: TouchEventWithTarget) => {
+                    updateTouchXY(event);
+                    this.mouse.setMouseDown(false);
+                }
+            );
+
+            this.canvas.addEventListener(
+                'touchcancel',
+                (event: TouchEventWithTarget) => {
+                    updateTouchXY(event);
+                    this.mouse.setMouseDown(false);
+                }
+            );
+        } else {
+            this.canvas.addEventListener(
+                'mousemove',
+                (event: MouseEvent & { target: HTMLCanvasElement} ) => {
+                    const { offsetX, offsetY, target } = event;
+                    this.mouse.setMouseXY(
+                        offsetX,
+                        offsetY,
+                        target.clientWidth,
+                        target.clientHeight
+                    );
+                }
+            );
+
+            this.canvas.addEventListener('mousedown', () => {
+                this.mouse.setMouseDown(true);
+            });
+
+            this.canvas.addEventListener('mouseup', () => {
+                this.mouse.setMouseDown(false);
+            });
+        }
+    }
+
+    setMouse = (mouse: Mouse) => {
+        this.mouse = mouse;
+    };
+
+    mouseMode = (on: boolean) => {
+        enableMouseMode(on);
+        if (on) {
+            this.canvas.classList.add('mouseMode');
+        } else {
+            this.canvas.classList.remove('mouseMode');
+        }
+    };
+}
diff --git a/js/ui/options_modal.ts b/js/ui/options_modal.ts
index 9ec4768..410a678 100644
--- a/js/ui/options_modal.ts
+++ b/js/ui/options_modal.ts
@@ -1,95 +1,19 @@
-import Prefs from '../prefs';
 import MicroModal from 'micromodal';
-
-export const BOOLEAN_OPTION = 'BOOLEAN_OPTION';
-export const SELECT_OPTION = 'SELECT_OPTION';
-
-export interface Option {
-    name: string
-    label: string
-    type: string
-    defaultVal: string | boolean
-}
-
-export interface BooleanOption extends Option {
-    type: typeof BOOLEAN_OPTION
-    defaultVal: boolean
-}
-
-export interface SelectOption extends Option {
-    type: typeof SELECT_OPTION
-    defaultVal: string
-    values: Array<{name: string, value: string}>
-}
-
-export interface OptionSection {
-    name: string
-    options: Option[]
-}
-
-export interface OptionHandler {
-    getOptions: () => OptionSection[]
-    setOption: (name: string, value: string | boolean) => void
-}
+import {
+    BOOLEAN_OPTION,
+    SELECT_OPTION,
+    Options,
+    SelectOption
+} from '../options';
 
 export class OptionsModal {
-    private prefs: Prefs = new Prefs();
-    private options: Record<string, Option> = {}
-    private handlers: Record<string, OptionHandler> = {}
-    private sections: OptionSection[] = []
+    constructor(private options: Options) {}
 
-    addOptions(handler: OptionHandler) {
-        const sections = handler.getOptions();
-        for (const section of sections) {
-            const { options } = section;
-            for (const option of options) {
-                const { name } = option;
-                this.handlers[name] = handler;
-                this.options[name] = option;
-                const value = this.getOption(name);
-                if (value != null) {
-                    handler.setOption(name, value);
-                }
-            }
-            this.sections.push(section);
-        }
-    }
-
-    getOption(name: string): string | boolean | undefined {
-        const option = this.options[name];
-        if (option) {
-            const { name, defaultVal, type } = option;
-            const stringVal = String(defaultVal);
-            const prefVal = this.prefs.readPref(name, stringVal);
-            switch (type) {
-                case BOOLEAN_OPTION:
-                    return prefVal === 'true';
-                default:
-                    return prefVal;
-            }
-        }
-    }
-
-    setOption(name: string, value: string | boolean) {
-        if (name in this.options) {
-            const handler = this.handlers[name];
-            const option = this.options[name];
-            this.prefs.writePref(name, String(value));
-            switch (option.type) {
-                case BOOLEAN_OPTION:
-                    handler.setOption(name, Boolean(value));
-                    break;
-                default:
-                    handler.setOption(name, String(value));
-            }
-        }
-    }
-
-    openModal() {
+    openModal = () => {
         const content = document.querySelector('#options-modal-content');
         if (content) {
             content.innerHTML = '';
-            for (const section of this.sections) {
+            for (const section of this.options.getSections()) {
                 const { name, options } = section;
 
                 // Section header
@@ -100,17 +24,15 @@ export class OptionsModal {
                 // Preferences
                 const list = document.createElement('ul');
                 for (const option of options) {
-                    const { name, label, defaultVal, type } = option;
-                    const onChange = (evt: InputEvent) => {
-                        if (evt.target) {
-                            const inputElement = evt.target as HTMLInputElement;
-                            switch (type) {
-                                case BOOLEAN_OPTION:
-                                    this.setOption(name, inputElement.checked);
-                                    break;
-                                default:
-                                    this.setOption(name, inputElement.value);
-                            }
+                    const { name, label, type } = option;
+                    const onChange = (evt: InputEvent & { target: HTMLInputElement }) => {
+                        const { target } = evt;
+                        switch (type) {
+                            case BOOLEAN_OPTION:
+                                this.options.setOption(name, target.checked);
+                                break;
+                            default:
+                                this.options.setOption(name, target.value);
                         }
                     };
 
@@ -121,7 +43,7 @@ export class OptionsModal {
                         case BOOLEAN_OPTION:
                             {
                                 const inputElement = document.createElement('input');
-                                const checked = this.prefs.readPref(name, String(defaultVal)) === 'true';
+                                const checked = this.options.getOption(name) as boolean;
                                 inputElement.setAttribute('type', 'checkbox');
                                 inputElement.checked = checked;
                                 element = inputElement;
@@ -131,7 +53,7 @@ export class OptionsModal {
                             {
                                 const selectOption = option as SelectOption;
                                 const selectElement = document.createElement('select');
-                                const selected = this.prefs.readPref(name, String(defaultVal));
+                                const selected = this.options.getOption(name) as string;
                                 for (const value of selectOption.values) {
                                     const optionElement = document.createElement('option');
                                     optionElement.value = value.value;
@@ -145,7 +67,7 @@ export class OptionsModal {
                         default:
                         {
                             const inputElement = document.createElement('input');
-                            const value = this.prefs.readPref(name, String(defaultVal));
+                            const value = this.options.getOption(name) as string;
                             inputElement.value = value;
                             element = inputElement;
                         }
@@ -170,5 +92,5 @@ export class OptionsModal {
             console.error('Cannot find target div#options-modal-content');
         }
         MicroModal.show('options-modal');
-    }
+    };
 }
diff --git a/js/ui/printer.ts b/js/ui/printer.ts
index f329c39..d7ec3c2 100644
--- a/js/ui/printer.ts
+++ b/js/ui/printer.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { byte } from '../types';
 
 /**
diff --git a/js/ui/screen.ts b/js/ui/screen.ts
index 9dfc599..c7e1754 100644
--- a/js/ui/screen.ts
+++ b/js/ui/screen.ts
@@ -1,48 +1,39 @@
 import { VideoModes } from '../videomodes';
-import { BOOLEAN_OPTION, OptionHandler } from './options_modal';
+import { BOOLEAN_OPTION, OptionHandler } from '../options';
 
-const SCREEN_MONO = 'mono_screen';
-const SCREEN_SCANLINE = 'show_scanlines';
-const SCREEN_GL = 'gl_canvas';
+export const SCREEN_MONO = 'mono_screen';
+export const SCREEN_FULL_PAGE = 'full_page';
+export const SCREEN_SCANLINE = 'show_scanlines';
+export const SCREEN_GL = 'gl_canvas';
 
 declare global {
     interface Document {
         webkitCancelFullScreen: () => void;
         webkitIsFullScreen: boolean;
-        mozCancelFullScreen: () => void;
-        mozIsFullScreen: boolean;
     }
     interface Element {
-        webkitRequestFullScreen: (options?: any) => void;
-        mozRequestFullScreen: () => void;
+        webkitRequestFullScreen: (options?: unknown) => void;
     }
 }
 export class Screen implements OptionHandler {
     constructor(private vm: VideoModes) {}
 
-    enterFullScreen = (evt: KeyboardEvent) => {
+    enterFullScreen = () => {
         const elem = document.getElementById('screen')!;
-        if (evt.shiftKey) { // Full window, but not full screen
-            document.body.classList.toggle('full-page');
-        } else if (document.webkitCancelFullScreen) {
+        if (document.fullscreenEnabled) {
+            if (document.fullscreenElement) {
+                void document.exitFullscreen();
+            } else {
+                void elem.requestFullscreen();
+            }
+        } else if (elem.webkitRequestFullScreen) {
             if (document.webkitIsFullScreen) {
                 document.webkitCancelFullScreen();
             } else {
-                const allowKeyboardInput = (Element as any).ALLOW_KEYBOARD_INPUT;
-                if (allowKeyboardInput) {
-                    elem.webkitRequestFullScreen(allowKeyboardInput);
-                } else {
-                    elem.webkitRequestFullScreen();
-                }
-            }
-        } else if (document.mozCancelFullScreen) {
-            if (document.mozIsFullScreen) {
-                document.mozCancelFullScreen();
-            } else {
-                elem.mozRequestFullScreen();
+                elem.webkitRequestFullScreen();
             }
         }
-    }
+    };
 
     getOptions() {
         return [
@@ -61,6 +52,12 @@ export class Screen implements OptionHandler {
                         type: BOOLEAN_OPTION,
                         defaultVal: false,
                     },
+                    {
+                        name: SCREEN_FULL_PAGE,
+                        label: 'Full Page',
+                        type: BOOLEAN_OPTION,
+                        defaultVal: false,
+                    },
                     {
                         name: SCREEN_GL,
                         label: 'GL Renderer *',
@@ -77,9 +74,20 @@ export class Screen implements OptionHandler {
             case SCREEN_MONO:
                 this.vm.mono(value);
                 break;
+            case SCREEN_FULL_PAGE:
+                this.setFullPage(value);
+                break;
             case SCREEN_SCANLINE:
                 this.vm.scanlines(value);
                 break;
         }
     }
+
+    private setFullPage(on: boolean) {
+        if (on) {
+            document.body.classList.add('full-page');
+        } else {
+            document.body.classList.remove('full-page');
+        }
+    }
 }
diff --git a/js/ui/system.ts b/js/ui/system.ts
index ed3ea8d..d0116d7 100644
--- a/js/ui/system.ts
+++ b/js/ui/system.ts
@@ -1,9 +1,9 @@
-import { BOOLEAN_OPTION, SELECT_OPTION, OptionHandler } from './options_modal';
+import { BOOLEAN_OPTION, SELECT_OPTION, OptionHandler } from '../options';
 import Apple2IO from '../apple2io';
 
-const SYSTEM_TYPE_APPLE2E = 'computer_type2e';
-const SYSTEM_TYPE_APPLE2 = 'computer_type2';
-const SYSTEM_CPU_ACCELERATED = 'accelerator_toggle';
+export const SYSTEM_TYPE_APPLE2E = 'computer_type2e';
+export const SYSTEM_TYPE_APPLE2 = 'computer_type2';
+export const SYSTEM_CPU_ACCELERATED = 'accelerator_toggle';
 
 export class System implements OptionHandler {
     constructor(private io: Apple2IO, private e: boolean) {}
diff --git a/js/ui/tape.ts b/js/ui/tape.ts
index ee8d914..c3ff4aa 100644
--- a/js/ui/tape.ts
+++ b/js/ui/tape.ts
@@ -1,15 +1,4 @@
 
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { TapeData } from '../types';
 import Apple2IO from '../apple2io';
 import { debug } from '../util';
@@ -43,13 +32,13 @@ export default class Tape {
                 let old = (datum > 0.0), current;
                 let last = 0;
                 let delta: number;
-                debug('Sample Count: ' + data.length);
-                debug('Sample rate: ' + buffer.sampleRate);
+                debug(`Sample Count: ${data.length}`);
+                debug(`Sample rate: ${buffer.sampleRate}`);
                 for (let idx = 1; idx < data.length; idx++) {
                     datum = data[idx];
                     if ((datum > 0.1) || (datum < -0.1)) {
                         current = (datum > 0.0);
-                        if (current != old) {
+                        if (current !== old) {
                             delta = idx - last;
                             if (delta > 2000000) {
                                 delta = 2000000;
@@ -76,7 +65,7 @@ export default class Tape {
                 if (done) {
                     done();
                 }
-            }, function (error) {
+            }, (error: Error) => {
                 window.alert(error.message);
             });
         };
diff --git a/js/ui/types.ts b/js/ui/types.ts
index bf5345a..37f4f15 100644
--- a/js/ui/types.ts
+++ b/js/ui/types.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import type { KnownKeys } from '../types';
 
 export const BUTTON = {
diff --git a/js/util.ts b/js/util.ts
index dbcf93a..70a3cce 100644
--- a/js/util.ts
+++ b/js/util.ts
@@ -1,14 +1,3 @@
-/* Copyright 2010-2019 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided ' as is'  without express or
- * implied warranty.
- */
-
 import { byte, memory, word } from './types';
 
 /*eslint no-console: 0*/
@@ -55,9 +44,20 @@ export function bytify(ary: number[]): memory {
     return new Uint8Array(ary);
 }
 
+/** Returns a new Uint8Array with the concatenated data from the inputs. */
+export function concat(...arys: Array<byte[] | Uint8Array>) {
+    const result = new Uint8Array(arys.reduce((l, ary) => l + ary.length, 0));
+    let offset = 0;
+    for (let i = 0; i < arys.length; i++) {
+        result.set(arys[i], offset);
+        offset += arys[i].length;
+    }
+    return result;
+}
+
 /** Writes to the console. */
-export function debug(...args: any[]): void {
-    console.log.apply(console, args);
+export function debug(...args: unknown[]): void {
+    console.log(...args);
 }
 
 /**
@@ -90,13 +90,3 @@ export function toBinary(v: byte) {
     }
     return result;
 }
-
-/** Packs a 32-bit integer into a string in little-endian order. */
-export function numToString(num: number) {
-    let result = '';
-    for (let idx = 0; idx < 4; idx++) {
-        result += String.fromCharCode(num & 0xff);
-        num >>= 8;
-    }
-    return result;
-}
diff --git a/js/videomodes.ts b/js/videomodes.ts
index 883223d..7a5a7a9 100644
--- a/js/videomodes.ts
+++ b/js/videomodes.ts
@@ -4,10 +4,10 @@ export type bank = 0 | 1;
 export type pageNo = 1 | 2;
 
 export interface Region {
-    top: number,
-    bottom: number,
-    left: number,
-    right: number,
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
 }
 
 export interface GraphicsState {
@@ -15,30 +15,30 @@ export interface GraphicsState {
 }
 
 export interface VideoModesState {
-    grs: [gr1: GraphicsState, gr2: GraphicsState],
-    hgrs: [hgr1: GraphicsState, hgr2: GraphicsState],
-    textMode: boolean,
-    mixedMode: boolean,
-    hiresMode: boolean,
-    pageMode: pageNo,
-    _80colMode: boolean,
-    altCharMode: boolean,
-    an3State: boolean,
-    flag: number,
+    grs: [gr1: GraphicsState, gr2: GraphicsState];
+    hgrs: [hgr1: GraphicsState, hgr2: GraphicsState];
+    textMode: boolean;
+    mixedMode: boolean;
+    hiresMode: boolean;
+    pageMode: pageNo;
+    _80colMode: boolean;
+    altCharMode: boolean;
+    an3State: boolean;
+    flag: number;
 }
 
 export interface VideoPage extends MemoryPages, Restorable<GraphicsState> {
-    imageData: ImageData
+    imageData: ImageData;
     dirty: Region;
 
-    bank0(): MemoryPages
-    bank1(): MemoryPages
+    bank0(): MemoryPages;
+    bank1(): MemoryPages;
 
-    refresh: () => void
+    refresh: () => void;
 }
 
 export interface LoresPage extends VideoPage {
-    getText: () => string
+    getText: () => string;
 }
 
 export interface HiresPage extends VideoPage {
@@ -46,49 +46,51 @@ export interface HiresPage extends VideoPage {
 }
 
 export interface VideoModes extends Restorable<VideoModesState> {
-    textMode: boolean
-    mixedMode: boolean
-    hiresMode: boolean
-    pageMode: pageNo
-    _80colMode: boolean
-    altCharMode: boolean
-    an3State: boolean
-    doubleHiresMode: boolean
+    textMode: boolean;
+    mixedMode: boolean;
+    hiresMode: boolean;
+    pageMode: pageNo;
+    _80colMode: boolean;
+    altCharMode: boolean;
+    an3State: boolean;
+    doubleHiresMode: boolean;
 
-    flag: number
-    monoMode: boolean
+    flag: number;
+    monoMode: boolean;
 
     context: CanvasRenderingContext2D;
 
-    page(pageNo: number): void
+    page(pageNo: number): void;
 
-    blit(altData?: ImageData): boolean
+    blit(altData?: ImageData): boolean;
 
-    reset(): void
+    reset(): void;
 
-    setLoresPage(page: pageNo, lores: LoresPage): void
-    setHiresPage(page: pageNo, lores: HiresPage): void
+    setLoresPage(page: pageNo, lores: LoresPage): void;
+    getLoresPage(page: pageNo): LoresPage;
+    setHiresPage(page: pageNo, lores: HiresPage): void;
+    getHiresPage(page: pageNo): HiresPage;
 
-    _80col(on: boolean): void
-    altChar(on: boolean): void
-    an3(on: boolean): void
-    doubleHires(on: boolean): void
-    hires(on: boolean): void
-    mixed(on: boolean): void
-    text(on: boolean): void
+    _80col(on: boolean): void;
+    altChar(on: boolean): void;
+    an3(on: boolean): void;
+    doubleHires(on: boolean): void;
+    hires(on: boolean): void;
+    mixed(on: boolean): void;
+    text(on: boolean): void;
 
-    is80Col(): boolean
-    isAltChar(): boolean
-    isDoubleHires(): boolean
-    isHires(): boolean
-    isMixed(): boolean
-    isPage2(): boolean
-    isText(): boolean
+    is80Col(): boolean;
+    isAltChar(): boolean;
+    isDoubleHires(): boolean;
+    isHires(): boolean;
+    isMixed(): boolean;
+    isPage2(): boolean;
+    isText(): boolean;
 
-    mono(on: boolean): void
-    scanlines(on: boolean): void
+    mono(on: boolean): void;
+    scanlines(on: boolean): void;
 
-    getText(): string
+    getText(): string;
 
-    ready: Promise<void>
+    ready: Promise<void>;
 }
diff --git a/json/disks/index.js b/json/disks/index.js
index 730950b..8835aa3 100644
--- a/json/disks/index.js
+++ b/json/disks/index.js
@@ -1390,6 +1390,10 @@ disk_index = [
     "filename": "json/disks/videoterm.json",
     "e": true,
     "name": "VideoTerm Utilities",
+  },
+  {
+    "filename": "json/disks/audit.json",
+    "name": "Apple II Audit",
     "category": "Utility"
   }
 ];
\ No newline at end of file
diff --git a/json/disks/index.json b/json/disks/index.json
new file mode 100644
index 0000000..5e00a0c
--- /dev/null
+++ b/json/disks/index.json
@@ -0,0 +1,27 @@
+[
+  {
+    "filename": "json/disks/blank_dos33.json",
+    "name": "Blank DOS 3.3",
+    "category": "Blank"
+  },
+  {
+    "filename": "json/disks/blank_prodos.json",
+    "name": "Blank ProDOS",
+    "category": "Blank"
+  },
+  {
+    "filename": "json/disks/dos33master.json",
+    "name": "DOS 3.3 Master",
+    "category": "System"
+  },
+  {
+    "filename": "json/disks/prodos.json",
+    "name": "ProDOS",
+    "category": "System"
+  },
+  {
+    "filename": "json/disks/audit.json",
+    "name": "Apple II Audit",
+    "category": "Utility"
+  }
+]
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index e9bad39..4261b5d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5,52 +5,72 @@
   "requires": true,
   "packages": {
     "": {
+      "name": "apple2js",
       "version": "0.0.1",
       "license": "MIT",
       "dependencies": {
-        "apple2shader": "0.0.3",
-        "micromodal": "^0.4.2"
+        "apple2shader": "0.0.4",
+        "classnames": "^2.3.1",
+        "micromodal": "^0.4.2",
+        "preact": "^10.7.1"
       },
       "devDependencies": {
         "@babel/core": "^7.9.0",
+        "@babel/plugin-transform-react-jsx": "^7.17.3",
         "@babel/preset-env": "^7.9.0",
+        "@babel/preset-typescript": "^7.16.7",
         "@testing-library/dom": "^7.30.3",
+        "@testing-library/jest-dom": "^5.16.4",
+        "@testing-library/preact": "^3.0.1",
         "@testing-library/user-event": "^13.1.3",
         "@types/jest": "^27.0.2",
         "@types/jest-image-snapshot": "^4.3.1",
         "@types/micromodal": "^0.3.2",
-        "@typescript-eslint/eslint-plugin": "^4.28.2",
-        "@typescript-eslint/parser": "^4.28.2",
+        "@types/wicg-file-system-access": "^2020.9.5",
+        "@typescript-eslint/eslint-plugin": "^5.27.0",
+        "@typescript-eslint/parser": "^5.27.0",
         "ajv": "^6.12.0",
         "babel-jest": "^27.2.4",
-        "canvas": "^2.7.0",
-        "eslint": "^7.22.0",
+        "canvas": "^2.8.0",
+        "css-loader": "^6.7.1",
+        "eslint": "^8.17.0",
+        "eslint-plugin-jest": "^26.4.3",
+        "eslint-plugin-react": "^7.30.0",
+        "eslint-plugin-react-hooks": "^4.5.0",
         "file-loader": "^6.0.0",
+        "identity-obj-proxy": "^3.0.0",
         "jest": "^27.2.4",
         "jest-image-snapshot": "^4.5.1",
-        "node-forge": "^0.10.0",
+        "node-forge": "^1.3.0",
         "raw-loader": "^4.0.0",
         "rimraf": "^3.0.2",
+        "style-loader": "^3.3.1",
+        "stylelint": "^14.9.1",
+        "stylelint-config-css-modules": "^4.1.0",
+        "stylelint-config-standard": "^26.0.0",
         "ts-jest": "^27.0.5",
-        "ts-loader": "^8.0.15",
-        "typescript": "^4.1.3",
+        "ts-loader": "^9.3.0",
+        "typescript": "^4.7.3",
         "webpack": "^5.28.0",
-        "webpack-cli": "^4.5.0",
-        "webpack-dev-server": "^4.0.0-beta.3",
+        "webpack-cli": "^4.9.1",
+        "webpack-dev-server": "^4.6.0",
         "webpack-merge": "^5.8.0",
         "y18n": "^4.0.1"
       },
       "engines": {
-        "node": ">= 6"
+        "node": ">= 14"
       }
     },
     "node_modules/@babel/code-frame": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
-      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
+      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
       "dev": true,
       "dependencies": {
-        "@babel/highlight": "^7.12.13"
+        "@babel/highlight": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/compat-data": {
@@ -91,23 +111,29 @@
       }
     },
     "node_modules/@babel/generator": {
-      "version": "7.13.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz",
-      "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.10.tgz",
+      "integrity": "sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.13.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/types": "^7.17.10",
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "jsesc": "^2.5.1"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-annotate-as-pure": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
-      "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
+      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -136,16 +162,21 @@
       }
     },
     "node_modules/@babel/helper-create-class-features-plugin": {
-      "version": "7.13.11",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz",
-      "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
+      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-function-name": "^7.12.13",
-        "@babel/helper-member-expression-to-functions": "^7.13.0",
-        "@babel/helper-optimise-call-expression": "^7.12.13",
-        "@babel/helper-replace-supers": "^7.13.0",
-        "@babel/helper-split-export-declaration": "^7.12.13"
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-member-expression-to-functions": "^7.17.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/helper-replace-supers": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0"
@@ -183,6 +214,18 @@
         "@babel/core": "^7.4.0-0"
       }
     },
+    "node_modules/@babel/helper-environment-visitor": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
+      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
+      "dev": true,
+      "dependencies": {
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/helper-explode-assignable-expression": {
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz",
@@ -193,51 +236,52 @@
       }
     },
     "node_modules/@babel/helper-function-name": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
-      "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
+      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-get-function-arity": "^7.12.13",
-        "@babel/template": "^7.12.13",
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "node_modules/@babel/helper-get-function-arity": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
-      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-      "dev": true,
-      "dependencies": {
-        "@babel/types": "^7.12.13"
+        "@babel/template": "^7.16.7",
+        "@babel/types": "^7.17.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-hoist-variables": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.0.tgz",
-      "integrity": "sha512-0kBzvXiIKfsCA0y6cFEIJf4OdzfpRuNk4+YTeHZpGGc666SATFKTz6sRncwFnQk7/ugJ4dSrCj6iJuvW4Qwr2g==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
+      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
       "dev": true,
       "dependencies": {
-        "@babel/traverse": "^7.13.0",
-        "@babel/types": "^7.13.0"
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-member-expression-to-functions": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
-      "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+      "version": "7.17.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
+      "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.13.12"
+        "@babel/types": "^7.17.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-imports": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
-      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.13.12"
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-module-transforms": {
@@ -257,18 +301,21 @@
       }
     },
     "node_modules/@babel/helper-optimise-call-expression": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
-      "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
+      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
       "dev": true,
       "engines": {
         "node": ">=6.9.0"
@@ -286,15 +333,19 @@
       }
     },
     "node_modules/@babel/helper-replace-supers": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
-      "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
+      "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-member-expression-to-functions": "^7.13.12",
-        "@babel/helper-optimise-call-expression": "^7.12.13",
-        "@babel/traverse": "^7.13.0",
-        "@babel/types": "^7.13.12"
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-member-expression-to-functions": "^7.16.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-simple-access": {
@@ -316,25 +367,34 @@
       }
     },
     "node_modules/@babel/helper-split-export-declaration": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
-      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
+      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
       "dev": true,
       "dependencies": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/helper-validator-identifier": {
-      "version": "7.12.11",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
-      "dev": true
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/@babel/helper-validator-option": {
-      "version": "7.12.17",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
-      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==",
-      "dev": true
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
+      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.9.0"
+      }
     },
     "node_modules/@babel/helper-wrap-function": {
       "version": "7.13.0",
@@ -360,20 +420,23 @@
       }
     },
     "node_modules/@babel/highlight": {
-      "version": "7.13.10",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz",
-      "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
+      "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
+        "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/parser": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.12.tgz",
-      "integrity": "sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz",
+      "integrity": "sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==",
       "dev": true,
       "bin": {
         "parser": "bin/babel-parser.js"
@@ -657,6 +720,21 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-syntax-jsx": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
+      "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -742,12 +820,12 @@
       }
     },
     "node_modules/@babel/plugin-syntax-typescript": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz",
-      "integrity": "sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.10.tgz",
+      "integrity": "sha512-xJefea1DWXW09pW4Tm9bjwVlPDyYA2it3fWlmEjpYz6alPvTUjL0EOzNzI/FEOyI3r4/J7uVH5UqKgl1TQ5hqQ==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.16.7"
       },
       "engines": {
         "node": ">=6.9.0"
@@ -1054,6 +1132,25 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-react-jsx": {
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz",
+      "integrity": "sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.16.7",
+        "@babel/types": "^7.17.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-regenerator": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.13.tgz",
@@ -1139,6 +1236,23 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-typescript": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz",
+      "integrity": "sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-typescript": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-unicode-escapes": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
@@ -1260,6 +1374,23 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/preset-typescript": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz",
+      "integrity": "sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-transform-typescript": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/runtime": {
       "version": "7.13.10",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
@@ -1280,42 +1411,51 @@
       }
     },
     "node_modules/@babel/template": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
-      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
+      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/parser": "^7.12.13",
-        "@babel/types": "^7.12.13"
+        "@babel/code-frame": "^7.16.7",
+        "@babel/parser": "^7.16.7",
+        "@babel/types": "^7.16.7"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/traverse": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
-      "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz",
+      "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/generator": "^7.13.0",
-        "@babel/helper-function-name": "^7.12.13",
-        "@babel/helper-split-export-declaration": "^7.12.13",
-        "@babel/parser": "^7.13.0",
-        "@babel/types": "^7.13.0",
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.17.10",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/parser": "^7.17.10",
+        "@babel/types": "^7.17.10",
         "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.19"
+        "globals": "^11.1.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@babel/types": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.12.tgz",
-      "integrity": "sha512-K4nY2xFN4QMvQwkQ+zmBDp6ANMbVNw6BbxWmYA4qNjhR9W+Lj/8ky5MEY2Me5r+B2c6/v6F53oMndG+f9s3IiA==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz",
+      "integrity": "sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==",
       "dev": true,
       "dependencies": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
+        "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6.9.0"
       }
     },
     "node_modules/@bcoe/v8-coverage": {
@@ -1324,6 +1464,23 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@csstools/selector-specificity": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.1.tgz",
+      "integrity": "sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==",
+      "dev": true,
+      "engines": {
+        "node": "^12 || ^14 || >=16"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/csstools"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3",
+        "postcss-selector-parser": "^6.0.10"
+      }
+    },
     "node_modules/@discoveryjs/json-ext": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz",
@@ -1334,32 +1491,38 @@
       }
     },
     "node_modules/@eslint/eslintrc": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
-      "integrity": "sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
+      "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
       "dev": true,
       "dependencies": {
         "ajv": "^6.12.4",
-        "debug": "^4.1.1",
-        "espree": "^7.3.0",
-        "globals": "^12.1.0",
-        "ignore": "^4.0.6",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
-        "js-yaml": "^3.13.1",
-        "minimatch": "^3.0.4",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/@eslint/eslintrc/node_modules/globals": {
-      "version": "12.4.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-      "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+      "version": "13.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz",
+      "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==",
       "dev": true,
       "dependencies": {
-        "type-fest": "^0.8.1"
+        "type-fest": "^0.20.2"
       },
       "engines": {
         "node": ">=8"
@@ -1368,15 +1531,50 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@eslint/eslintrc/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/@eslint/eslintrc/node_modules/type-fest": {
-      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "version": "0.20.2",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+      "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "dev": true,
       "engines": {
-        "node": ">=8"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "dependencies": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      },
+      "engines": {
+        "node": ">=10.10.0"
+      }
+    },
+    "node_modules/@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
     "node_modules/@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -2527,13 +2725,119 @@
         "node": ">=8"
       }
     },
-    "node_modules/@nodelib/fs.scandir": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
-      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
       "dev": true,
       "dependencies": {
-        "@nodelib/fs.stat": "2.0.4",
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/set-array": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
+      "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      }
+    },
+    "node_modules/@jridgewell/source-map/node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+      "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/set-array": "^1.0.1",
+        "@jridgewell/sourcemap-codec": "^1.4.10",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
+      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
+      "dev": true
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "dev": true,
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.7.tgz",
+      "integrity": "sha512-PplSvl4pJ5N3BkVjAdDzpPhVUPdC73JgttkR+LnBx2OORC1GCQsBjUeEuipf9uOaAM1SbxcdZFfR3KDTKm2S0A==",
+      "dev": true,
+      "dependencies": {
+        "detect-libc": "^1.0.3",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.5",
+        "nopt": "^5.0.0",
+        "npmlog": "^6.0.0",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "bin": {
+        "node-pre-gyp": "bin/node-pre-gyp"
+      }
+    },
+    "node_modules/@mapbox/node-pre-gyp/node_modules/semver": {
+      "version": "7.3.5",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "dependencies": {
+        "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
       },
       "engines": {
@@ -2541,21 +2845,21 @@
       }
     },
     "node_modules/@nodelib/fs.stat": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
-      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
       "dev": true,
       "engines": {
         "node": ">= 8"
       }
     },
     "node_modules/@nodelib/fs.walk": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
-      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
       "dependencies": {
-        "@nodelib/fs.scandir": "2.1.4",
+        "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
       },
       "engines": {
@@ -2669,6 +2973,243 @@
         "node": ">=8"
       }
     },
+    "node_modules/@testing-library/jest-dom": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
+      "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+      "dev": true,
+      "dependencies": {
+        "@babel/runtime": "^7.9.2",
+        "@types/testing-library__jest-dom": "^5.9.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=6",
+        "yarn": ">=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/chalk": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+      "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/jest-dom/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/preact": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/preact/-/preact-3.1.1.tgz",
+      "integrity": "sha512-RHjln1psbU4Sh/l8k9/gG3VNEDIEicUhzZ74uEnb4hJ4H9G9p1iOXEEMXB2oD5sZcjciQhpx1QUryM5/sAtTTQ==",
+      "dev": true,
+      "dependencies": {
+        "@testing-library/dom": "^8.11.1"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "preact": ">=10 || ^10.0.0-alpha.0 || ^10.0.0-beta.0"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/@testing-library/dom": {
+      "version": "8.13.0",
+      "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
+      "integrity": "sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.10.4",
+        "@babel/runtime": "^7.12.5",
+        "@types/aria-query": "^4.2.0",
+        "aria-query": "^5.0.0",
+        "chalk": "^4.1.0",
+        "dom-accessibility-api": "^0.5.9",
+        "lz-string": "^1.4.4",
+        "pretty-format": "^27.0.2"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/ansi-styles": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+      "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+      "dev": true,
+      "dependencies": {
+        "color-convert": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/aria-query": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+      "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+      "dev": true,
+      "engines": {
+        "node": ">=6.0"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/chalk": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+      "dev": true,
+      "dependencies": {
+        "ansi-styles": "^4.1.0",
+        "supports-color": "^7.1.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/chalk?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/color-convert": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+      "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+      "dev": true,
+      "dependencies": {
+        "color-name": "~1.1.4"
+      },
+      "engines": {
+        "node": ">=7.0.0"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/color-name": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+      "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+      "dev": true
+    },
+    "node_modules/@testing-library/preact/node_modules/has-flag": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+      "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/pretty-format": {
+      "version": "27.5.1",
+      "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+      "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1",
+        "ansi-styles": "^5.0.0",
+        "react-is": "^17.0.1"
+      },
+      "engines": {
+        "node": "^10.13.0 || ^12.13.0 || ^14.15.0 || >=15.0.0"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/pretty-format/node_modules/ansi-styles": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+      "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-styles?sponsor=1"
+      }
+    },
+    "node_modules/@testing-library/preact/node_modules/supports-color": {
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+      "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+      "dev": true,
+      "dependencies": {
+        "has-flag": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/@testing-library/user-event": {
       "version": "13.1.3",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.3.tgz",
@@ -2741,6 +3282,44 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "node_modules/@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "dependencies": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "dependencies": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/eslint": {
       "version": "7.2.7",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
@@ -2767,6 +3346,29 @@
       "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
       "dev": true
     },
+    "node_modules/@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "dependencies": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "node_modules/@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "node_modules/@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -2777,9 +3379,9 @@
       }
     },
     "node_modules/@types/http-proxy": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.6.tgz",
-      "integrity": "sha512-+qsjqR75S/ib0ig0R9WN+CDoZeOBU6F2XLewgC4KVgdXiNHiKKHFEMRHOrs5PbYE97D5vataw5wPj4KLYfUkuQ==",
+      "version": "1.17.7",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz",
+      "integrity": "sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==",
       "dev": true,
       "dependencies": {
         "@types/node": "*"
@@ -2953,9 +3555,9 @@
       }
     },
     "node_modules/@types/json-schema": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
-      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
     "node_modules/@types/micromodal": {
@@ -2964,12 +3566,36 @@
       "integrity": "sha512-rQAprHsGUqtbngygYKWKpgbmWCbdR6injIeLELVjapsI7xXCjKlbaet62haRG+CLYOacXzlUlS0me8H+3RG1UQ==",
       "dev": true
     },
+    "node_modules/@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
+    "node_modules/@types/minimist": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
+      "dev": true
+    },
     "node_modules/@types/node": {
       "version": "14.14.35",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz",
       "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==",
       "dev": true
     },
+    "node_modules/@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "dev": true
+    },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "node_modules/@types/pixelmatch": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.3.tgz",
@@ -2985,18 +3611,82 @@
       "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==",
       "dev": true
     },
+    "node_modules/@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "node_modules/@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
     "node_modules/@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
+    "node_modules/@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "dependencies": {
+        "@types/express": "*"
+      }
+    },
+    "node_modules/@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "node_modules/@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "node_modules/@types/testing-library__jest-dom": {
+      "version": "5.14.3",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
+      "integrity": "sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==",
+      "dev": true,
+      "dependencies": {
+        "@types/jest": "*"
+      }
+    },
+    "node_modules/@types/wicg-file-system-access": {
+      "version": "2020.9.5",
+      "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.5.tgz",
+      "integrity": "sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA==",
+      "dev": true
+    },
+    "node_modules/@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dev": true,
+      "dependencies": {
+        "@types/node": "*"
+      }
+    },
     "node_modules/@types/yargs": {
       "version": "15.0.13",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
@@ -3013,29 +3703,31 @@
       "dev": true
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.2.tgz",
-      "integrity": "sha512-PGqpLLzHSxq956rzNGasO3GsAPf2lY9lDUBXhS++SKonglUmJypaUtcKzRtUte8CV7nruwnDxtLUKpVxs0wQBw==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.0.tgz",
+      "integrity": "sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "4.28.2",
-        "@typescript-eslint/scope-manager": "4.28.2",
-        "debug": "^4.3.1",
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/type-utils": "5.27.0",
+        "@typescript-eslint/utils": "5.27.0",
+        "debug": "^4.3.4",
         "functional-red-black-tree": "^1.0.1",
-        "regexpp": "^3.1.0",
-        "semver": "^7.3.5",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
         "tsutils": "^3.21.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^4.0.0",
-        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3044,9 +3736,9 @@
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3058,68 +3750,26 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/experimental-utils": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.2.tgz",
-      "integrity": "sha512-MwHPsL6qo98RC55IoWWP8/opTykjTp4JzfPu1VfO2Z0MshNP0UZ1GEV5rYSSnZSUI8VD7iHvtIPVGW5Nfh7klQ==",
-      "dev": true,
-      "dependencies": {
-        "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.28.2",
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/typescript-estree": "4.28.2",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      },
-      "engines": {
-        "node": "^10.12.0 || >=12.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/typescript-eslint"
-      },
-      "peerDependencies": {
-        "eslint": "*"
-      }
-    },
-    "node_modules/@typescript-eslint/experimental-utils/node_modules/eslint-utils": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-      "dev": true,
-      "dependencies": {
-        "eslint-visitor-keys": "^2.0.0"
-      },
-      "engines": {
-        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/mysticatea"
-      },
-      "peerDependencies": {
-        "eslint": ">=5"
-      }
-    },
     "node_modules/@typescript-eslint/parser": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.2.tgz",
-      "integrity": "sha512-Q0gSCN51eikAgFGY+gnd5p9bhhCUAl0ERMiDKrTzpSoMYRubdB8MJrTTR/BBii8z+iFwz8oihxd0RAdP4l8w8w==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.0.tgz",
+      "integrity": "sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/scope-manager": "4.28.2",
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/typescript-estree": "4.28.2",
-        "debug": "^4.3.1"
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/typescript-estree": "5.27.0",
+        "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^5.0.0 || ^6.0.0 || ^7.0.0"
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
       },
       "peerDependenciesMeta": {
         "typescript": {
@@ -3128,29 +3778,55 @@
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.2.tgz",
-      "integrity": "sha512-MqbypNjIkJFEFuOwPWNDjq0nqXAKZvDNNs9yNseoGBB1wYfz1G0WHC2AVOy4XD7di3KCcW3+nhZyN6zruqmp2A==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz",
+      "integrity": "sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/visitor-keys": "4.28.2"
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/visitor-keys": "5.27.0"
       },
       "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.0.tgz",
+      "integrity": "sha512-vpTvRRchaf628Hb/Xzfek+85o//zEUotr1SmexKvTfs7czXfYjXVT/a5yDbpzLBX1rhbqxjDdr1Gyo0x1Fc64g==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/utils": "5.27.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@typescript-eslint/types": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.2.tgz",
-      "integrity": "sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.0.tgz",
+      "integrity": "sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==",
       "dev": true,
       "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3158,21 +3834,21 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.2.tgz",
-      "integrity": "sha512-86lLstLvK6QjNZjMoYUBMMsULFw0hPHJlk1fzhAVoNjDBuPVxiwvGuPQq3fsBMCxuDJwmX87tM/AXoadhHRljg==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz",
+      "integrity": "sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/visitor-keys": "4.28.2",
-        "debug": "^4.3.1",
-        "globby": "^11.0.3",
-        "is-glob": "^4.0.1",
-        "semver": "^7.3.5",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/visitor-keys": "5.27.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
         "tsutils": "^3.21.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3185,9 +3861,9 @@
       }
     },
     "node_modules/@typescript-eslint/typescript-estree/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
       "dev": true,
       "dependencies": {
         "lru-cache": "^6.0.0"
@@ -3199,17 +3875,41 @@
         "node": ">=10"
       }
     },
-    "node_modules/@typescript-eslint/visitor-keys": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.2.tgz",
-      "integrity": "sha512-aT2B4PLyyRDUVUafXzpZFoc0C9t0za4BJAKP5sgWIhG+jHECQZUEjuQSCIwZdiJJ4w4cgu5r3Kh20SOdtEBl0w==",
+    "node_modules/@typescript-eslint/utils": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.27.0.tgz",
+      "integrity": "sha512-nZvCrkIJppym7cIbP3pOwIkAefXOmfGPnCM0LQfzNaKxJHI6VjI8NC662uoiPlaf5f6ymkTy9C3NQXev2mdXmA==",
       "dev": true,
       "dependencies": {
-        "@typescript-eslint/types": "4.28.2",
-        "eslint-visitor-keys": "^2.0.0"
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/typescript-estree": "5.27.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
       },
       "engines": {
-        "node": "^8.10.0 || ^10.13.0 || >=11.10.1"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz",
+      "integrity": "sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/types": "5.27.0",
+        "eslint-visitor-keys": "^3.3.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -3363,9 +4063,9 @@
       }
     },
     "node_modules/@webpack-cli/configtest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.1.tgz",
-      "integrity": "sha512-B+4uBUYhpzDXmwuo3V9yBH6cISwxEI4J+NO5ggDaGEEHb0osY/R7MzeKc0bHURXQuZjMM4qD+bSJCKIuI3eNBQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
+      "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
       "dev": true,
       "peerDependencies": {
         "webpack": "4.x.x || 5.x.x",
@@ -3373,9 +4073,9 @@
       }
     },
     "node_modules/@webpack-cli/info": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.2.tgz",
-      "integrity": "sha512-5U9kUJHnwU+FhKH4PWGZuBC1hTEPYyxGSL5jjoBI96Gx8qcYJGOikpiIpFoTq8mmgX3im2zAo2wanv/alD74KQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
+      "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
       "dev": true,
       "dependencies": {
         "envinfo": "^7.7.3"
@@ -3385,9 +4085,9 @@
       }
     },
     "node_modules/@webpack-cli/serve": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.3.0.tgz",
-      "integrity": "sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
+      "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
       "dev": true,
       "peerDependencies": {
         "webpack-cli": "4.x.x"
@@ -3458,9 +4158,9 @@
       }
     },
     "node_modules/acorn-jsx": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "peerDependencies": {
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
@@ -3516,6 +4216,45 @@
         "url": "https://github.com/sponsors/epoberezkin"
       }
     },
+    "node_modules/ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "dependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependencies": {
+        "ajv": "^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "ajv": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/ajv-formats/node_modules/ajv": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+      "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/ajv-formats/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
     "node_modules/ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
@@ -3525,15 +4264,6 @@
         "ajv": "^6.9.1"
       }
     },
-    "node_modules/ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -3549,10 +4279,10 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/ansi-html": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
+    "node_modules/ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
       "dev": true,
       "engines": [
         "node >= 0.8.0"
@@ -3583,9 +4313,9 @@
       }
     },
     "node_modules/anymatch": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
       "dev": true,
       "dependencies": {
         "normalize-path": "^3.0.0",
@@ -3596,24 +4326,41 @@
       }
     },
     "node_modules/apple2shader": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/apple2shader/-/apple2shader-0.0.3.tgz",
-      "integrity": "sha512-7nAffvWdGp4FTqpDxgjslN4XqaO9FOUCKnhJ4IPQXGdyiCWIZvZ+E5gXsb+BKt0L+Fs3E5Kcn+5vOamSUSU0xA=="
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/apple2shader/-/apple2shader-0.0.4.tgz",
+      "integrity": "sha512-ZLEpZFsKg0JA2xUZfJpFCMDi7/kMMi0RuydkHFsC5LzFlWJzVbbPq5mX/RmRhPKXYxbFN+B8lXiMRfuDH8rquw=="
     },
     "node_modules/aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
       "dev": true
     },
     "node_modules/are-we-there-yet": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
       "dev": true,
       "dependencies": {
         "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
+        "readable-stream": "^3.6.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/are-we-there-yet/node_modules/readable-stream": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+      "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.3",
+        "string_decoder": "^1.1.1",
+        "util-deprecate": "^1.0.1"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
     "node_modules/argparse": {
@@ -3644,6 +4391,25 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "node_modules/array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -3653,6 +4419,33 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -3663,9 +4456,9 @@
       }
     },
     "node_modules/async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "dependencies": {
         "lodash": "^4.17.14"
@@ -3677,6 +4470,18 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "node_modules/atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true,
+      "bin": {
+        "atob": "bin/atob.js"
+      },
+      "engines": {
+        "node": ">= 4.5.0"
+      }
+    },
     "node_modules/babel-jest": {
       "version": "27.2.4",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.2.4.tgz",
@@ -4134,25 +4939,48 @@
         "node": ">=6"
       }
     },
-    "node_modules/caniuse-lite": {
-      "version": "1.0.30001239",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
-      "integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==",
+    "node_modules/camelcase-keys": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
       "dev": true,
+      "dependencies": {
+        "camelcase": "^5.3.1",
+        "map-obj": "^4.0.0",
+        "quick-lru": "^4.0.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
       "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/browserslist"
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/caniuse-lite": {
+      "version": "1.0.30001342",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz",
+      "integrity": "sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/browserslist"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+        }
+      ]
+    },
     "node_modules/canvas": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.7.0.tgz",
-      "integrity": "sha512-pzCxtkHb+5su5MQjTtepMDlIOtaXo277x0C0u3nMOxtkhTyQ+h2yNKhlROAaDllWgRyePAUitC08sXw26Eb6aw==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.8.0.tgz",
+      "integrity": "sha512-gLTi17X8WY9Cf5GZ2Yns8T5lfBOcGgFehDFb+JQwDqdOoBOcECS9ZWMEAqMSVcMYwXD659J8NyzjRY/2aE+C2Q==",
       "dev": true,
       "hasInstallScript": true,
       "dependencies": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
         "nan": "^2.14.0",
-        "node-pre-gyp": "^0.15.0",
         "simple-get": "^3.0.3"
       },
       "engines": {
@@ -4183,31 +5011,40 @@
       }
     },
     "node_modules/chokidar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://paulmillr.com/funding/"
+        }
+      ],
       "dependencies": {
-        "anymatch": "~3.1.1",
+        "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "glob-parent": "~5.1.0",
+        "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.5.0"
+        "readdirp": "~3.6.0"
       },
       "engines": {
         "node": ">= 8.10.0"
       },
       "optionalDependencies": {
-        "fsevents": "~2.3.1"
+        "fsevents": "~2.3.2"
       }
     },
     "node_modules/chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "dev": true
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/chrome-trace-event": {
       "version": "1.0.2",
@@ -4233,6 +5070,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "node_modules/classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "node_modules/clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -4267,6 +5109,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/clone-regexp": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
+      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
+      "dev": true,
+      "dependencies": {
+        "is-regexp": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -4277,15 +5131,6 @@
         "node": ">= 0.12.0"
       }
     },
-    "node_modules/code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -4307,6 +5152,21 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "node_modules/color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "dev": true,
+      "bin": {
+        "color-support": "bin.js"
+      }
+    },
+    "node_modules/colord": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
+      "dev": true
+    },
     "node_modules/colorette": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
@@ -4331,12 +5191,6 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
-    "node_modules/commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
-      "dev": true
-    },
     "node_modules/compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -4488,6 +5342,22 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -4502,6 +5372,94 @@
         "node": ">= 8"
       }
     },
+    "node_modules/css": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+      "dev": true,
+      "dependencies": {
+        "inherits": "^2.0.4",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.6.0"
+      }
+    },
+    "node_modules/css-functions-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz",
+      "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.22"
+      }
+    },
+    "node_modules/css-loader": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.7",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.5"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/css-loader/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
+    "node_modules/css/node_modules/source-map": {
+      "version": "0.6.1",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+      "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true,
+      "bin": {
+        "cssesc": "bin/cssesc"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -4541,9 +5499,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
       "dependencies": {
         "ms": "2.1.2"
@@ -4557,12 +5515,52 @@
         }
       }
     },
+    "node_modules/decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decamelize-keys": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+      "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==",
+      "dev": true,
+      "dependencies": {
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/decamelize-keys/node_modules/map-obj": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+      "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/decimal.js": {
       "version": "10.3.1",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
       "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
       "dev": true
     },
+    "node_modules/decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
     "node_modules/decompress-response": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
@@ -4598,15 +5596,6 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
-    "node_modules/deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "dev": true,
-      "engines": {
-        "node": ">=4.0.0"
-      }
-    },
     "node_modules/deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -4634,16 +5623,29 @@
         "node": ">= 10"
       }
     },
+    "node_modules/define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
       "dev": true,
       "dependencies": {
-        "object-keys": "^1.0.12"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       },
       "engines": {
         "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/del": {
@@ -4784,9 +5786,9 @@
       }
     },
     "node_modules/dom-accessibility-api": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
-      "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
       "dev": true
     },
     "node_modules/domexception": {
@@ -4859,35 +5861,22 @@
       }
     },
     "node_modules/enhanced-resolve": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
+      "integrity": "sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==",
       "dev": true,
       "dependencies": {
-        "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.5.0",
-        "tapable": "^1.0.0"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
       },
       "engines": {
-        "node": ">=6.9.0"
-      }
-    },
-    "node_modules/enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "dependencies": {
-        "ansi-colors": "^4.1.1"
-      },
-      "engines": {
-        "node": ">=8.6"
+        "node": ">=10.13.0"
       }
     },
     "node_modules/envinfo": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
-      "integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true,
       "bin": {
         "envinfo": "dist/cli.js"
@@ -4896,16 +5885,50 @@
         "node": ">=4"
       }
     },
-    "node_modules/errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "dev": true,
       "dependencies": {
-        "prr": "~1.0.1"
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "node_modules/es-abstract": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
+      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.4.3",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
       },
-      "bin": {
-        "errno": "cli.js"
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/es-module-lexer": {
@@ -4914,6 +5937,32 @@
       "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
       "dev": true
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "dependencies": {
+        "has": "^1.0.3"
+      }
+    },
+    "node_modules/es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "dependencies": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -4980,46 +6029,44 @@
       }
     },
     "node_modules/eslint": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
-      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.17.0.tgz",
+      "integrity": "sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==",
       "dev": true,
       "dependencies": {
-        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.0",
+        "@eslint/eslintrc": "^1.3.0",
+        "@humanwhocodes/config-array": "^0.9.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
-        "debug": "^4.0.1",
+        "debug": "^4.3.2",
         "doctrine": "^3.0.0",
-        "enquirer": "^2.3.5",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^2.0.0",
-        "espree": "^7.3.1",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.2",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
-        "globals": "^13.6.0",
-        "ignore": "^4.0.6",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
+        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
-        "lodash": "^4.17.21",
-        "minimatch": "^3.0.4",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
-        "progress": "^2.0.0",
-        "regexpp": "^3.1.0",
-        "semver": "^7.2.1",
-        "strip-ansi": "^6.0.0",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
-        "table": "^6.0.4",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
@@ -5027,12 +6074,110 @@
         "eslint": "bin/eslint.js"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       },
       "funding": {
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-plugin-jest": {
+      "version": "26.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.4.3.tgz",
+      "integrity": "sha512-eb4sIRLy7hBdBphCBttE1Gx3Go6GsCYXRfy1xtuSg56UBlLLuFpbA79jPipbUfz7AwuDJ+j9UShN7AOi6VDEuQ==",
+      "dev": true,
+      "dependencies": {
+        "@typescript-eslint/utils": "^5.10.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-plugin-react": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz",
+      "integrity": "sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.1",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.7"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.3",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
+      "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
+      "dev": true,
+      "dependencies": {
+        "is-core-module": "^2.2.0",
+        "path-parse": "^1.0.6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -5047,45 +6192,39 @@
       }
     },
     "node_modules/eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
       "dev": true,
       "dependencies": {
-        "eslint-visitor-keys": "^1.1.0"
+        "eslint-visitor-keys": "^2.0.0"
       },
       "engines": {
-        "node": ">=6"
+        "node": "^10.0.0 || ^12.0.0 || >= 14.0.0"
       },
       "funding": {
         "url": "https://github.com/sponsors/mysticatea"
+      },
+      "peerDependencies": {
+        "eslint": ">=5"
       }
     },
     "node_modules/eslint-utils/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/eslint-visitor-keys": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
-      "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+      "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
       "dev": true,
       "engines": {
         "node": ">=10"
       }
     },
-    "node_modules/eslint/node_modules/@babel/code-frame": {
-      "version": "7.12.11",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
-      "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
       "dev": true,
-      "dependencies": {
-        "@babel/highlight": "^7.10.4"
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
     "node_modules/eslint/node_modules/ansi-styles": {
@@ -5103,10 +6242,16 @@
         "url": "https://github.com/chalk/ansi-styles?sponsor=1"
       }
     },
+    "node_modules/eslint/node_modules/argparse": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+      "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+      "dev": true
+    },
     "node_modules/eslint/node_modules/chalk": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-      "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+      "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
       "dev": true,
       "dependencies": {
         "ansi-styles": "^4.1.0",
@@ -5137,10 +6282,56 @@
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
       "dev": true
     },
+    "node_modules/eslint/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint/node_modules/eslint-scope": {
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+      "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+      "dev": true,
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      }
+    },
+    "node_modules/eslint/node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/eslint/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/eslint/node_modules/globals": {
-      "version": "13.7.0",
-      "resolved": "https://registry.npmjs.org/globals/-/globals-13.7.0.tgz",
-      "integrity": "sha512-Aipsz6ZKRxa/xQkZhNg0qIWXT6x6rD46f6x/PCnBomlttdIyAPak4YD9jTmKpZ72uROSMU87qJtcgpgHaVchiA==",
+      "version": "13.15.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz",
+      "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==",
       "dev": true,
       "dependencies": {
         "type-fest": "^0.20.2"
@@ -5161,6 +6352,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/eslint/node_modules/js-yaml": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+      "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+      "dev": true,
+      "dependencies": {
+        "argparse": "^2.0.1"
+      },
+      "bin": {
+        "js-yaml": "bin/js-yaml.js"
+      }
+    },
     "node_modules/eslint/node_modules/levn": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -5200,21 +6403,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/eslint/node_modules/semver": {
-      "version": "7.3.5",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-      "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-      "dev": true,
-      "dependencies": {
-        "lru-cache": "^6.0.0"
-      },
-      "bin": {
-        "semver": "bin/semver.js"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
     "node_modules/eslint/node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -5252,26 +6440,29 @@
       }
     },
     "node_modules/espree": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
-      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
       "dev": true,
       "dependencies": {
-        "acorn": "^7.4.0",
-        "acorn-jsx": "^5.3.1",
-        "eslint-visitor-keys": "^1.3.0"
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
       },
       "engines": {
-        "node": "^10.12.0 || >=12.0.0"
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
-    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-      "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+    "node_modules/espree/node_modules/acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
       "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
       "engines": {
-        "node": ">=4"
+        "node": ">=0.4.0"
       }
     },
     "node_modules/esprima": {
@@ -5300,9 +6491,9 @@
       }
     },
     "node_modules/esquery/node_modules/estraverse": {
-      "version": "5.2.0",
-      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-      "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
       "dev": true,
       "engines": {
         "node": ">=4.0"
@@ -5394,6 +6585,18 @@
         "url": "https://github.com/sindresorhus/execa?sponsor=1"
       }
     },
+    "node_modules/execall": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
+      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
+      "dev": true,
+      "dependencies": {
+        "clone-regexp": "^2.1.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -5605,20 +6808,19 @@
       "dev": true
     },
     "node_modules/fast-glob": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
-      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
       "dev": true,
       "dependencies": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
+        "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
+        "micromatch": "^4.0.4"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=8.6.0"
       }
     },
     "node_modules/fast-json-stable-stringify": {
@@ -5640,9 +6842,9 @@
       "dev": true
     },
     "node_modules/fastq": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
-      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
       "dev": true,
       "dependencies": {
         "reusify": "^1.0.4"
@@ -5746,23 +6948,6 @@
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=",
       "dev": true
     },
-    "node_modules/find-cache-dir": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-      "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-      "dev": true,
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
     "node_modules/find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -5790,15 +6975,15 @@
       }
     },
     "node_modules/flatted": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
-      "integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz",
+      "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==",
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
       "dev": true,
       "funding": [
         {
@@ -5848,18 +7033,21 @@
       }
     },
     "node_modules/fs-minipass": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
-      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
       "dependencies": {
-        "minipass": "^2.6.0"
+        "minipass": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
     "node_modules/fs-monkey": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.1.tgz",
-      "integrity": "sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
       "dev": true
     },
     "node_modules/fs.realpath": {
@@ -5888,73 +7076,57 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "node_modules/function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "node_modules/functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.0.tgz",
+      "integrity": "sha512-F8sU45yQpjQjxKkm1UOAhf0U/O0aFt//Fl7hsrNVto+patMHjs7dPI9mFOGUKbhrgKm0S3EjW3scMFuQmWSROw==",
       "dev": true,
       "dependencies": {
-        "aproba": "^1.0.3",
+        "ansi-regex": "^5.0.1",
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
         "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
+        "has-unicode": "^2.0.1",
         "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
-      }
-    },
-    "node_modules/gauge/node_modules/ansi-regex": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/is-fullwidth-code-point": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-      "dev": true,
-      "dependencies": {
-        "number-is-nan": "^1.0.0"
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
       },
       "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/string-width": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-      "dev": true,
-      "dependencies": {
-        "code-point-at": "^1.0.0",
-        "is-fullwidth-code-point": "^1.0.0",
-        "strip-ansi": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/gauge/node_modules/strip-ansi": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.13.0 || ^14.15.0 || >=16"
       }
     },
     "node_modules/gensync": {
@@ -6019,6 +7191,22 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -6057,6 +7245,44 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
+    "node_modules/global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "dependencies": {
+        "global-prefix": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "dependencies": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/global-prefix/node_modules/which": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+      "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+      "dev": true,
+      "dependencies": {
+        "isexe": "^2.0.0"
+      },
+      "bin": {
+        "which": "bin/which"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -6067,16 +7293,16 @@
       }
     },
     "node_modules/globby": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
-      "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
       "dependencies": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
         "slash": "^3.0.0"
       },
       "engines": {
@@ -6086,14 +7312,11 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
-    "node_modules/globby/node_modules/ignore": {
-      "version": "5.1.8",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-      "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-      "dev": true,
-      "engines": {
-        "node": ">= 4"
-      }
+    "node_modules/globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true
     },
     "node_modules/glur": {
       "version": "1.1.2",
@@ -6113,6 +7336,21 @@
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
+    "node_modules/hard-rejection": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+      "dev": true
+    },
     "node_modules/has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -6146,6 +7384,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
@@ -6155,11 +7402,38 @@
         "node": ">=4"
       }
     },
-    "node_modules/has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+    "node_modules/has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
       "dev": true,
+      "dependencies": {
+        "get-intrinsic": "^1.1.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-symbols": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
       "engines": {
         "node": ">= 0.4"
       },
@@ -6173,6 +7447,18 @@
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
       "dev": true
     },
+    "node_modules/hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -6209,6 +7495,18 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "node_modules/html-tags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
+      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -6272,9 +7570,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
-      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz",
+      "integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==",
       "dev": true,
       "dependencies": {
         "@types/http-proxy": "^1.17.5",
@@ -6284,7 +7582,7 @@
         "micromatch": "^4.0.2"
       },
       "engines": {
-        "node": ">=8.0.0"
+        "node": ">=12.0.0"
       }
     },
     "node_modules/https-proxy-agent": {
@@ -6321,24 +7619,39 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
+      "dev": true,
+      "dependencies": {
+        "harmony-reflect": "^1.4.6"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
       "dev": true,
       "engines": {
         "node": ">= 4"
       }
     },
-    "node_modules/ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
-      "dev": true,
-      "dependencies": {
-        "minimatch": "^3.0.4"
-      }
-    },
     "node_modules/import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -6364,6 +7677,15 @@
         "node": ">=4"
       }
     },
+    "node_modules/import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/import-local": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
@@ -6420,22 +7742,18 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
-    "node_modules/internal-ip": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
-      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
+    "node_modules/internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
       "dev": true,
       "dependencies": {
-        "default-gateway": "^6.0.0",
-        "ipaddr.js": "^1.9.1",
-        "is-ip": "^3.1.0",
-        "p-event": "^4.2.0"
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
       },
       "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/internal-ip?sponsor=1"
+        "node": ">= 0.4"
       }
     },
     "node_modules/interpret": {
@@ -6453,15 +7771,6 @@
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
       "dev": true
     },
-    "node_modules/ip-regex": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
@@ -6471,15 +7780,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
@@ -6495,6 +7795,24 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
+    "node_modules/is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "dependencies": {
+        "has-bigints": "^1.0.1"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -6507,6 +7825,34 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true,
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-ci": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.0.tgz",
@@ -6520,9 +7866,9 @@
       }
     },
     "node_modules/is-core-module": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
-      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
       "dev": true,
       "dependencies": {
         "has": "^1.0.3"
@@ -6544,9 +7890,9 @@
       }
     },
     "node_modules/is-docker": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
-      "integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "dev": true,
       "bin": {
         "is-docker": "cli.js"
@@ -6586,9 +7932,9 @@
       }
     },
     "node_modules/is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "dependencies": {
         "is-extglob": "^2.1.1"
@@ -6597,16 +7943,16 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-ip": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
-      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
+    "node_modules/is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
       "dev": true,
-      "dependencies": {
-        "ip-regex": "^4.0.0"
-      },
       "engines": {
-        "node": ">=8"
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
       }
     },
     "node_modules/is-number": {
@@ -6618,6 +7964,21 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -6667,13 +8028,13 @@
       "dev": true
     },
     "node_modules/is-regex": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
-      "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.1"
+        "has-tostringtag": "^1.0.0"
       },
       "engines": {
         "node": ">= 0.4"
@@ -6682,6 +8043,27 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/is-regexp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
+      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.0.tgz",
@@ -6691,12 +8073,54 @@
         "node": ">=8"
       }
     },
+    "node_modules/is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "dependencies": {
+        "has-tostringtag": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "dependencies": {
+        "has-symbols": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "node_modules/is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -10068,6 +11492,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -10095,11 +11525,18 @@
         "node": ">=6"
       }
     },
-    "node_modules/killable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
-      "dev": true
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz",
+      "integrity": "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==",
+      "dev": true,
+      "dependencies": {
+        "array-includes": "^3.1.4",
+        "object.assign": "^4.1.2"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
     },
     "node_modules/kind-of": {
       "version": "6.0.3",
@@ -10119,6 +11556,12 @@
         "node": ">=6"
       }
     },
+    "node_modules/known-css-properties": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.25.0.tgz",
+      "integrity": "sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==",
+      "dev": true
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -10141,6 +11584,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "node_modules/loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -10188,6 +11637,30 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "node_modules/lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true
+    },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -10239,16 +11712,26 @@
         "tmpl": "1.0.x"
       }
     },
-    "node_modules/map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
+    "node_modules/map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
       "dev": true,
-      "dependencies": {
-        "p-defer": "^1.0.0"
-      },
       "engines": {
-        "node": ">=6"
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true,
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
       }
     },
     "node_modules/media-typer": {
@@ -10260,54 +11743,54 @@
         "node": ">= 0.6"
       }
     },
-    "node_modules/mem": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.0.tgz",
-      "integrity": "sha512-FIkgXo0kTi3XpvaznV5Muk6Y6w8SkdmRXcY7ZLonQesuYezp59UooLxAVBcGuN6PH2tXN84mR3vyzSc6oSMUfA==",
-      "dev": true,
-      "dependencies": {
-        "map-age-cleaner": "^0.1.3",
-        "mimic-fn": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=10"
-      },
-      "funding": {
-        "url": "https://github.com/sindresorhus/mem?sponsor=1"
-      }
-    },
-    "node_modules/mem/node_modules/mimic-fn": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
-      "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
-      "dev": true,
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/memfs": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.0.tgz",
-      "integrity": "sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==",
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
+      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
       "dev": true,
       "dependencies": {
-        "fs-monkey": "1.0.1"
+        "fs-monkey": "1.0.3"
       },
       "engines": {
         "node": ">= 4.0.0"
       }
     },
-    "node_modules/memory-fs": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
+    "node_modules/meow": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
       "dev": true,
       "dependencies": {
-        "errno": "^0.1.3",
-        "readable-stream": "^2.0.1"
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize": "^1.2.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.18.0",
+        "yargs-parser": "^20.2.3"
       },
       "engines": {
-        "node": ">=4.3.0 <5.0.0 || >=5.10"
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/meow/node_modules/type-fest": {
+      "version": "0.18.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+      "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/merge-descriptors": {
@@ -10341,13 +11824,13 @@
       }
     },
     "node_modules/micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
       "dev": true,
       "dependencies": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
       },
       "engines": {
         "node": ">=8.6"
@@ -10374,21 +11857,21 @@
       }
     },
     "node_modules/mime-db": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
-      "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==",
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
       "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
     },
     "node_modules/mime-types": {
-      "version": "2.1.29",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
-      "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
+      "version": "2.1.34",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
       "dev": true,
       "dependencies": {
-        "mime-db": "1.46.0"
+        "mime-db": "1.51.0"
       },
       "engines": {
         "node": ">= 0.6"
@@ -10415,6 +11898,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true,
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -10422,9 +11914,9 @@
       "dev": true
     },
     "node_modules/minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^1.1.7"
@@ -10434,34 +11926,57 @@
       }
     },
     "node_modules/minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
-    "node_modules/minipass": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
-      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+    "node_modules/minimist-options": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
       "dependencies": {
-        "safe-buffer": "^5.1.2",
-        "yallist": "^3.0.0"
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
+      },
+      "engines": {
+        "node": ">= 6"
       }
     },
-    "node_modules/minipass/node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+    "node_modules/minimist-options/node_modules/is-plain-obj": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+      "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
     },
-    "node_modules/minizlib": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
-      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+    "node_modules/minipass": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.5.tgz",
+      "integrity": "sha512-+8NzxD82XQoNKNrl1d/FSi+X8wAEWR+sbYAfIvub4Nz0d22plFG72CEVVaufV8PNf4qSslFTD8VMOxNVhHCjTw==",
       "dev": true,
       "dependencies": {
-        "minipass": "^2.9.0"
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "dependencies": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
       }
     },
     "node_modules/mkdirp": {
@@ -10507,38 +12022,24 @@
       "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
       "dev": true
     },
+    "node_modules/nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true,
+      "bin": {
+        "nanoid": "bin/nanoid.cjs"
+      },
+      "engines": {
+        "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
+      }
+    },
     "node_modules/natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
-    "node_modules/needle": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
-      "integrity": "sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==",
-      "dev": true,
-      "dependencies": {
-        "debug": "^3.2.6",
-        "iconv-lite": "^0.4.4",
-        "sax": "^1.2.4"
-      },
-      "bin": {
-        "needle": "bin/needle"
-      },
-      "engines": {
-        "node": ">= 4.4.x"
-      }
-    },
-    "node_modules/needle/node_modules/debug": {
-      "version": "3.2.7",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-      "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-      "dev": true,
-      "dependencies": {
-        "ms": "^2.1.1"
-      }
-    },
     "node_modules/negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -10554,13 +12055,55 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dev": true,
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      },
+      "peerDependencies": {
+        "encoding": "^0.1.0"
+      },
+      "peerDependenciesMeta": {
+        "encoding": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/node-fetch/node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+      "dev": true
+    },
+    "node_modules/node-fetch/node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+      "dev": true
+    },
+    "node_modules/node-fetch/node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dev": true,
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz",
+      "integrity": "sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==",
       "dev": true,
       "engines": {
-        "node": ">= 6.0.0"
+        "node": ">= 6.13.0"
       }
     },
     "node_modules/node-int64": {
@@ -10578,49 +12121,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/node-pre-gyp": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.15.0.tgz",
-      "integrity": "sha512-7QcZa8/fpaU/BKenjcaeFF9hLz2+7S9AqyXFhlH/rilsQ/hPZKK32RtR5EQHJElgu+q5RfbJ34KriI79UWaorA==",
-      "deprecated": "Please upgrade to @mapbox/node-pre-gyp: the non-scoped node-pre-gyp package is deprecated and only the @mapbox scoped package will recieve updates in the future",
-      "dev": true,
-      "dependencies": {
-        "detect-libc": "^1.0.2",
-        "mkdirp": "^0.5.3",
-        "needle": "^2.5.0",
-        "nopt": "^4.0.1",
-        "npm-packlist": "^1.1.6",
-        "npmlog": "^4.0.2",
-        "rc": "^1.2.7",
-        "rimraf": "^2.6.1",
-        "semver": "^5.3.0",
-        "tar": "^4.4.2"
-      },
-      "bin": {
-        "node-pre-gyp": "bin/node-pre-gyp"
-      }
-    },
-    "node_modules/node-pre-gyp/node_modules/rimraf": {
-      "version": "2.7.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-      "dev": true,
-      "dependencies": {
-        "glob": "^7.1.3"
-      },
-      "bin": {
-        "rimraf": "bin.js"
-      }
-    },
-    "node_modules/node-pre-gyp/node_modules/semver": {
-      "version": "5.7.1",
-      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-      "dev": true,
-      "bin": {
-        "semver": "bin/semver"
-      }
-    },
     "node_modules/node-releases": {
       "version": "1.1.71",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
@@ -10628,16 +12128,48 @@
       "dev": true
     },
     "node_modules/nopt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
       "dependencies": {
-        "abbrev": "1",
-        "osenv": "^0.1.4"
+        "abbrev": "1"
       },
       "bin": {
         "nopt": "bin/nopt.js"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/normalize-package-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/normalize-package-data/node_modules/semver": {
+      "version": "7.3.7",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+      "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+      "dev": true,
+      "dependencies": {
+        "lru-cache": "^6.0.0"
+      },
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/normalize-path": {
@@ -10649,32 +12181,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/npm-bundled": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
-      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
-      "dev": true,
-      "dependencies": {
-        "npm-normalize-package-bin": "^1.0.1"
-      }
-    },
-    "node_modules/npm-normalize-package-bin": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
-      "dev": true
-    },
-    "node_modules/npm-packlist": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
-      "dev": true,
-      "dependencies": {
-        "ignore-walk": "^3.0.1",
-        "npm-bundled": "^1.0.1",
-        "npm-normalize-package-bin": "^1.0.1"
-      }
-    },
     "node_modules/npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -10688,24 +12194,18 @@
       }
     },
     "node_modules/npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.0.tgz",
+      "integrity": "sha512-03ppFRGlsyUaQFbGC2C8QWJN/C/K7PsfyD9aQdhVKAQIH4sQBc8WASqFBP7O+Ut4d2oo5LoeoboB3cGdBZSp6Q==",
       "dev": true,
       "dependencies": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
-      }
-    },
-    "node_modules/number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true,
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^4.0.0",
+        "set-blocking": "^2.0.0"
+      },
       "engines": {
-        "node": ">=0.10.0"
+        "node": "^12.13.0 || ^14.15.0 || >=16"
       }
     },
     "node_modules/nwsapi": {
@@ -10723,6 +12223,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/object-is": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
@@ -10766,6 +12275,67 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.entries": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.hasown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "dev": true,
+      "dependencies": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -10818,16 +12388,17 @@
       }
     },
     "node_modules/open": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
       "dev": true,
       "dependencies": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
       },
       "engines": {
-        "node": ">=8"
+        "node": ">=12"
       },
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
@@ -10850,67 +12421,6 @@
         "node": ">= 0.8.0"
       }
     },
-    "node_modules/os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
-    "node_modules/osenv": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
-      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "dev": true,
-      "dependencies": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
-    },
-    "node_modules/p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/p-event": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
-      "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
-      "dev": true,
-      "dependencies": {
-        "p-timeout": "^3.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
     "node_modules/p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -10966,18 +12476,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/p-timeout": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-      "dev": true,
-      "dependencies": {
-        "p-finally": "^1.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@@ -10999,6 +12497,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
@@ -11062,10 +12578,16 @@
         "node": ">=8"
       }
     },
+    "node_modules/picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "node_modules/picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true,
       "engines": {
         "node": ">=8.6"
@@ -11151,6 +12673,145 @@
         "ms": "^2.1.1"
       }
     },
+    "node_modules/postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "dev": true,
+      "funding": [
+        {
+          "type": "opencollective",
+          "url": "https://opencollective.com/postcss/"
+        },
+        {
+          "type": "tidelift",
+          "url": "https://tidelift.com/funding/github/npm/postcss"
+        }
+      ],
+      "dependencies": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >=14"
+      }
+    },
+    "node_modules/postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true
+    },
+    "node_modules/postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "dependencies": {
+        "postcss-selector-parser": "^6.0.4"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "dependencies": {
+        "icss-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^10 || ^12 || >= 14"
+      },
+      "peerDependencies": {
+        "postcss": "^8.1.0"
+      }
+    },
+    "node_modules/postcss-resolve-nested-selector": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+      "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+      "dev": true
+    },
+    "node_modules/postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/postcss/"
+      },
+      "peerDependencies": {
+        "postcss": "^8.3.3"
+      }
+    },
+    "node_modules/postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "dependencies": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
+    "node_modules/postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "node_modules/preact": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.7.1.tgz",
+      "integrity": "sha512-MufnRFz39aIhs9AMFisonjzTud1PK1bY+jcJLo6m2T9Uh8AqjD77w11eAAawmjUogoGOnipECq7e/1RClIKsxg==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/preact"
+      }
+    },
     "node_modules/prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -11214,15 +12875,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
-    "node_modules/progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.0"
-      }
-    },
     "node_modules/prompts": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.1.tgz",
@@ -11236,6 +12888,23 @@
         "node": ">= 6"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true
+    },
     "node_modules/proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -11249,12 +12918,6 @@
         "node": ">= 0.10"
       }
     },
-    "node_modules/prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
-    },
     "node_modules/psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -11270,15 +12933,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.4.x"
-      }
-    },
     "node_modules/queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
@@ -11299,6 +12953,15 @@
         }
       ]
     },
+    "node_modules/quick-lru": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -11361,36 +13024,89 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "dev": true,
-      "dependencies": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "bin": {
-        "rc": "cli.js"
-      }
-    },
-    "node_modules/rc/node_modules/strip-json-comments": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-      "dev": true,
-      "engines": {
-        "node": ">=0.10.0"
-      }
-    },
     "node_modules/react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "node_modules/read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "dependencies": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "dependencies": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/read-pkg-up/node_modules/type-fest": {
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+      "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/read-pkg/node_modules/hosted-git-info": {
+      "version": "2.8.9",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+      "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+      "dev": true
+    },
+    "node_modules/read-pkg/node_modules/normalize-package-data": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+      "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+      "dev": true,
+      "dependencies": {
+        "hosted-git-info": "^2.1.4",
+        "resolve": "^1.10.0",
+        "semver": "2 || 3 || 4 || 5",
+        "validate-npm-package-license": "^3.0.1"
+      }
+    },
+    "node_modules/read-pkg/node_modules/semver": {
+      "version": "5.7.1",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+      "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+      "dev": true,
+      "bin": {
+        "semver": "bin/semver"
+      }
+    },
+    "node_modules/read-pkg/node_modules/type-fest": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+      "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -11407,9 +13123,9 @@
       }
     },
     "node_modules/readdirp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "dependencies": {
         "picomatch": "^2.2.1"
@@ -11430,6 +13146,19 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "dependencies": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -11464,13 +13193,14 @@
       }
     },
     "node_modules/regexp.prototype.flags": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
-      "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
       "dev": true,
       "dependencies": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
       },
       "engines": {
         "node": ">= 0.4"
@@ -11480,9 +13210,9 @@
       }
     },
     "node_modules/regexpp": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
-      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -11662,12 +13392,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
-    "node_modules/sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
-    },
     "node_modules/saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -11705,12 +13429,15 @@
       "dev": true
     },
     "node_modules/selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
       "dev": true,
       "dependencies": {
-        "node-forge": "^0.10.0"
+        "node-forge": "^1"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/semver": {
@@ -11896,10 +13623,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/signal-exit": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
     "node_modules/simple-concat": {
@@ -11923,9 +13664,9 @@
       ]
     },
     "node_modules/simple-get": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz",
-      "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
       "dev": true,
       "dependencies": {
         "decompress-response": "^4.2.0",
@@ -12033,10 +13774,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/source-map-resolve": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+      "deprecated": "See https://github.com/lydell/source-map-resolve#deprecated",
+      "dev": true,
+      "dependencies": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0"
+      }
+    },
     "node_modules/source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "dependencies": {
         "buffer-from": "^1.0.0",
@@ -12052,6 +13813,38 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dev": true,
+      "dependencies": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "node_modules/spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "dependencies": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "node_modules/spdx-license-ids": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz",
+      "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
+      "dev": true
+    },
     "node_modules/spdy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -12161,26 +13954,73 @@
       }
     },
     "node_modules/string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
       "dependencies": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
         "node": ">=8"
       }
     },
-    "node_modules/strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
       "dev": true,
       "dependencies": {
-        "ansi-regex": "^5.0.0"
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/strip-ansi": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^5.0.1"
       },
       "engines": {
         "node": ">=8"
@@ -12204,6 +14044,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "dependencies": {
+        "min-indent": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
@@ -12216,6 +14068,176 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "^5.0.0"
+      }
+    },
+    "node_modules/style-search": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+      "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
+      "dev": true
+    },
+    "node_modules/stylelint": {
+      "version": "14.9.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.9.1.tgz",
+      "integrity": "sha512-RdAkJdPiLqHawCSnu21nE27MjNXaVd4WcOHA4vK5GtIGjScfhNnaOuWR2wWdfKFAvcWQPOYe311iveiVKSmwsA==",
+      "dev": true,
+      "dependencies": {
+        "@csstools/selector-specificity": "^2.0.1",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.2",
+        "cosmiconfig": "^7.0.1",
+        "css-functions-list": "^3.1.0",
+        "debug": "^4.3.4",
+        "execall": "^2.0.0",
+        "fast-glob": "^3.2.11",
+        "fastest-levenshtein": "^1.0.12",
+        "file-entry-cache": "^6.0.1",
+        "get-stdin": "^8.0.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.2.0",
+        "ignore": "^5.2.0",
+        "import-lazy": "^4.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.25.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^9.0.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "style-search": "^0.1.0",
+        "supports-hyperlinks": "^2.2.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.8.0",
+        "v8-compile-cache": "^2.3.0",
+        "write-file-atomic": "^4.0.1"
+      },
+      "bin": {
+        "stylelint": "bin/stylelint.js"
+      },
+      "engines": {
+        "node": "^12.20.0 || ^14.13.1 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/stylelint"
+      }
+    },
+    "node_modules/stylelint-config-css-modules": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-css-modules/-/stylelint-config-css-modules-4.1.0.tgz",
+      "integrity": "sha512-w6d552NscwvpUEaUcmq8GgWXKRv6lVHLbDj6QIHSM2vCWr83qRqRvXBJCfXDyaG/J3Zojw2inU9VvU99ZlXuUw==",
+      "dev": true,
+      "optionalDependencies": {
+        "stylelint-scss": "^4.2.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.5.1"
+      }
+    },
+    "node_modules/stylelint-config-recommended": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-8.0.0.tgz",
+      "integrity": "sha512-IK6dWvE000+xBv9jbnHOnBq01gt6HGVB2ZTsot+QsMpe82doDQ9hvplxfv4YnpEuUwVGGd9y6nbaAnhrjcxhZQ==",
+      "dev": true,
+      "peerDependencies": {
+        "stylelint": "^14.8.0"
+      }
+    },
+    "node_modules/stylelint-config-standard": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz",
+      "integrity": "sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==",
+      "dev": true,
+      "dependencies": {
+        "stylelint-config-recommended": "^8.0.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.9.0"
+      }
+    },
+    "node_modules/stylelint-scss": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.2.0.tgz",
+      "integrity": "sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==",
+      "dev": true,
+      "optional": true,
+      "dependencies": {
+        "lodash": "^4.17.21",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-selector-parser": "^6.0.6",
+        "postcss-value-parser": "^4.1.0"
+      },
+      "peerDependencies": {
+        "stylelint": "^14.5.1"
+      }
+    },
+    "node_modules/stylelint/node_modules/balanced-match": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+      "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+      "dev": true
+    },
+    "node_modules/stylelint/node_modules/get-stdin": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+      "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/stylelint/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/stylelint/node_modules/write-file-atomic": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.1.tgz",
+      "integrity": "sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==",
+      "dev": true,
+      "dependencies": {
+        "imurmurhash": "^0.1.4",
+        "signal-exit": "^3.0.7"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16"
+      }
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -12262,6 +14284,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
     "node_modules/symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -12269,24 +14297,25 @@
       "dev": true
     },
     "node_modules/table": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
-      "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
+      "integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
       "dev": true,
       "dependencies": {
-        "ajv": "^7.0.2",
-        "lodash": "^4.17.20",
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
         "slice-ansi": "^4.0.0",
-        "string-width": "^4.2.0"
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
       },
       "engines": {
         "node": ">=10.0.0"
       }
     },
     "node_modules/table/node_modules/ajv": {
-      "version": "7.2.3",
-      "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.3.tgz",
-      "integrity": "sha512-idv5WZvKVXDqKralOImQgPM9v6WOdLNa0IY3B3doOjw/YxRGT8I+allIJ6kd7Uaj+SF1xZUSU+nPM5aDNBVtnw==",
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
@@ -12306,57 +14335,42 @@
       "dev": true
     },
     "node_modules/tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "dev": true,
       "engines": {
         "node": ">=6"
       }
     },
     "node_modules/tar": {
-      "version": "4.4.19",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
-      "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dev": true,
       "dependencies": {
-        "chownr": "^1.1.4",
-        "fs-minipass": "^1.2.7",
-        "minipass": "^2.9.0",
-        "minizlib": "^1.3.3",
-        "mkdirp": "^0.5.5",
-        "safe-buffer": "^5.2.1",
-        "yallist": "^3.1.1"
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^3.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
       },
       "engines": {
-        "node": ">=4.5"
+        "node": ">= 10"
       }
     },
-    "node_modules/tar/node_modules/safe-buffer": {
-      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-      "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+    "node_modules/tar/node_modules/mkdirp": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+      "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
       "dev": true,
-      "funding": [
-        {
-          "type": "github",
-          "url": "https://github.com/sponsors/feross"
-        },
-        {
-          "type": "patreon",
-          "url": "https://www.patreon.com/feross"
-        },
-        {
-          "type": "consulting",
-          "url": "https://feross.org/support"
-        }
-      ]
-    },
-    "node_modules/tar/node_modules/yallist": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
-      "dev": true
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
     },
     "node_modules/terminal-link": {
       "version": "2.1.1",
@@ -12375,14 +14389,15 @@
       }
     },
     "node_modules/terser": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.6.1.tgz",
-      "integrity": "sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dev": true,
       "dependencies": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
+        "source-map-support": "~0.5.20"
       },
       "bin": {
         "terser": "bin/terser"
@@ -12439,13 +14454,16 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/terser/node_modules/source-map": {
-      "version": "0.7.3",
-      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-      "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+    "node_modules/terser/node_modules/acorn": {
+      "version": "8.7.1",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+      "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
       "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
       "engines": {
-        "node": ">= 8"
+        "node": ">=0.4.0"
       }
     },
     "node_modules/test-exclude": {
@@ -12542,6 +14560,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/trim-newlines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+      "dev": true,
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/ts-jest": {
       "version": "27.0.5",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.0.5.tgz",
@@ -12598,23 +14625,22 @@
       }
     },
     "node_modules/ts-loader": {
-      "version": "8.0.18",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-8.0.18.tgz",
-      "integrity": "sha512-hRZzkydPX30XkLaQwJTDcWDoxZHK6IrEMDQpNd7tgcakFruFkeUp/aY+9hBb7BUGb+ZWKI0jiOGMo0MckwzdDQ==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.0.tgz",
+      "integrity": "sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==",
       "dev": true,
       "dependencies": {
         "chalk": "^4.1.0",
-        "enhanced-resolve": "^4.0.0",
-        "loader-utils": "^2.0.0",
+        "enhanced-resolve": "^5.0.0",
         "micromatch": "^4.0.0",
         "semver": "^7.3.4"
       },
       "engines": {
-        "node": ">=10.0.0"
+        "node": ">=12.0.0"
       },
       "peerDependencies": {
         "typescript": "*",
-        "webpack": "*"
+        "webpack": "^5.0.0"
       }
     },
     "node_modules/ts-loader/node_modules/ansi-styles": {
@@ -12779,9 +14805,9 @@
       }
     },
     "node_modules/typescript": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
-      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
+      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
       "dev": true,
       "bin": {
         "tsc": "bin/tsc",
@@ -12791,6 +14817,21 @@
         "node": ">=4.2.0"
       }
     },
+    "node_modules/unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "dependencies": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -12858,22 +14899,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "node_modules/url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "dependencies": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      }
-    },
-    "node_modules/url/node_modules/punycode": {
-      "version": "1.3.2",
-      "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-      "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-      "dev": true
-    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -12918,6 +14943,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "dependencies": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "node_modules/vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -13035,24 +15070,22 @@
       }
     },
     "node_modules/webpack-cli": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
-      "integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
       "dev": true,
       "dependencies": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.1",
-        "@webpack-cli/info": "^1.2.2",
-        "@webpack-cli/serve": "^1.3.0",
-        "colorette": "^1.2.1",
+        "@webpack-cli/configtest": "^1.1.0",
+        "@webpack-cli/info": "^1.4.0",
+        "@webpack-cli/serve": "^1.6.0",
+        "colorette": "^2.0.14",
         "commander": "^7.0.0",
-        "enquirer": "^2.3.6",
         "execa": "^5.0.0",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
         "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
         "webpack-merge": "^5.7.3"
       },
       "bin": {
@@ -13068,9 +15101,6 @@
         "@webpack-cli/generators": {
           "optional": true
         },
-        "@webpack-cli/init": {
-          "optional": true
-        },
         "@webpack-cli/migrate": {
           "optional": true
         },
@@ -13082,6 +15112,12 @@
         }
       }
     },
+    "node_modules/webpack-cli/node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
     "node_modules/webpack-cli/node_modules/commander": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -13092,20 +15128,19 @@
       }
     },
     "node_modules/webpack-dev-middleware": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.1.0.tgz",
-      "integrity": "sha512-mpa/FY+DiBu5+r5JUIyTCYWRfkWgyA3/OOE9lwfzV9S70A4vJYLsVRKj5rMFEsezBroy2FmPyQ8oBRVW8QmK1A==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.1.tgz",
+      "integrity": "sha512-81EujCKkyles2wphtdrnPg/QqegC/AtqNH//mQkBYSMqwFVCQrxM6ktB2O/SPlZy7LqeEfTbV3cZARGQz6umhg==",
       "dev": true,
       "dependencies": {
-        "colorette": "^1.2.1",
-        "mem": "^8.0.0",
-        "memfs": "^3.2.0",
-        "mime-types": "^2.1.28",
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.1",
+        "mime-types": "^2.1.31",
         "range-parser": "^1.2.1",
-        "schema-utils": "^3.0.0"
+        "schema-utils": "^4.0.0"
       },
       "engines": {
-        "node": ">= 10.13.0"
+        "node": ">= 12.13.0"
       },
       "funding": {
         "type": "opencollective",
@@ -13115,39 +15150,101 @@
         "webpack": "^4.0.0 || ^5.0.0"
       }
     },
-    "node_modules/webpack-dev-server": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-beta.3.tgz",
-      "integrity": "sha512-Ud7ieH15No/KiSdRuzk+2k+S4gSCR/N7m4hJhesDbKQEZy3P+NPXTXfsimNOZvbVX2TRuIEFB+VdLZFn8DwGwg==",
+    "node_modules/webpack-dev-middleware/node_modules/ajv": {
+      "version": "8.11.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+      "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
       "dev": true,
       "dependencies": {
-        "ansi-html": "^0.0.7",
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-middleware/node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
+    "node_modules/webpack-dev-middleware/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/webpack-dev-middleware/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpack-dev-server": {
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz",
+      "integrity": "sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==",
+      "dev": true,
+      "dependencies": {
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
+        "ansi-html-community": "^0.0.8",
         "bonjour": "^3.5.0",
-        "chokidar": "^3.5.1",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
         "compression": "^1.7.4",
         "connect-history-api-fallback": "^1.6.0",
+        "default-gateway": "^6.0.3",
         "del": "^6.0.0",
         "express": "^4.17.1",
-        "find-cache-dir": "^3.3.1",
         "graceful-fs": "^4.2.6",
         "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^1.3.1",
-        "internal-ip": "^6.2.0",
-        "ipaddr.js": "^2.0.0",
-        "is-absolute-url": "^3.0.3",
-        "killable": "^1.0.1",
-        "open": "^7.4.2",
+        "http-proxy-middleware": "^2.0.0",
+        "ipaddr.js": "^2.0.1",
+        "open": "^8.0.9",
         "p-retry": "^4.5.0",
         "portfinder": "^1.0.28",
-        "schema-utils": "^3.0.0",
-        "selfsigned": "^1.10.11",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.0.0",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.21",
         "spdy": "^4.0.2",
-        "strip-ansi": "^6.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^4.1.0",
-        "ws": "^7.4.5"
+        "strip-ansi": "^7.0.0",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
       },
       "bin": {
         "webpack-dev-server": "bin/webpack-dev-server.js"
@@ -13156,7 +15253,7 @@
         "node": ">= 12.13.0"
       },
       "peerDependencies": {
-        "webpack": "^4.0.0 || ^5.0.0"
+        "webpack": "^4.37.0 || ^5.0.0"
       },
       "peerDependenciesMeta": {
         "webpack-cli": {
@@ -13164,6 +15261,52 @@
         }
       }
     },
+    "node_modules/webpack-dev-server/node_modules/ajv": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+      "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "json-schema-traverse": "^1.0.0",
+        "require-from-string": "^2.0.2",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ajv-keywords": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+      "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+      "dev": true,
+      "dependencies": {
+        "fast-deep-equal": "^3.1.3"
+      },
+      "peerDependencies": {
+        "ajv": "^8.8.2"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ansi-regex": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+      "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/ansi-regex?sponsor=1"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/colorette": {
+      "version": "2.0.16",
+      "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+      "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+      "dev": true
+    },
     "node_modules/webpack-dev-server/node_modules/ipaddr.js": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
@@ -13173,6 +15316,67 @@
         "node": ">= 10"
       }
     },
+    "node_modules/webpack-dev-server/node_modules/json-schema-traverse": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+      "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+      "dev": true
+    },
+    "node_modules/webpack-dev-server/node_modules/schema-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+      "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+      "dev": true,
+      "dependencies": {
+        "@types/json-schema": "^7.0.9",
+        "ajv": "^8.8.0",
+        "ajv-formats": "^2.1.1",
+        "ajv-keywords": "^5.0.0"
+      },
+      "engines": {
+        "node": ">= 12.13.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/strip-ansi": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+      "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+      "dev": true,
+      "dependencies": {
+        "ansi-regex": "^6.0.1"
+      },
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/chalk/strip-ansi?sponsor=1"
+      }
+    },
+    "node_modules/webpack-dev-server/node_modules/ws": {
+      "version": "8.5.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+      "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": "^5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/webpack-merge": {
       "version": "5.8.0",
       "resolved": "https://registry.npmjs.org/webpack-merge/-/webpack-merge-5.8.0.tgz",
@@ -13220,28 +15424,6 @@
         "node": ">=0.4.0"
       }
     },
-    "node_modules/webpack/node_modules/enhanced-resolve": {
-      "version": "5.7.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
-      "integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
-      "dev": true,
-      "dependencies": {
-        "graceful-fs": "^4.2.4",
-        "tapable": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=10.13.0"
-      }
-    },
-    "node_modules/webpack/node_modules/tapable": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
-      "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
-      "dev": true,
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -13309,56 +15491,29 @@
         "node": ">= 8"
       }
     },
+    "node_modules/which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
+      "dev": true,
+      "dependencies": {
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/wide-align": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
       "dev": true,
       "dependencies": {
-        "string-width": "^1.0.2 || 2"
-      }
-    },
-    "node_modules/wide-align/node_modules/ansi-regex": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-      "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/wide-align/node_modules/is-fullwidth-code-point": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-      "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-      "dev": true,
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/wide-align/node_modules/string-width": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-      "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-      "dev": true,
-      "dependencies": {
-        "is-fullwidth-code-point": "^2.0.0",
-        "strip-ansi": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=4"
-      }
-    },
-    "node_modules/wide-align/node_modules/strip-ansi": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-      "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-      "dev": true,
-      "dependencies": {
-        "ansi-regex": "^3.0.0"
-      },
-      "engines": {
-        "node": ">=4"
+        "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
     "node_modules/wildcard": {
@@ -13489,6 +15644,15 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
@@ -13540,12 +15704,12 @@
   },
   "dependencies": {
     "@babel/code-frame": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.13.tgz",
-      "integrity": "sha512-HV1Cm0Q3ZrpCR93tkWOYiuYIgLxZXZFVG2VgK+MBWjUqZTundupbfx2aXarXuw5Ko5aMcjtJgbSs4vUGBS5v6g==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.16.7.tgz",
+      "integrity": "sha512-iAXqUn8IIeBTNd72xsFlgaXHkMBMt6y4HJp1tIaK465CWLT/fG1aqB7ykr95gHHmlBdGbFeWWfyB4NJJ0nmeIg==",
       "dev": true,
       "requires": {
-        "@babel/highlight": "^7.12.13"
+        "@babel/highlight": "^7.16.7"
       }
     },
     "@babel/compat-data": {
@@ -13579,23 +15743,23 @@
       }
     },
     "@babel/generator": {
-      "version": "7.13.9",
-      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.13.9.tgz",
-      "integrity": "sha512-mHOOmY0Axl/JCTkxTU6Lf5sWOg/v8nUa+Xkt4zMTftX0wqmb6Sh7J8gvcehBw7q0AhrhAR+FDacKjCZ2X8K+Sw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.17.10.tgz",
+      "integrity": "sha512-46MJZZo9y3o4kmhBVc7zW7i8dtR1oIK/sdO5NcfcZRhTGYi+KKJRtHNgsU6c4VUcJmUNV/LQdebD/9Dlv4K+Tg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.13.0",
-        "jsesc": "^2.5.1",
-        "source-map": "^0.5.0"
+        "@babel/types": "^7.17.10",
+        "@jridgewell/gen-mapping": "^0.1.0",
+        "jsesc": "^2.5.1"
       }
     },
     "@babel/helper-annotate-as-pure": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.12.13.tgz",
-      "integrity": "sha512-7YXfX5wQ5aYM/BOlbSccHDbuXXFPxeoUmfWtz8le2yTkTZc+BxsiEnENFoi2SlmA8ewDkG2LgIMIVzzn2h8kfw==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.16.7.tgz",
+      "integrity": "sha512-s6t2w/IPQVTAET1HitoowRGXooX8mCgtuP5195wD/QJPV6wYjpujCGF7JuMODVX2ZAJOf1GT6DT9MHEZvLOFSw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-builder-binary-assignment-operator-visitor": {
@@ -13621,16 +15785,18 @@
       }
     },
     "@babel/helper-create-class-features-plugin": {
-      "version": "7.13.11",
-      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.13.11.tgz",
-      "integrity": "sha512-ays0I7XYq9xbjCSvT+EvysLgfc3tOkwCULHjrnscGT3A9qD4sk3wXnJ3of0MAWsWGjdinFvajHU2smYuqXKMrw==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.17.9.tgz",
+      "integrity": "sha512-kUjip3gruz6AJKOq5i3nC6CoCEEF/oHH3cp6tOZhB+IyyyPyW0g1Gfsxn3mkk6S08pIA2y8GQh609v9G/5sHVQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-function-name": "^7.12.13",
-        "@babel/helper-member-expression-to-functions": "^7.13.0",
-        "@babel/helper-optimise-call-expression": "^7.12.13",
-        "@babel/helper-replace-supers": "^7.13.0",
-        "@babel/helper-split-export-declaration": "^7.12.13"
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-member-expression-to-functions": "^7.17.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/helper-replace-supers": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7"
       }
     },
     "@babel/helper-create-regexp-features-plugin": {
@@ -13659,6 +15825,15 @@
         "semver": "^6.1.2"
       }
     },
+    "@babel/helper-environment-visitor": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-environment-visitor/-/helper-environment-visitor-7.16.7.tgz",
+      "integrity": "sha512-SLLb0AAn6PkUeAfKJCCOl9e1R53pQlGAfc4y4XuMRZfqeMYLE0dM1LMhqbGAlGQY0lfw5/ohoYWAe9V1yibRag==",
+      "dev": true,
+      "requires": {
+        "@babel/types": "^7.16.7"
+      }
+    },
     "@babel/helper-explode-assignable-expression": {
       "version": "7.13.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-explode-assignable-expression/-/helper-explode-assignable-expression-7.13.0.tgz",
@@ -13669,51 +15844,40 @@
       }
     },
     "@babel/helper-function-name": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.12.13.tgz",
-      "integrity": "sha512-TZvmPn0UOqmvi5G4vvw0qZTpVptGkB1GL61R6lKvrSdIxGm5Pky7Q3fpKiIkQCAtRCBUwB0PaThlx9vebCDSwA==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.17.9.tgz",
+      "integrity": "sha512-7cRisGlVtiVqZ0MW0/yFB4atgpGLWEHUVYnb448hZK4x+vih0YO5UoS11XIYtZYqHd0dIPMdUSv8q5K4LdMnIg==",
       "dev": true,
       "requires": {
-        "@babel/helper-get-function-arity": "^7.12.13",
-        "@babel/template": "^7.12.13",
-        "@babel/types": "^7.12.13"
-      }
-    },
-    "@babel/helper-get-function-arity": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.12.13.tgz",
-      "integrity": "sha512-DjEVzQNz5LICkzN0REdpD5prGoidvbdYk1BVgRUOINaWJP2t6avB27X1guXK1kXNrX0WMfsrm1A/ZBthYuIMQg==",
-      "dev": true,
-      "requires": {
-        "@babel/types": "^7.12.13"
+        "@babel/template": "^7.16.7",
+        "@babel/types": "^7.17.0"
       }
     },
     "@babel/helper-hoist-variables": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.13.0.tgz",
-      "integrity": "sha512-0kBzvXiIKfsCA0y6cFEIJf4OdzfpRuNk4+YTeHZpGGc666SATFKTz6sRncwFnQk7/ugJ4dSrCj6iJuvW4Qwr2g==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-hoist-variables/-/helper-hoist-variables-7.16.7.tgz",
+      "integrity": "sha512-m04d/0Op34H5v7pbZw6pSKP7weA6lsMvfiIAMeIvkY/R4xQtBSMFEigu9QTZ2qB/9l22vsxtM8a+Q8CzD255fg==",
       "dev": true,
       "requires": {
-        "@babel/traverse": "^7.13.0",
-        "@babel/types": "^7.13.0"
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-member-expression-to-functions": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.13.12.tgz",
-      "integrity": "sha512-48ql1CLL59aKbU94Y88Xgb2VFy7a95ykGRbJJaaVv+LX5U8wFpLfiGXJJGUozsmA1oEh/o5Bp60Voq7ACyA/Sw==",
+      "version": "7.17.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.17.7.tgz",
+      "integrity": "sha512-thxXgnQ8qQ11W2wVUObIqDL4p148VMxkt5T/qpN5k2fboRyzFGFmKsTGViquyM5QHKUy48OZoca8kw4ajaDPyw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.13.12"
+        "@babel/types": "^7.17.0"
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.13.12.tgz",
-      "integrity": "sha512-4cVvR2/1B693IuOvSI20xqqa/+bl7lqAMR59R4iu39R9aOX8/JoYY1sFaNvUMyMBGnHdwvJgUrzNLoUZxXypxA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.7.tgz",
+      "integrity": "sha512-LVtS6TqjJHFc+nYeITRo6VLXve70xmq7wPhWTqDJusJEgGmkAACWwMiTNrvfoQo6hEhFwAIixNkvB0jPXDL8Wg==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.13.12"
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-module-transforms": {
@@ -13733,18 +15897,18 @@
       }
     },
     "@babel/helper-optimise-call-expression": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.13.tgz",
-      "integrity": "sha512-BdWQhoVJkp6nVjB7nkFWcn43dkprYauqtk++Py2eaf/GRDFm5BxRqEIZCiHlZUGAVmtwKcsVL1dC68WmzeFmiA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.16.7.tgz",
+      "integrity": "sha512-EtgBhg7rd/JcnpZFXpBy0ze1YRfdm7BnBX4uKMBd3ixa3RGAE002JZB66FJyNH7g0F38U05pXmA5P8cBh7z+1w==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz",
+      "integrity": "sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==",
       "dev": true
     },
     "@babel/helper-remap-async-to-generator": {
@@ -13759,15 +15923,16 @@
       }
     },
     "@babel/helper-replace-supers": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.13.12.tgz",
-      "integrity": "sha512-Gz1eiX+4yDO8mT+heB94aLVNCL+rbuT2xy4YfyNqu8F+OI6vMvJK891qGBTqL9Uc8wxEvRW92Id6G7sDen3fFw==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.16.7.tgz",
+      "integrity": "sha512-y9vsWilTNaVnVh6xiJfABzsNpgDPKev9HnAgz6Gb1p6UUwf9NepdlsV7VXGCftJM+jqD5f7JIEubcpLjZj5dBw==",
       "dev": true,
       "requires": {
-        "@babel/helper-member-expression-to-functions": "^7.13.12",
-        "@babel/helper-optimise-call-expression": "^7.12.13",
-        "@babel/traverse": "^7.13.0",
-        "@babel/types": "^7.13.12"
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-member-expression-to-functions": "^7.16.7",
+        "@babel/helper-optimise-call-expression": "^7.16.7",
+        "@babel/traverse": "^7.16.7",
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-simple-access": {
@@ -13789,24 +15954,24 @@
       }
     },
     "@babel/helper-split-export-declaration": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz",
-      "integrity": "sha512-tCJDltF83htUtXx5NLcaDqRmknv652ZWCHyoTETf1CXYJdPC7nohZohjUgieXhv0hTJdRf2FjDueFehdNucpzg==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.16.7.tgz",
+      "integrity": "sha512-xbWoy/PFoxSWazIToT9Sif+jJTlrMcndIsaOKvTA6u7QEo7ilkRZpjew18/W3c7nm8fXdUDXh02VXTbZ0pGDNw==",
       "dev": true,
       "requires": {
-        "@babel/types": "^7.12.13"
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/helper-validator-identifier": {
-      "version": "7.12.11",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz",
-      "integrity": "sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.16.7.tgz",
+      "integrity": "sha512-hsEnFemeiW4D08A5gUAZxLBTXpZ39P+a+DGDsHw1yxqyQ/jzFEnxf5uTEGp+3bzAbNOxU1paTgYS4ECU/IgfDw==",
       "dev": true
     },
     "@babel/helper-validator-option": {
-      "version": "7.12.17",
-      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.12.17.tgz",
-      "integrity": "sha512-TopkMDmLzq8ngChwRlyjR6raKD6gMSae4JdYDB8bByKreQgG0RBTuKe9LRxW3wFtUnjxOPRKBDwEH6Mg5KeDfw==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/helper-validator-option/-/helper-validator-option-7.16.7.tgz",
+      "integrity": "sha512-TRtenOuRUVo9oIQGPC5G9DgK4743cdxvtOw0weQNpZXaS16SCBi5MNjZF8vba3ETURjZpTbVn7Vvcf2eAwFozQ==",
       "dev": true
     },
     "@babel/helper-wrap-function": {
@@ -13833,20 +15998,20 @@
       }
     },
     "@babel/highlight": {
-      "version": "7.13.10",
-      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.13.10.tgz",
-      "integrity": "sha512-5aPpe5XQPzflQrFwL1/QoeHkP2MsA4JCntcXHRhEsdsfPVkvPi2w7Qix4iV7t5S/oC9OodGrggd8aco1g3SZFg==",
+      "version": "7.17.9",
+      "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.17.9.tgz",
+      "integrity": "sha512-J9PfEKCbFIv2X5bjTMiZu6Vf341N05QIY+d6FvVKynkG1S7G0j3I0QoRtWIrXhZ+/Nlb5Q0MzqL7TokEJ5BNHg==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.12.11",
+        "@babel/helper-validator-identifier": "^7.16.7",
         "chalk": "^2.0.0",
         "js-tokens": "^4.0.0"
       }
     },
     "@babel/parser": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.13.12.tgz",
-      "integrity": "sha512-4T7Pb244rxH24yR116LAuJ+adxXXnHhZaLJjegJVKSdoNCe4x1eDBaud5YIcQFcqzsaD5BHvJw5BQ0AZapdCRw==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.17.10.tgz",
+      "integrity": "sha512-n2Q6i+fnJqzOaq2VkdXxy2TCPCWQZHiCo0XqmrCvDWcZQKRyZzYi4Z0yxlBuN0w+r2ZHmre+Q087DSrw3pbJDQ==",
       "dev": true
     },
     "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": {
@@ -14058,6 +16223,15 @@
         "@babel/helper-plugin-utils": "^7.8.0"
       }
     },
+    "@babel/plugin-syntax-jsx": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz",
+      "integrity": "sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7"
+      }
+    },
     "@babel/plugin-syntax-logical-assignment-operators": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz",
@@ -14122,12 +16296,12 @@
       }
     },
     "@babel/plugin-syntax-typescript": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.14.5.tgz",
-      "integrity": "sha512-u6OXzDaIXjEstBRRoBCQ/uKQKlbuaeE5in0RvWdA4pN6AhqxTIwUsnHPU1CFZA/amYObMsuWhYfRl3Ch90HD0Q==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.17.10.tgz",
+      "integrity": "sha512-xJefea1DWXW09pW4Tm9bjwVlPDyYA2it3fWlmEjpYz6alPvTUjL0EOzNzI/FEOyI3r4/J7uVH5UqKgl1TQ5hqQ==",
       "dev": true,
       "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.16.7"
       }
     },
     "@babel/plugin-transform-arrow-functions": {
@@ -14359,6 +16533,19 @@
         "@babel/helper-plugin-utils": "^7.12.13"
       }
     },
+    "@babel/plugin-transform-react-jsx": {
+      "version": "7.17.3",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.17.3.tgz",
+      "integrity": "sha512-9tjBm4O07f7mzKSIlEmPdiE6ub7kfIe6Cd+w+oQebpATfTQMAgW+YOuWxogbKVTulA+MEO7byMeIUtQ1z+z+ZQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-annotate-as-pure": "^7.16.7",
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-jsx": "^7.16.7",
+        "@babel/types": "^7.17.0"
+      }
+    },
     "@babel/plugin-transform-regenerator": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.12.13.tgz",
@@ -14423,6 +16610,17 @@
         "@babel/helper-plugin-utils": "^7.12.13"
       }
     },
+    "@babel/plugin-transform-typescript": {
+      "version": "7.16.8",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.16.8.tgz",
+      "integrity": "sha512-bHdQ9k7YpBDO2d0NVfkj51DpQcvwIzIusJ7mEUaMlbZq3Kt/U47j24inXZHQ5MDiYpCs+oZiwnXyKedE8+q7AQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-create-class-features-plugin": "^7.16.7",
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/plugin-syntax-typescript": "^7.16.7"
+      }
+    },
     "@babel/plugin-transform-unicode-escapes": {
       "version": "7.12.13",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.12.13.tgz",
@@ -14532,6 +16730,17 @@
         "esutils": "^2.0.2"
       }
     },
+    "@babel/preset-typescript": {
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/preset-typescript/-/preset-typescript-7.16.7.tgz",
+      "integrity": "sha512-WbVEmgXdIyvzB77AQjGBEyYPZx+8tTsO50XtfozQrkW8QB2rLJpH2lgx0TRw5EJrBxOZQ+wCcyPVQvS8tjEHpQ==",
+      "dev": true,
+      "requires": {
+        "@babel/helper-plugin-utils": "^7.16.7",
+        "@babel/helper-validator-option": "^7.16.7",
+        "@babel/plugin-transform-typescript": "^7.16.7"
+      }
+    },
     "@babel/runtime": {
       "version": "7.13.10",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.13.10.tgz",
@@ -14552,41 +16761,41 @@
       }
     },
     "@babel/template": {
-      "version": "7.12.13",
-      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz",
-      "integrity": "sha512-/7xxiGA57xMo/P2GVvdEumr8ONhFOhfgq2ihK3h1e6THqzTAkHbkXgB0xI9yeTfIUoH3+oAeHhqm/I43OTbbjA==",
+      "version": "7.16.7",
+      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.16.7.tgz",
+      "integrity": "sha512-I8j/x8kHUrbYRTUxXrrMbfCa7jxkE7tZre39x3kjr9hvI82cK1FfqLygotcWN5kdPGWcLdWMHpSBavse5tWw3w==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/parser": "^7.12.13",
-        "@babel/types": "^7.12.13"
+        "@babel/code-frame": "^7.16.7",
+        "@babel/parser": "^7.16.7",
+        "@babel/types": "^7.16.7"
       }
     },
     "@babel/traverse": {
-      "version": "7.13.0",
-      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.13.0.tgz",
-      "integrity": "sha512-xys5xi5JEhzC3RzEmSGrs/b3pJW/o87SypZ+G/PhaE7uqVQNv/jlmVIBXuoh5atqQ434LfXV+sf23Oxj0bchJQ==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.17.10.tgz",
+      "integrity": "sha512-VmbrTHQteIdUUQNTb+zE12SHS/xQVIShmBPhlNP12hD5poF2pbITW1Z4172d03HegaQWhLffdkRJYtAzp0AGcw==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "^7.12.13",
-        "@babel/generator": "^7.13.0",
-        "@babel/helper-function-name": "^7.12.13",
-        "@babel/helper-split-export-declaration": "^7.12.13",
-        "@babel/parser": "^7.13.0",
-        "@babel/types": "^7.13.0",
+        "@babel/code-frame": "^7.16.7",
+        "@babel/generator": "^7.17.10",
+        "@babel/helper-environment-visitor": "^7.16.7",
+        "@babel/helper-function-name": "^7.17.9",
+        "@babel/helper-hoist-variables": "^7.16.7",
+        "@babel/helper-split-export-declaration": "^7.16.7",
+        "@babel/parser": "^7.17.10",
+        "@babel/types": "^7.17.10",
         "debug": "^4.1.0",
-        "globals": "^11.1.0",
-        "lodash": "^4.17.19"
+        "globals": "^11.1.0"
       }
     },
     "@babel/types": {
-      "version": "7.13.12",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.13.12.tgz",
-      "integrity": "sha512-K4nY2xFN4QMvQwkQ+zmBDp6ANMbVNw6BbxWmYA4qNjhR9W+Lj/8ky5MEY2Me5r+B2c6/v6F53oMndG+f9s3IiA==",
+      "version": "7.17.10",
+      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.17.10.tgz",
+      "integrity": "sha512-9O26jG0mBYfGkUYCYZRnBwbVLd1UZOICEr2Em6InB6jVfsAv1GKgwXHmrSg+WFWDmeKTA6vyTZiN8tCSM5Oo3A==",
       "dev": true,
       "requires": {
-        "@babel/helper-validator-identifier": "^7.12.11",
-        "lodash": "^4.17.19",
+        "@babel/helper-validator-identifier": "^7.16.7",
         "to-fast-properties": "^2.0.0"
       }
     },
@@ -14596,6 +16805,13 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "@csstools/selector-specificity": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@csstools/selector-specificity/-/selector-specificity-2.0.1.tgz",
+      "integrity": "sha512-aG20vknL4/YjQF9BSV7ts4EWm/yrjagAN7OWBNmlbEOUiu0llj4OGrFoOKK3g2vey4/p2omKCoHrWtPxSwV3HA==",
+      "dev": true,
+      "requires": {}
+    },
     "@discoveryjs/json-ext": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.2.tgz",
@@ -14603,39 +16819,71 @@
       "dev": true
     },
     "@eslint/eslintrc": {
-      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.4.0.tgz",
-      "integrity": "sha512-2ZPCc+uNbjV5ERJr+aKSPRwZgKd2z11x0EgLvb1PURmUrn9QNRXFqje0Ldq454PfAVyaJYyrDvvIKSFP4NnBog==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
+      "integrity": "sha512-UWW0TMTmk2d7hLcWD1/e2g5HDM/HQ3csaLSqXCfqwh4uNDuNqlaKWXmEsL4Cs41Z0KnILNvwbHAah3C2yt06kw==",
       "dev": true,
       "requires": {
         "ajv": "^6.12.4",
-        "debug": "^4.1.1",
-        "espree": "^7.3.0",
-        "globals": "^12.1.0",
-        "ignore": "^4.0.6",
+        "debug": "^4.3.2",
+        "espree": "^9.3.2",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
         "import-fresh": "^3.2.1",
-        "js-yaml": "^3.13.1",
-        "minimatch": "^3.0.4",
+        "js-yaml": "^4.1.0",
+        "minimatch": "^3.1.2",
         "strip-json-comments": "^3.1.1"
       },
       "dependencies": {
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
         "globals": {
-          "version": "12.4.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-12.4.0.tgz",
-          "integrity": "sha512-BWICuzzDvDoH54NHKCseDanAhE3CeDorgDL5MT6LMXXj2WCnd9UC2szdk4AWLfjdgNBCXLUanXYcpBBKOSWGwg==",
+          "version": "13.15.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz",
+          "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==",
           "dev": true,
           "requires": {
-            "type-fest": "^0.8.1"
+            "type-fest": "^0.20.2"
+          }
+        },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
           }
         },
         "type-fest": {
-          "version": "0.8.1",
-          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
-          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "version": "0.20.2",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
+          "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
           "dev": true
         }
       }
     },
+    "@humanwhocodes/config-array": {
+      "version": "0.9.5",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.9.5.tgz",
+      "integrity": "sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==",
+      "dev": true,
+      "requires": {
+        "@humanwhocodes/object-schema": "^1.2.1",
+        "debug": "^4.1.1",
+        "minimatch": "^3.0.4"
+      }
+    },
+    "@humanwhocodes/object-schema": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz",
+      "integrity": "sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA==",
+      "dev": true
+    },
     "@istanbuljs/load-nyc-config": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz",
@@ -15522,29 +17770,118 @@
         }
       }
     },
-    "@nodelib/fs.scandir": {
-      "version": "2.1.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz",
-      "integrity": "sha512-33g3pMJk3bg5nXbL/+CY6I2eJDzZAni49PfJnL5fghPTggPvBd/pFNSgJsdAgWptuFu7qq/ERvOYFlhvsLTCKA==",
+    "@jridgewell/gen-mapping": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.1.1.tgz",
+      "integrity": "sha512-sQXCasFk+U8lWYEe66WxRDOE9PjVz4vSM51fTu3Hw+ClTpUSQb718772vH3pyS5pShp6lvQM7SxgIDXXXmOX7w==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.stat": "2.0.4",
+        "@jridgewell/set-array": "^1.0.0",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "@jridgewell/resolve-uri": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.0.tgz",
+      "integrity": "sha512-F2msla3tad+Mfht5cJq7LSXcdudKTWCVYUgw6pLFOOHSTtZlj6SWNYAp+AhuqLmWdBO2X5hPrLcu8cVP8fy28w==",
+      "dev": true
+    },
+    "@jridgewell/set-array": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@jridgewell/set-array/-/set-array-1.1.1.tgz",
+      "integrity": "sha512-Ct5MqZkLGEXTVmQYbGtx9SVqD2fqwvdubdps5D3djjAkgkKwT918VNOz65pEHFaYTeWcukmJmH5SwsA9Tn2ObQ==",
+      "dev": true
+    },
+    "@jridgewell/source-map": {
+      "version": "0.3.2",
+      "resolved": "https://registry.npmjs.org/@jridgewell/source-map/-/source-map-0.3.2.tgz",
+      "integrity": "sha512-m7O9o2uR8k2ObDysZYzdfhb08VuEml5oWGiosa1VdaPZ/A6QyPkAJuwN0Q1lhULOf6B7MtQmHENS743hWtCrgw==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/gen-mapping": "^0.3.0",
+        "@jridgewell/trace-mapping": "^0.3.9"
+      },
+      "dependencies": {
+        "@jridgewell/gen-mapping": {
+          "version": "0.3.2",
+          "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.2.tgz",
+          "integrity": "sha512-mh65xKQAzI6iBcFzwv28KVWSmCkdRBWoOh+bYQGW3+6OZvbbN3TqMGo5hqYxQniRcH9F2VZIoJCm4pa3BPDK/A==",
+          "dev": true,
+          "requires": {
+            "@jridgewell/set-array": "^1.0.1",
+            "@jridgewell/sourcemap-codec": "^1.4.10",
+            "@jridgewell/trace-mapping": "^0.3.9"
+          }
+        }
+      }
+    },
+    "@jridgewell/sourcemap-codec": {
+      "version": "1.4.13",
+      "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.13.tgz",
+      "integrity": "sha512-GryiOJmNcWbovBxTfZSF71V/mXbgcV3MewDe3kIMCLyIh5e7SKAeUZs+rMnJ8jkMolZ/4/VsdBmMrw3l+VdZ3w==",
+      "dev": true
+    },
+    "@jridgewell/trace-mapping": {
+      "version": "0.3.14",
+      "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.14.tgz",
+      "integrity": "sha512-bJWEfQ9lPTvm3SneWwRFVLzrh6nhjwqw7TUFFBEMzwvg7t7PCDenf2lDwqo4NQXzdpgBXyFgDWnQA+2vkruksQ==",
+      "dev": true,
+      "requires": {
+        "@jridgewell/resolve-uri": "^3.0.3",
+        "@jridgewell/sourcemap-codec": "^1.4.10"
+      }
+    },
+    "@mapbox/node-pre-gyp": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/@mapbox/node-pre-gyp/-/node-pre-gyp-1.0.7.tgz",
+      "integrity": "sha512-PplSvl4pJ5N3BkVjAdDzpPhVUPdC73JgttkR+LnBx2OORC1GCQsBjUeEuipf9uOaAM1SbxcdZFfR3KDTKm2S0A==",
+      "dev": true,
+      "requires": {
+        "detect-libc": "^1.0.3",
+        "https-proxy-agent": "^5.0.0",
+        "make-dir": "^3.1.0",
+        "node-fetch": "^2.6.5",
+        "nopt": "^5.0.0",
+        "npmlog": "^6.0.0",
+        "rimraf": "^3.0.2",
+        "semver": "^7.3.5",
+        "tar": "^6.1.11"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.5",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
+          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "@nodelib/fs.scandir": {
+      "version": "2.1.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
+      "integrity": "sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==",
+      "dev": true,
+      "requires": {
+        "@nodelib/fs.stat": "2.0.5",
         "run-parallel": "^1.1.9"
       }
     },
     "@nodelib/fs.stat": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.4.tgz",
-      "integrity": "sha512-IYlHJA0clt2+Vg7bccq+TzRdJvv19c2INqBSsoOLp1je7xjtr7J26+WXR72MCdvU9q1qTzIWDfhMf+DRvQJK4Q==",
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.stat/-/fs.stat-2.0.5.tgz",
+      "integrity": "sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==",
       "dev": true
     },
     "@nodelib/fs.walk": {
-      "version": "1.2.6",
-      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.6.tgz",
-      "integrity": "sha512-8Broas6vTtW4GIXTAHDoE32hnN2M5ykgCpWGbuXHQ15vEMqr23pB76e/GZcYsZCHALv50ktd24qhEyKr6wBtow==",
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/@nodelib/fs.walk/-/fs.walk-1.2.8.tgz",
+      "integrity": "sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==",
       "dev": true,
       "requires": {
-        "@nodelib/fs.scandir": "2.1.4",
+        "@nodelib/fs.scandir": "2.1.5",
         "fastq": "^1.6.0"
       }
     },
@@ -15633,6 +17970,181 @@
         }
       }
     },
+    "@testing-library/jest-dom": {
+      "version": "5.16.4",
+      "resolved": "https://registry.npmjs.org/@testing-library/jest-dom/-/jest-dom-5.16.4.tgz",
+      "integrity": "sha512-Gy+IoFutbMQcky0k+bqqumXZ1cTGswLsFqmNLzNdSKkU9KGV2u9oXhukCbbJ9/LRPKiqwxEE8VpV/+YZlfkPUA==",
+      "dev": true,
+      "requires": {
+        "@babel/runtime": "^7.9.2",
+        "@types/testing-library__jest-dom": "^5.9.1",
+        "aria-query": "^5.0.0",
+        "chalk": "^3.0.0",
+        "css": "^3.0.0",
+        "css.escape": "^1.5.1",
+        "dom-accessibility-api": "^0.5.6",
+        "lodash": "^4.17.15",
+        "redent": "^3.0.0"
+      },
+      "dependencies": {
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "aria-query": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+          "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-3.0.0.tgz",
+          "integrity": "sha512-4D3B6Wf41KOYRFdszmDqMCGq5VV/uMAB273JILmO+3jAlh8X4qDtdtgCR3fxtbLEMzSx22QdhnDcJvu2u1fVwg==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
+    "@testing-library/preact": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@testing-library/preact/-/preact-3.1.1.tgz",
+      "integrity": "sha512-RHjln1psbU4Sh/l8k9/gG3VNEDIEicUhzZ74uEnb4hJ4H9G9p1iOXEEMXB2oD5sZcjciQhpx1QUryM5/sAtTTQ==",
+      "dev": true,
+      "requires": {
+        "@testing-library/dom": "^8.11.1"
+      },
+      "dependencies": {
+        "@testing-library/dom": {
+          "version": "8.13.0",
+          "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-8.13.0.tgz",
+          "integrity": "sha512-9VHgfIatKNXQNaZTtLnalIy0jNZzY35a4S3oi08YAt9Hv1VsfZ/DfA45lM8D/UhtHBGJ4/lGwp0PZkVndRkoOQ==",
+          "dev": true,
+          "requires": {
+            "@babel/code-frame": "^7.10.4",
+            "@babel/runtime": "^7.12.5",
+            "@types/aria-query": "^4.2.0",
+            "aria-query": "^5.0.0",
+            "chalk": "^4.1.0",
+            "dom-accessibility-api": "^0.5.9",
+            "lz-string": "^1.4.4",
+            "pretty-format": "^27.0.2"
+          }
+        },
+        "ansi-styles": {
+          "version": "4.3.0",
+          "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
+          "integrity": "sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==",
+          "dev": true,
+          "requires": {
+            "color-convert": "^2.0.1"
+          }
+        },
+        "aria-query": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.0.0.tgz",
+          "integrity": "sha512-V+SM7AbUwJ+EBnB8+DXs0hPZHO0W6pqBcc0dW90OwtVG02PswOu/teuARoLQjdDOH+t9pJgGnW5/Qmouf3gPJg==",
+          "dev": true
+        },
+        "chalk": {
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
+          "dev": true,
+          "requires": {
+            "ansi-styles": "^4.1.0",
+            "supports-color": "^7.1.0"
+          }
+        },
+        "color-convert": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
+          "integrity": "sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==",
+          "dev": true,
+          "requires": {
+            "color-name": "~1.1.4"
+          }
+        },
+        "color-name": {
+          "version": "1.1.4",
+          "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
+          "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
+          "dev": true
+        },
+        "has-flag": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-4.0.0.tgz",
+          "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
+          "dev": true
+        },
+        "pretty-format": {
+          "version": "27.5.1",
+          "resolved": "https://registry.npmjs.org/pretty-format/-/pretty-format-27.5.1.tgz",
+          "integrity": "sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^5.0.1",
+            "ansi-styles": "^5.0.0",
+            "react-is": "^17.0.1"
+          },
+          "dependencies": {
+            "ansi-styles": {
+              "version": "5.2.0",
+              "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-5.2.0.tgz",
+              "integrity": "sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==",
+              "dev": true
+            }
+          }
+        },
+        "supports-color": {
+          "version": "7.2.0",
+          "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
+          "integrity": "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw==",
+          "dev": true,
+          "requires": {
+            "has-flag": "^4.0.0"
+          }
+        }
+      }
+    },
     "@testing-library/user-event": {
       "version": "13.1.3",
       "resolved": "https://registry.npmjs.org/@testing-library/user-event/-/user-event-13.1.3.tgz",
@@ -15695,6 +18207,44 @@
         "@babel/types": "^7.3.0"
       }
     },
+    "@types/body-parser": {
+      "version": "1.19.2",
+      "resolved": "https://registry.npmjs.org/@types/body-parser/-/body-parser-1.19.2.tgz",
+      "integrity": "sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==",
+      "dev": true,
+      "requires": {
+        "@types/connect": "*",
+        "@types/node": "*"
+      }
+    },
+    "@types/bonjour": {
+      "version": "3.5.10",
+      "resolved": "https://registry.npmjs.org/@types/bonjour/-/bonjour-3.5.10.tgz",
+      "integrity": "sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect": {
+      "version": "3.4.35",
+      "resolved": "https://registry.npmjs.org/@types/connect/-/connect-3.4.35.tgz",
+      "integrity": "sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
+    "@types/connect-history-api-fallback": {
+      "version": "1.3.5",
+      "resolved": "https://registry.npmjs.org/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz",
+      "integrity": "sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==",
+      "dev": true,
+      "requires": {
+        "@types/express-serve-static-core": "*",
+        "@types/node": "*"
+      }
+    },
     "@types/eslint": {
       "version": "7.2.7",
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-7.2.7.tgz",
@@ -15721,6 +18271,29 @@
       "integrity": "sha512-laIjwTQaD+5DukBZaygQ79K1Z0jb1bPEMRrkXSLjtCcZm+abyp5YbrqpSLzD42FwWW6gK/aS4NYpJ804nG2brg==",
       "dev": true
     },
+    "@types/express": {
+      "version": "4.17.13",
+      "resolved": "https://registry.npmjs.org/@types/express/-/express-4.17.13.tgz",
+      "integrity": "sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==",
+      "dev": true,
+      "requires": {
+        "@types/body-parser": "*",
+        "@types/express-serve-static-core": "^4.17.18",
+        "@types/qs": "*",
+        "@types/serve-static": "*"
+      }
+    },
+    "@types/express-serve-static-core": {
+      "version": "4.17.28",
+      "resolved": "https://registry.npmjs.org/@types/express-serve-static-core/-/express-serve-static-core-4.17.28.tgz",
+      "integrity": "sha512-P1BJAEAW3E2DJUlkgq4tOL3RyMunoWXqbSCygWo5ZIWTjUgN1YnaXWW4VWl/oc8vs/XoYibEGBKP0uZyF4AHig==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*",
+        "@types/qs": "*",
+        "@types/range-parser": "*"
+      }
+    },
     "@types/graceful-fs": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/@types/graceful-fs/-/graceful-fs-4.1.5.tgz",
@@ -15731,9 +18304,9 @@
       }
     },
     "@types/http-proxy": {
-      "version": "1.17.6",
-      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.6.tgz",
-      "integrity": "sha512-+qsjqR75S/ib0ig0R9WN+CDoZeOBU6F2XLewgC4KVgdXiNHiKKHFEMRHOrs5PbYE97D5vataw5wPj4KLYfUkuQ==",
+      "version": "1.17.7",
+      "resolved": "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz",
+      "integrity": "sha512-9hdj6iXH64tHSLTY+Vt2eYOGzSogC+JQ2H7bdPWkuh7KXP5qLllWx++t+K9Wk556c3dkDdPws/SpMRi0sdCT1w==",
       "dev": true,
       "requires": {
         "@types/node": "*"
@@ -15878,9 +18451,9 @@
       }
     },
     "@types/json-schema": {
-      "version": "7.0.7",
-      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.7.tgz",
-      "integrity": "sha512-cxWFQVseBm6O9Gbw1IWb8r6OS4OhSt3hPZLkFApLjM8TEXROBuQGLAH2i2gZpcXdLBIrpXuTDhH7Vbm1iXmNGA==",
+      "version": "7.0.9",
+      "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.9.tgz",
+      "integrity": "sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==",
       "dev": true
     },
     "@types/micromodal": {
@@ -15889,12 +18462,36 @@
       "integrity": "sha512-rQAprHsGUqtbngygYKWKpgbmWCbdR6injIeLELVjapsI7xXCjKlbaet62haRG+CLYOacXzlUlS0me8H+3RG1UQ==",
       "dev": true
     },
+    "@types/mime": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/@types/mime/-/mime-1.3.2.tgz",
+      "integrity": "sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==",
+      "dev": true
+    },
+    "@types/minimist": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.2.tgz",
+      "integrity": "sha512-jhuKLIRrhvCPLqwPcx6INqmKeiA5EWrsCOPhrlFSrbrmU4ZMPjj5Ul/oLCMDO98XRUIwVm78xICz4EPCektzeQ==",
+      "dev": true
+    },
     "@types/node": {
       "version": "14.14.35",
       "resolved": "https://registry.npmjs.org/@types/node/-/node-14.14.35.tgz",
       "integrity": "sha512-Lt+wj8NVPx0zUmUwumiVXapmaLUcAk3yPuHCFVXras9k5VT9TdhJqKqGVUQCD60OTMCl0qxJ57OiTL0Mic3Iag==",
       "dev": true
     },
+    "@types/normalize-package-data": {
+      "version": "2.4.1",
+      "resolved": "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.1.tgz",
+      "integrity": "sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==",
+      "dev": true
+    },
+    "@types/parse-json": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.0.tgz",
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
+    },
     "@types/pixelmatch": {
       "version": "5.2.3",
       "resolved": "https://registry.npmjs.org/@types/pixelmatch/-/pixelmatch-5.2.3.tgz",
@@ -15910,18 +18507,82 @@
       "integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw==",
       "dev": true
     },
+    "@types/qs": {
+      "version": "6.9.7",
+      "resolved": "https://registry.npmjs.org/@types/qs/-/qs-6.9.7.tgz",
+      "integrity": "sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==",
+      "dev": true
+    },
+    "@types/range-parser": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.4.tgz",
+      "integrity": "sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==",
+      "dev": true
+    },
     "@types/retry": {
       "version": "0.12.0",
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.0.tgz",
       "integrity": "sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==",
       "dev": true
     },
+    "@types/serve-index": {
+      "version": "1.9.1",
+      "resolved": "https://registry.npmjs.org/@types/serve-index/-/serve-index-1.9.1.tgz",
+      "integrity": "sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==",
+      "dev": true,
+      "requires": {
+        "@types/express": "*"
+      }
+    },
+    "@types/serve-static": {
+      "version": "1.13.10",
+      "resolved": "https://registry.npmjs.org/@types/serve-static/-/serve-static-1.13.10.tgz",
+      "integrity": "sha512-nCkHGI4w7ZgAdNkrEu0bv+4xNV/XDqW+DydknebMOQwkpDGx8G+HTlj7R7ABI8i8nKxVw0wtKPi1D+lPOkh4YQ==",
+      "dev": true,
+      "requires": {
+        "@types/mime": "^1",
+        "@types/node": "*"
+      }
+    },
+    "@types/sockjs": {
+      "version": "0.3.33",
+      "resolved": "https://registry.npmjs.org/@types/sockjs/-/sockjs-0.3.33.tgz",
+      "integrity": "sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/stack-utils": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz",
       "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==",
       "dev": true
     },
+    "@types/testing-library__jest-dom": {
+      "version": "5.14.3",
+      "resolved": "https://registry.npmjs.org/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.3.tgz",
+      "integrity": "sha512-oKZe+Mf4ioWlMuzVBaXQ9WDnEm1+umLx0InILg+yvZVBBDmzV5KfZyLrCvadtWcx8+916jLmHafcmqqffl+iIw==",
+      "dev": true,
+      "requires": {
+        "@types/jest": "*"
+      }
+    },
+    "@types/wicg-file-system-access": {
+      "version": "2020.9.5",
+      "resolved": "https://registry.npmjs.org/@types/wicg-file-system-access/-/wicg-file-system-access-2020.9.5.tgz",
+      "integrity": "sha512-UYK244awtmcUYQfs7FR8710MJcefL2WvkyHMjA8yJzxd1mo0Gfn88sRZ1Bls7hiUhA2w7ne1gpJ9T5g3G0wOyA==",
+      "dev": true
+    },
+    "@types/ws": {
+      "version": "8.5.3",
+      "resolved": "https://registry.npmjs.org/@types/ws/-/ws-8.5.3.tgz",
+      "integrity": "sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==",
+      "dev": true,
+      "requires": {
+        "@types/node": "*"
+      }
+    },
     "@types/yargs": {
       "version": "15.0.13",
       "resolved": "https://registry.npmjs.org/@types/yargs/-/yargs-15.0.13.tgz",
@@ -15938,24 +18599,26 @@
       "dev": true
     },
     "@typescript-eslint/eslint-plugin": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.28.2.tgz",
-      "integrity": "sha512-PGqpLLzHSxq956rzNGasO3GsAPf2lY9lDUBXhS++SKonglUmJypaUtcKzRtUte8CV7nruwnDxtLUKpVxs0wQBw==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.27.0.tgz",
+      "integrity": "sha512-DDrIA7GXtmHXr1VCcx9HivA39eprYBIFxbQEHI6NyraRDxCGpxAFiYQAT/1Y0vh1C+o2vfBiy4IuPoXxtTZCAQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/experimental-utils": "4.28.2",
-        "@typescript-eslint/scope-manager": "4.28.2",
-        "debug": "^4.3.1",
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/type-utils": "5.27.0",
+        "@typescript-eslint/utils": "5.27.0",
+        "debug": "^4.3.4",
         "functional-red-black-tree": "^1.0.1",
-        "regexpp": "^3.1.0",
-        "semver": "^7.3.5",
+        "ignore": "^5.2.0",
+        "regexpp": "^3.2.0",
+        "semver": "^7.3.7",
         "tsutils": "^3.21.0"
       },
       "dependencies": {
         "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -15963,78 +18626,64 @@
         }
       }
     },
-    "@typescript-eslint/experimental-utils": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-4.28.2.tgz",
-      "integrity": "sha512-MwHPsL6qo98RC55IoWWP8/opTykjTp4JzfPu1VfO2Z0MshNP0UZ1GEV5rYSSnZSUI8VD7iHvtIPVGW5Nfh7klQ==",
-      "dev": true,
-      "requires": {
-        "@types/json-schema": "^7.0.7",
-        "@typescript-eslint/scope-manager": "4.28.2",
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/typescript-estree": "4.28.2",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^3.0.0"
-      },
-      "dependencies": {
-        "eslint-utils": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
-          "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
-          "dev": true,
-          "requires": {
-            "eslint-visitor-keys": "^2.0.0"
-          }
-        }
-      }
-    },
     "@typescript-eslint/parser": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-4.28.2.tgz",
-      "integrity": "sha512-Q0gSCN51eikAgFGY+gnd5p9bhhCUAl0ERMiDKrTzpSoMYRubdB8MJrTTR/BBii8z+iFwz8oihxd0RAdP4l8w8w==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.27.0.tgz",
+      "integrity": "sha512-8oGjQF46c52l7fMiPPvX4It3u3V3JipssqDfHQ2hcR0AeR8Zge+OYyKUCm5b70X72N1qXt0qgHenwN6Gc2SXZA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/scope-manager": "4.28.2",
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/typescript-estree": "4.28.2",
-        "debug": "^4.3.1"
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/typescript-estree": "5.27.0",
+        "debug": "^4.3.4"
       }
     },
     "@typescript-eslint/scope-manager": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-4.28.2.tgz",
-      "integrity": "sha512-MqbypNjIkJFEFuOwPWNDjq0nqXAKZvDNNs9yNseoGBB1wYfz1G0WHC2AVOy4XD7di3KCcW3+nhZyN6zruqmp2A==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.27.0.tgz",
+      "integrity": "sha512-VnykheBQ/sHd1Vt0LJ1JLrMH1GzHO+SzX6VTXuStISIsvRiurue/eRkTqSrG0CexHQgKG8shyJfR4o5VYioB9g==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/visitor-keys": "4.28.2"
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/visitor-keys": "5.27.0"
+      }
+    },
+    "@typescript-eslint/type-utils": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.27.0.tgz",
+      "integrity": "sha512-vpTvRRchaf628Hb/Xzfek+85o//zEUotr1SmexKvTfs7czXfYjXVT/a5yDbpzLBX1rhbqxjDdr1Gyo0x1Fc64g==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/utils": "5.27.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
       }
     },
     "@typescript-eslint/types": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-4.28.2.tgz",
-      "integrity": "sha512-Gr15fuQVd93uD9zzxbApz3wf7ua3yk4ZujABZlZhaxxKY8ojo448u7XTm/+ETpy0V0dlMtj6t4VdDvdc0JmUhA==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.27.0.tgz",
+      "integrity": "sha512-lY6C7oGm9a/GWhmUDOs3xAVRz4ty/XKlQ2fOLr8GAIryGn0+UBOoJDWyHer3UgrHkenorwvBnphhP+zPmzmw0A==",
       "dev": true
     },
     "@typescript-eslint/typescript-estree": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-4.28.2.tgz",
-      "integrity": "sha512-86lLstLvK6QjNZjMoYUBMMsULFw0hPHJlk1fzhAVoNjDBuPVxiwvGuPQq3fsBMCxuDJwmX87tM/AXoadhHRljg==",
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.27.0.tgz",
+      "integrity": "sha512-QywPMFvgZ+MHSLRofLI7BDL+UczFFHyj0vF5ibeChDAJgdTV8k4xgEwF0geFhVlPc1p8r70eYewzpo6ps+9LJQ==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.28.2",
-        "@typescript-eslint/visitor-keys": "4.28.2",
-        "debug": "^4.3.1",
-        "globby": "^11.0.3",
-        "is-glob": "^4.0.1",
-        "semver": "^7.3.5",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/visitor-keys": "5.27.0",
+        "debug": "^4.3.4",
+        "globby": "^11.1.0",
+        "is-glob": "^4.0.3",
+        "semver": "^7.3.7",
         "tsutils": "^3.21.0"
       },
       "dependencies": {
         "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
           "dev": true,
           "requires": {
             "lru-cache": "^6.0.0"
@@ -16042,14 +18691,28 @@
         }
       }
     },
-    "@typescript-eslint/visitor-keys": {
-      "version": "4.28.2",
-      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-4.28.2.tgz",
-      "integrity": "sha512-aT2B4PLyyRDUVUafXzpZFoc0C9t0za4BJAKP5sgWIhG+jHECQZUEjuQSCIwZdiJJ4w4cgu5r3Kh20SOdtEBl0w==",
+    "@typescript-eslint/utils": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.27.0.tgz",
+      "integrity": "sha512-nZvCrkIJppym7cIbP3pOwIkAefXOmfGPnCM0LQfzNaKxJHI6VjI8NC662uoiPlaf5f6ymkTy9C3NQXev2mdXmA==",
       "dev": true,
       "requires": {
-        "@typescript-eslint/types": "4.28.2",
-        "eslint-visitor-keys": "^2.0.0"
+        "@types/json-schema": "^7.0.9",
+        "@typescript-eslint/scope-manager": "5.27.0",
+        "@typescript-eslint/types": "5.27.0",
+        "@typescript-eslint/typescript-estree": "5.27.0",
+        "eslint-scope": "^5.1.1",
+        "eslint-utils": "^3.0.0"
+      }
+    },
+    "@typescript-eslint/visitor-keys": {
+      "version": "5.27.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.27.0.tgz",
+      "integrity": "sha512-46cYrteA2MrIAjv9ai44OQDUoCZyHeGIc4lsjCUX2WT6r4C+kidz1bNiR4017wHOPUythYeH+Sc7/cFP97KEAA==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/types": "5.27.0",
+        "eslint-visitor-keys": "^3.3.0"
       }
     },
     "@webassemblyjs/ast": {
@@ -16199,25 +18862,25 @@
       }
     },
     "@webpack-cli/configtest": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.0.1.tgz",
-      "integrity": "sha512-B+4uBUYhpzDXmwuo3V9yBH6cISwxEI4J+NO5ggDaGEEHb0osY/R7MzeKc0bHURXQuZjMM4qD+bSJCKIuI3eNBQ==",
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/configtest/-/configtest-1.1.0.tgz",
+      "integrity": "sha512-ttOkEkoalEHa7RaFYpM0ErK1xc4twg3Am9hfHhL7MVqlHebnkYd2wuI/ZqTDj0cVzZho6PdinY0phFZV3O0Mzg==",
       "dev": true,
       "requires": {}
     },
     "@webpack-cli/info": {
-      "version": "1.2.2",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.2.2.tgz",
-      "integrity": "sha512-5U9kUJHnwU+FhKH4PWGZuBC1hTEPYyxGSL5jjoBI96Gx8qcYJGOikpiIpFoTq8mmgX3im2zAo2wanv/alD74KQ==",
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/info/-/info-1.4.0.tgz",
+      "integrity": "sha512-F6b+Man0rwE4n0409FyAJHStYA5OIZERxmnUfLVwv0mc0V1wLad3V7jqRlMkgKBeAq07jUvglacNaa6g9lOpuw==",
       "dev": true,
       "requires": {
         "envinfo": "^7.7.3"
       }
     },
     "@webpack-cli/serve": {
-      "version": "1.3.0",
-      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.3.0.tgz",
-      "integrity": "sha512-k2p2VrONcYVX1wRRrf0f3X2VGltLWcv+JzXRBDmvCxGlCeESx4OXw91TsWeKOkp784uNoVQo313vxJFHXPPwfw==",
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/@webpack-cli/serve/-/serve-1.6.0.tgz",
+      "integrity": "sha512-ZkVeqEmRpBV2GHvjjUZqEai2PpUbuq8Bqd//vEYsp63J8WyexI8ppCqVS3Zs0QADf6aWuPdU+0XsPI647PVlQA==",
       "dev": true,
       "requires": {}
     },
@@ -16272,9 +18935,9 @@
       }
     },
     "acorn-jsx": {
-      "version": "5.3.1",
-      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.1.tgz",
-      "integrity": "sha512-K0Ptm/47OKfQRpNQ2J/oIN/3QYiK6FwW+eJbILhsdxh2WTLdl+30o8aGdTbm5JbffpFFAg/g+zi1E+jvJha5ng==",
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
       "dev": true,
       "requires": {}
     },
@@ -16315,6 +18978,35 @@
         "uri-js": "^4.2.2"
       }
     },
+    "ajv-formats": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
+      "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
+      "dev": true,
+      "requires": {
+        "ajv": "^8.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+          "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        }
+      }
+    },
     "ajv-keywords": {
       "version": "3.5.2",
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-3.5.2.tgz",
@@ -16322,12 +19014,6 @@
       "dev": true,
       "requires": {}
     },
-    "ansi-colors": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz",
-      "integrity": "sha512-JoX0apGbHaUJBNl6yF+p6JAFYZ666/hhCGKN5t9QFjbJQKUU/g8MNbFDbvfrgKXvI1QpZplPOnwIo99lX/AAmA==",
-      "dev": true
-    },
     "ansi-escapes": {
       "version": "4.3.2",
       "resolved": "https://registry.npmjs.org/ansi-escapes/-/ansi-escapes-4.3.2.tgz",
@@ -16337,10 +19023,10 @@
         "type-fest": "^0.21.3"
       }
     },
-    "ansi-html": {
-      "version": "0.0.7",
-      "resolved": "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz",
-      "integrity": "sha1-gTWEAhliqenm/QOflA0S9WynhZ4=",
+    "ansi-html-community": {
+      "version": "0.0.8",
+      "resolved": "https://registry.npmjs.org/ansi-html-community/-/ansi-html-community-0.0.8.tgz",
+      "integrity": "sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==",
       "dev": true
     },
     "ansi-regex": {
@@ -16359,9 +19045,9 @@
       }
     },
     "anymatch": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
-      "integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.2.tgz",
+      "integrity": "sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==",
       "dev": true,
       "requires": {
         "normalize-path": "^3.0.0",
@@ -16369,24 +19055,37 @@
       }
     },
     "apple2shader": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/apple2shader/-/apple2shader-0.0.3.tgz",
-      "integrity": "sha512-7nAffvWdGp4FTqpDxgjslN4XqaO9FOUCKnhJ4IPQXGdyiCWIZvZ+E5gXsb+BKt0L+Fs3E5Kcn+5vOamSUSU0xA=="
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/apple2shader/-/apple2shader-0.0.4.tgz",
+      "integrity": "sha512-ZLEpZFsKg0JA2xUZfJpFCMDi7/kMMi0RuydkHFsC5LzFlWJzVbbPq5mX/RmRhPKXYxbFN+B8lXiMRfuDH8rquw=="
     },
     "aproba": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
-      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-2.0.0.tgz",
+      "integrity": "sha512-lYe4Gx7QT+MKGbDsA+Z+he/Wtef0BiwDOlK/XkBrdfsh9J/jPPXbX0tE9x9cl27Tmu5gg3QUbUrQYa/y+KOHPQ==",
       "dev": true
     },
     "are-we-there-yet": {
-      "version": "1.1.5",
-      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.5.tgz",
-      "integrity": "sha512-5hYdAkZlcG8tOLujVDTgCT+uPX0VnpAH28gWsLfzpXYm7wP6mp5Q/gYyR7YQ0cKVJcXJnl3j2kpBan13PtQf6w==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-2.0.0.tgz",
+      "integrity": "sha512-Ci/qENmwHnsYo9xKIcUJN5LeDKdJ6R1Z1j9V/J5wyq8nh/mYPEpIKJbBZXtZjG04HiK7zV/p6Vs9952MrMeUIw==",
       "dev": true,
       "requires": {
         "delegates": "^1.0.0",
-        "readable-stream": "^2.0.6"
+        "readable-stream": "^3.6.0"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "3.6.0",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
+          "integrity": "sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==",
+          "dev": true,
+          "requires": {
+            "inherits": "^2.0.3",
+            "string_decoder": "^1.1.1",
+            "util-deprecate": "^1.0.1"
+          }
+        }
       }
     },
     "argparse": {
@@ -16414,12 +19113,43 @@
       "integrity": "sha512-hNfzcOV8W4NdualtqBFPyVO+54DSJuZGY9qT4pRroB6S9e3iiido2ISIC5h9R2sPJ8H3FHCIiEnsv1lPXO3KtQ==",
       "dev": true
     },
+    "array-includes": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.5.tgz",
+      "integrity": "sha512-iSDYZMMyTPkiFasVqfuAQnWAYcvO/SeBSCGKePoEthjp4LEMTe4uLc7b025o4jAZpHhihh8xPo99TNWUWWkGDQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5",
+        "get-intrinsic": "^1.1.1",
+        "is-string": "^1.0.7"
+      }
+    },
     "array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
       "integrity": "sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==",
       "dev": true
     },
+    "array.prototype.flatmap": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz",
+      "integrity": "sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.2",
+        "es-shim-unscopables": "^1.0.0"
+      }
+    },
+    "arrify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/arrify/-/arrify-1.0.1.tgz",
+      "integrity": "sha512-3CYzex9M9FGQjCGMGyi6/31c8GJbgb0qGyrx5HWxPd0aCwh4cB2YjMb2Xf9UuoogrMrlO9cTqnB5rI5GHZTcUA==",
+      "dev": true
+    },
     "astral-regex": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/astral-regex/-/astral-regex-2.0.0.tgz",
@@ -16427,9 +19157,9 @@
       "dev": true
     },
     "async": {
-      "version": "2.6.3",
-      "resolved": "https://registry.npmjs.org/async/-/async-2.6.3.tgz",
-      "integrity": "sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==",
+      "version": "2.6.4",
+      "resolved": "https://registry.npmjs.org/async/-/async-2.6.4.tgz",
+      "integrity": "sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==",
       "dev": true,
       "requires": {
         "lodash": "^4.17.14"
@@ -16441,6 +19171,12 @@
       "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
       "dev": true
     },
+    "atob": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/atob/-/atob-2.1.2.tgz",
+      "integrity": "sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==",
+      "dev": true
+    },
     "babel-jest": {
       "version": "27.2.4",
       "resolved": "https://registry.npmjs.org/babel-jest/-/babel-jest-27.2.4.tgz",
@@ -16805,20 +19541,31 @@
       "integrity": "sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==",
       "dev": true
     },
+    "camelcase-keys": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/camelcase-keys/-/camelcase-keys-6.2.2.tgz",
+      "integrity": "sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==",
+      "dev": true,
+      "requires": {
+        "camelcase": "^5.3.1",
+        "map-obj": "^4.0.0",
+        "quick-lru": "^4.0.1"
+      }
+    },
     "caniuse-lite": {
-      "version": "1.0.30001239",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001239.tgz",
-      "integrity": "sha512-cyBkXJDMeI4wthy8xJ2FvDU6+0dtcZSJW3voUF8+e9f1bBeuvyZfc3PNbkOETyhbR+dGCPzn9E7MA3iwzusOhQ==",
+      "version": "1.0.30001342",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001342.tgz",
+      "integrity": "sha512-bn6sOCu7L7jcbBbyNhLg0qzXdJ/PMbybZTH/BA6Roet9wxYRm6Tr9D0s0uhLkOZ6MSG+QU6txUgdpr3MXIVqjA==",
       "dev": true
     },
     "canvas": {
-      "version": "2.7.0",
-      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.7.0.tgz",
-      "integrity": "sha512-pzCxtkHb+5su5MQjTtepMDlIOtaXo277x0C0u3nMOxtkhTyQ+h2yNKhlROAaDllWgRyePAUitC08sXw26Eb6aw==",
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/canvas/-/canvas-2.8.0.tgz",
+      "integrity": "sha512-gLTi17X8WY9Cf5GZ2Yns8T5lfBOcGgFehDFb+JQwDqdOoBOcECS9ZWMEAqMSVcMYwXD659J8NyzjRY/2aE+C2Q==",
       "dev": true,
       "requires": {
+        "@mapbox/node-pre-gyp": "^1.0.0",
         "nan": "^2.14.0",
-        "node-pre-gyp": "^0.15.0",
         "simple-get": "^3.0.3"
       }
     },
@@ -16840,25 +19587,25 @@
       "dev": true
     },
     "chokidar": {
-      "version": "3.5.1",
-      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.1.tgz",
-      "integrity": "sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw==",
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
+      "integrity": "sha512-Dr3sfKRP6oTcjf2JmUmFJfeVMvXBdegxB0iVQ5eb2V10uFJUCAS8OByZdVAyVb8xXNz3GjjTgj9kLWsZTqE6kw==",
       "dev": true,
       "requires": {
-        "anymatch": "~3.1.1",
+        "anymatch": "~3.1.2",
         "braces": "~3.0.2",
-        "fsevents": "~2.3.1",
-        "glob-parent": "~5.1.0",
+        "fsevents": "~2.3.2",
+        "glob-parent": "~5.1.2",
         "is-binary-path": "~2.1.0",
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
-        "readdirp": "~3.5.0"
+        "readdirp": "~3.6.0"
       }
     },
     "chownr": {
-      "version": "1.1.4",
-      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-2.0.0.tgz",
+      "integrity": "sha512-bIomtDF5KGpdogkLd9VspvFzk9KfpyyGlS8YFVZl7TGPBHL5snIOnxeshwVgPteQ9b4Eydl+pVbIyE1DcvCWgQ==",
       "dev": true
     },
     "chrome-trace-event": {
@@ -16882,6 +19629,11 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
+    "classnames": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz",
+      "integrity": "sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA=="
+    },
     "clean-stack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz",
@@ -16910,18 +19662,21 @@
         "shallow-clone": "^3.0.0"
       }
     },
+    "clone-regexp": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/clone-regexp/-/clone-regexp-2.2.0.tgz",
+      "integrity": "sha512-beMpP7BOtTipFuW8hrJvREQ2DrRu3BE7by0ZpibtfBA+qfHYvMGTc2Yb1JMYPKg/JUw0CHYvpg796aNTSW9z7Q==",
+      "dev": true,
+      "requires": {
+        "is-regexp": "^2.0.0"
+      }
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
       "integrity": "sha1-bqa989hTrlTMuOR7+gvz+QMfsYQ=",
       "dev": true
     },
-    "code-point-at": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
-      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
-      "dev": true
-    },
     "collect-v8-coverage": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.1.tgz",
@@ -16943,6 +19698,18 @@
       "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
       "dev": true
     },
+    "color-support": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/color-support/-/color-support-1.1.3.tgz",
+      "integrity": "sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==",
+      "dev": true
+    },
+    "colord": {
+      "version": "2.9.2",
+      "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.2.tgz",
+      "integrity": "sha512-Uqbg+J445nc1TKn4FoDPS6ZZqAvEDnwrH42yo8B40JSOgSLxMZ/gt3h4nmCtPLQeXhjJJkqBx7SCY35WnIixaQ==",
+      "dev": true
+    },
     "colorette": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/colorette/-/colorette-1.2.2.tgz",
@@ -16964,12 +19731,6 @@
       "integrity": "sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==",
       "dev": true
     },
-    "commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=",
-      "dev": true
-    },
     "compressible": {
       "version": "2.0.18",
       "resolved": "https://registry.npmjs.org/compressible/-/compressible-2.0.18.tgz",
@@ -17095,6 +19856,19 @@
       "integrity": "sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=",
       "dev": true
     },
+    "cosmiconfig": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz",
+      "integrity": "sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==",
+      "dev": true,
+      "requires": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      }
+    },
     "cross-spawn": {
       "version": "7.0.3",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -17106,6 +19880,70 @@
         "which": "^2.0.1"
       }
     },
+    "css": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/css/-/css-3.0.0.tgz",
+      "integrity": "sha512-DG9pFfwOrzc+hawpmqX/dHYHJG+Bsdb0klhyi1sDneOgGOXy9wQIC8hzyVp1e4NRYDBdxcylvywPkkXCHAzTyQ==",
+      "dev": true,
+      "requires": {
+        "inherits": "^2.0.4",
+        "source-map": "^0.6.1",
+        "source-map-resolve": "^0.6.0"
+      },
+      "dependencies": {
+        "source-map": {
+          "version": "0.6.1",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.6.1.tgz",
+          "integrity": "sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==",
+          "dev": true
+        }
+      }
+    },
+    "css-functions-list": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/css-functions-list/-/css-functions-list-3.1.0.tgz",
+      "integrity": "sha512-/9lCvYZaUbBGvYUgYGFJ4dcYiyqdhSjG7IPVluoV8A1ILjkF7ilmhp1OGUz8n+nmBcu0RNrQAzgD8B6FJbrt2w==",
+      "dev": true
+    },
+    "css-loader": {
+      "version": "6.7.1",
+      "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-6.7.1.tgz",
+      "integrity": "sha512-yB5CNFa14MbPJcomwNh3wLThtkZgcNyI2bNMRt8iE5Z8Vwl7f8vQXFAzn2HDOJvtDq2NTZBUGMSUNNyrv3/+cw==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.1.0",
+        "postcss": "^8.4.7",
+        "postcss-modules-extract-imports": "^3.0.0",
+        "postcss-modules-local-by-default": "^4.0.0",
+        "postcss-modules-scope": "^3.0.0",
+        "postcss-modules-values": "^4.0.0",
+        "postcss-value-parser": "^4.2.0",
+        "semver": "^7.3.5"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
+      }
+    },
+    "css.escape": {
+      "version": "1.5.1",
+      "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
+      "integrity": "sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==",
+      "dev": true
+    },
+    "cssesc": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz",
+      "integrity": "sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==",
+      "dev": true
+    },
     "cssom": {
       "version": "0.4.4",
       "resolved": "https://registry.npmjs.org/cssom/-/cssom-0.4.4.tgz",
@@ -17141,20 +19979,50 @@
       }
     },
     "debug": {
-      "version": "4.3.1",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz",
-      "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==",
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
       "dev": true,
       "requires": {
         "ms": "2.1.2"
       }
     },
+    "decamelize": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz",
+      "integrity": "sha512-z2S+W9X73hAUUki+N+9Za2lBlun89zigOyGrsax+KUQ6wKW4ZoWpEYBkGhQjwAjjDCkWxhY0VKEhk8wzY7F5cA==",
+      "dev": true
+    },
+    "decamelize-keys": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/decamelize-keys/-/decamelize-keys-1.1.0.tgz",
+      "integrity": "sha512-ocLWuYzRPoS9bfiSdDd3cxvrzovVMZnRDVEzAs+hWIVXGDbHxWMECij2OBuyB/An0FFW/nLuq6Kv1i/YC5Qfzg==",
+      "dev": true,
+      "requires": {
+        "decamelize": "^1.1.0",
+        "map-obj": "^1.0.0"
+      },
+      "dependencies": {
+        "map-obj": {
+          "version": "1.0.1",
+          "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-1.0.1.tgz",
+          "integrity": "sha512-7N/q3lyZ+LVCp7PzuxrJr4KMbBE2hW7BT7YNia330OFxIf4d3r5zVpicP2650l7CPN6RM9zOJRl3NGpqSiw3Eg==",
+          "dev": true
+        }
+      }
+    },
     "decimal.js": {
       "version": "10.3.1",
       "resolved": "https://registry.npmjs.org/decimal.js/-/decimal.js-10.3.1.tgz",
       "integrity": "sha512-V0pfhfr8suzyPGOx3nmq4aHqabehUZn6Ch9kyFpV79TGDTWFmHqUqXdabR7QHqxzrYolF4+tVmJhUG4OURg5dQ==",
       "dev": true
     },
+    "decode-uri-component": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
+      "integrity": "sha512-hjf+xovcEn31w/EUYdTXQh/8smFL/dzYjohQGEIgjyNavaJfBY2p5F527Bo1VPATxv0VYTUC2bOcXvqFwk78Og==",
+      "dev": true
+    },
     "decompress-response": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/decompress-response/-/decompress-response-4.2.1.tgz",
@@ -17184,12 +20052,6 @@
         "regexp.prototype.flags": "^1.2.0"
       }
     },
-    "deep-extend": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
-      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
-      "dev": true
-    },
     "deep-is": {
       "version": "0.1.3",
       "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -17211,13 +20073,20 @@
         "execa": "^5.0.0"
       }
     },
+    "define-lazy-prop": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz",
+      "integrity": "sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==",
+      "dev": true
+    },
     "define-properties": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.3.tgz",
-      "integrity": "sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/define-properties/-/define-properties-1.1.4.tgz",
+      "integrity": "sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==",
       "dev": true,
       "requires": {
-        "object-keys": "^1.0.12"
+        "has-property-descriptors": "^1.0.0",
+        "object-keys": "^1.1.1"
       }
     },
     "del": {
@@ -17328,9 +20197,9 @@
       }
     },
     "dom-accessibility-api": {
-      "version": "0.5.4",
-      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.4.tgz",
-      "integrity": "sha512-TvrjBckDy2c6v6RLxPv5QXOnU+SmF9nBII5621Ve5fu6Z/BDrENurBEvlC1f44lKEUVqOpK4w9E5Idc5/EgkLQ==",
+      "version": "0.5.14",
+      "resolved": "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz",
+      "integrity": "sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==",
       "dev": true
     },
     "domexception": {
@@ -17387,38 +20256,59 @@
       "dev": true
     },
     "enhanced-resolve": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.5.0.tgz",
-      "integrity": "sha512-Nv9m36S/vxpsI+Hc4/ZGRs0n9mXqSWGGq49zxb/cJfPAQMbUtttJAlNPS4AQzaBdw/pKskw5bMbekT/Y7W/Wlg==",
+      "version": "5.9.3",
+      "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz",
+      "integrity": "sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==",
       "dev": true,
       "requires": {
-        "graceful-fs": "^4.1.2",
-        "memory-fs": "^0.5.0",
-        "tapable": "^1.0.0"
-      }
-    },
-    "enquirer": {
-      "version": "2.3.6",
-      "resolved": "https://registry.npmjs.org/enquirer/-/enquirer-2.3.6.tgz",
-      "integrity": "sha512-yjNnPr315/FjS4zIsUxYguYUPP2e1NK4d7E7ZOLiyYCcbFBiTMyID+2wvm2w6+pZ/odMA7cRkjhsPbltwBOrLg==",
-      "dev": true,
-      "requires": {
-        "ansi-colors": "^4.1.1"
+        "graceful-fs": "^4.2.4",
+        "tapable": "^2.2.0"
       }
     },
     "envinfo": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.7.4.tgz",
-      "integrity": "sha512-TQXTYFVVwwluWSFis6K2XKxgrD22jEv0FTuLCQI+OjH7rn93+iY0fSSFM5lrSxFY+H1+B0/cvvlamr3UsBivdQ==",
+      "version": "7.8.1",
+      "resolved": "https://registry.npmjs.org/envinfo/-/envinfo-7.8.1.tgz",
+      "integrity": "sha512-/o+BXHmB7ocbHEAs6F2EnG0ogybVVUdkRunTT2glZU9XAaGmhqskrvKwqXuDfNjEO0LZKWdejEEpnq8aM0tOaw==",
       "dev": true
     },
-    "errno": {
-      "version": "0.1.8",
-      "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.8.tgz",
-      "integrity": "sha512-dJ6oBr5SQ1VSd9qkk7ByRgb/1SH4JZjCHSW/mr63/QcXO9zLVxvJ6Oy13nio03rxpSnVDDjFor75SjVeZWPW/A==",
+    "error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
       "dev": true,
       "requires": {
-        "prr": "~1.0.1"
+        "is-arrayish": "^0.2.1"
+      }
+    },
+    "es-abstract": {
+      "version": "1.20.1",
+      "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.20.1.tgz",
+      "integrity": "sha512-WEm2oBhfoI2sImeM4OF2zE2V3BYdSF+KnSi9Sidz51fQHd7+JuF8Xgcj9/0o+OWeIeIS/MiuNnlruQrJf16GQA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "es-to-primitive": "^1.2.1",
+        "function-bind": "^1.1.1",
+        "function.prototype.name": "^1.1.5",
+        "get-intrinsic": "^1.1.1",
+        "get-symbol-description": "^1.0.0",
+        "has": "^1.0.3",
+        "has-property-descriptors": "^1.0.0",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "is-callable": "^1.2.4",
+        "is-negative-zero": "^2.0.2",
+        "is-regex": "^1.1.4",
+        "is-shared-array-buffer": "^1.0.2",
+        "is-string": "^1.0.7",
+        "is-weakref": "^1.0.2",
+        "object-inspect": "^1.12.0",
+        "object-keys": "^1.1.1",
+        "object.assign": "^4.1.2",
+        "regexp.prototype.flags": "^1.4.3",
+        "string.prototype.trimend": "^1.0.5",
+        "string.prototype.trimstart": "^1.0.5",
+        "unbox-primitive": "^1.0.2"
       }
     },
     "es-module-lexer": {
@@ -17427,6 +20317,26 @@
       "integrity": "sha512-ooYciCUtfw6/d2w56UVeqHPcoCFAiJdz5XOkYpv/Txl1HMUozpXjz/2RIQgqwKdXNDPSF1W7mJCFse3G+HDyAA==",
       "dev": true
     },
+    "es-shim-unscopables": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz",
+      "integrity": "sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==",
+      "dev": true,
+      "requires": {
+        "has": "^1.0.3"
+      }
+    },
+    "es-to-primitive": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.2.1.tgz",
+      "integrity": "sha512-QCOllgZJtaUo9miYBcLChTUaHNjJF3PYs1VidD7AwiEj1kYxKeQTctLAezAOH5ZKRH0g2IgPn6KwB4IT8iRpvA==",
+      "dev": true,
+      "requires": {
+        "is-callable": "^1.1.4",
+        "is-date-object": "^1.0.1",
+        "is-symbol": "^1.0.2"
+      }
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -17474,59 +20384,48 @@
       }
     },
     "eslint": {
-      "version": "7.22.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.22.0.tgz",
-      "integrity": "sha512-3VawOtjSJUQiiqac8MQc+w457iGLfuNGLFn8JmF051tTKbh5/x/0vlcEj8OgDCaw7Ysa2Jn8paGshV7x2abKXg==",
+      "version": "8.17.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.17.0.tgz",
+      "integrity": "sha512-gq0m0BTJfci60Fz4nczYxNAlED+sMcihltndR8t9t1evnU/azx53x3t2UHXC/uRjcbvRw/XctpaNygSTcQD+Iw==",
       "dev": true,
       "requires": {
-        "@babel/code-frame": "7.12.11",
-        "@eslint/eslintrc": "^0.4.0",
+        "@eslint/eslintrc": "^1.3.0",
+        "@humanwhocodes/config-array": "^0.9.2",
         "ajv": "^6.10.0",
         "chalk": "^4.0.0",
         "cross-spawn": "^7.0.2",
-        "debug": "^4.0.1",
+        "debug": "^4.3.2",
         "doctrine": "^3.0.0",
-        "enquirer": "^2.3.5",
-        "eslint-scope": "^5.1.1",
-        "eslint-utils": "^2.1.0",
-        "eslint-visitor-keys": "^2.0.0",
-        "espree": "^7.3.1",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^7.1.1",
+        "eslint-utils": "^3.0.0",
+        "eslint-visitor-keys": "^3.3.0",
+        "espree": "^9.3.2",
         "esquery": "^1.4.0",
         "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
         "file-entry-cache": "^6.0.1",
         "functional-red-black-tree": "^1.0.1",
-        "glob-parent": "^5.0.0",
-        "globals": "^13.6.0",
-        "ignore": "^4.0.6",
+        "glob-parent": "^6.0.1",
+        "globals": "^13.15.0",
+        "ignore": "^5.2.0",
         "import-fresh": "^3.0.0",
         "imurmurhash": "^0.1.4",
         "is-glob": "^4.0.0",
-        "js-yaml": "^3.13.1",
+        "js-yaml": "^4.1.0",
         "json-stable-stringify-without-jsonify": "^1.0.1",
         "levn": "^0.4.1",
-        "lodash": "^4.17.21",
-        "minimatch": "^3.0.4",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.2",
         "natural-compare": "^1.4.0",
         "optionator": "^0.9.1",
-        "progress": "^2.0.0",
-        "regexpp": "^3.1.0",
-        "semver": "^7.2.1",
-        "strip-ansi": "^6.0.0",
+        "regexpp": "^3.2.0",
+        "strip-ansi": "^6.0.1",
         "strip-json-comments": "^3.1.0",
-        "table": "^6.0.4",
         "text-table": "^0.2.0",
         "v8-compile-cache": "^2.0.3"
       },
       "dependencies": {
-        "@babel/code-frame": {
-          "version": "7.12.11",
-          "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.12.11.tgz",
-          "integrity": "sha512-Zt1yodBx1UcyiePMSkWnU4hPqhwq7hGi2nFL1LeA3EUl+q2LQx16MISgJ0+z7dnmgvP9QtIleuETGOiOH1RcIw==",
-          "dev": true,
-          "requires": {
-            "@babel/highlight": "^7.10.4"
-          }
-        },
         "ansi-styles": {
           "version": "4.3.0",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-4.3.0.tgz",
@@ -17536,10 +20435,16 @@
             "color-convert": "^2.0.1"
           }
         },
+        "argparse": {
+          "version": "2.0.1",
+          "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
+          "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
+          "dev": true
+        },
         "chalk": {
-          "version": "4.1.0",
-          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz",
-          "integrity": "sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==",
+          "version": "4.1.2",
+          "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz",
+          "integrity": "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==",
           "dev": true,
           "requires": {
             "ansi-styles": "^4.1.0",
@@ -17561,10 +20466,41 @@
           "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==",
           "dev": true
         },
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        },
+        "eslint-scope": {
+          "version": "7.1.1",
+          "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.1.1.tgz",
+          "integrity": "sha512-QKQM/UXpIiHcLqJ5AOyIW7XZmzjkzQXYE54n1++wb0u9V/abW3l9uQnxX8Z5Xd18xyKIMTUAyQ0k1e8pz6LUrw==",
+          "dev": true,
+          "requires": {
+            "esrecurse": "^4.3.0",
+            "estraverse": "^5.2.0"
+          }
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        },
         "globals": {
-          "version": "13.7.0",
-          "resolved": "https://registry.npmjs.org/globals/-/globals-13.7.0.tgz",
-          "integrity": "sha512-Aipsz6ZKRxa/xQkZhNg0qIWXT6x6rD46f6x/PCnBomlttdIyAPak4YD9jTmKpZ72uROSMU87qJtcgpgHaVchiA==",
+          "version": "13.15.0",
+          "resolved": "https://registry.npmjs.org/globals/-/globals-13.15.0.tgz",
+          "integrity": "sha512-bpzcOlgDhMG070Av0Vy5Owklpv1I6+j96GhUI7Rh7IzDCKLzboflLrrfqMu8NquDbiR4EOQk7XzJwqVJxicxog==",
           "dev": true,
           "requires": {
             "type-fest": "^0.20.2"
@@ -17576,6 +20512,15 @@
           "integrity": "sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==",
           "dev": true
         },
+        "js-yaml": {
+          "version": "4.1.0",
+          "resolved": "https://registry.npmjs.org/js-yaml/-/js-yaml-4.1.0.tgz",
+          "integrity": "sha512-wpxZs9NoxZaJESJGIZTyDEaYpl0FKSA+FB9aJiyemKhMwkxQg63h4T1KJgUGHpTqPDNRcmmYLugrRjJlBtWvRA==",
+          "dev": true,
+          "requires": {
+            "argparse": "^2.0.1"
+          }
+        },
         "levn": {
           "version": "0.4.1",
           "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
@@ -17606,15 +20551,6 @@
           "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
           "dev": true
         },
-        "semver": {
-          "version": "7.3.5",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.5.tgz",
-          "integrity": "sha512-PoeGJYh8HK4BTO/a9Tf6ZG3veo/A7ZVsYrSA6J8ny9nb3B1VrpkuN+z9OE5wfE5p6H4LchYZsegiQgbJD94ZFQ==",
-          "dev": true,
-          "requires": {
-            "lru-cache": "^6.0.0"
-          }
-        },
         "supports-color": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -17641,6 +20577,71 @@
         }
       }
     },
+    "eslint-plugin-jest": {
+      "version": "26.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-26.4.3.tgz",
+      "integrity": "sha512-eb4sIRLy7hBdBphCBttE1Gx3Go6GsCYXRfy1xtuSg56UBlLLuFpbA79jPipbUfz7AwuDJ+j9UShN7AOi6VDEuQ==",
+      "dev": true,
+      "requires": {
+        "@typescript-eslint/utils": "^5.10.0"
+      }
+    },
+    "eslint-plugin-react": {
+      "version": "7.30.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.30.0.tgz",
+      "integrity": "sha512-RgwH7hjW48BleKsYyHK5vUAvxtE9SMPDKmcPRQgtRCYaZA0XQPt5FSkrU3nhz5ifzMZcA8opwmRJ2cmOO8tr5A==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.5",
+        "array.prototype.flatmap": "^1.3.0",
+        "doctrine": "^2.1.0",
+        "estraverse": "^5.3.0",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.5",
+        "object.fromentries": "^2.0.5",
+        "object.hasown": "^1.1.1",
+        "object.values": "^1.1.5",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.3",
+        "semver": "^6.3.0",
+        "string.prototype.matchall": "^4.0.7"
+      },
+      "dependencies": {
+        "doctrine": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+          "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+          "dev": true,
+          "requires": {
+            "esutils": "^2.0.2"
+          }
+        },
+        "estraverse": {
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+          "dev": true
+        },
+        "resolve": {
+          "version": "2.0.0-next.3",
+          "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz",
+          "integrity": "sha512-W8LucSynKUIDu9ylraa7ueVZ7hc0uAgJBxVsQSKOXOyle8a93qXhcz+XAXZ8bIq2d6i4Ehddn6Evt+0/UwKk6Q==",
+          "dev": true,
+          "requires": {
+            "is-core-module": "^2.2.0",
+            "path-parse": "^1.0.6"
+          }
+        }
+      }
+    },
+    "eslint-plugin-react-hooks": {
+      "version": "4.5.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz",
+      "integrity": "sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==",
+      "dev": true,
+      "requires": {}
+    },
     "eslint-scope": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
@@ -17652,43 +20653,43 @@
       }
     },
     "eslint-utils": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-2.1.0.tgz",
-      "integrity": "sha512-w94dQYoauyvlDc43XnGB8lU3Zt713vNChgt4EWwhXAP2XkBvndfxF0AgIqKOOasjPIPzj9JqgwkwbCYD0/V3Zg==",
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-3.0.0.tgz",
+      "integrity": "sha512-uuQC43IGctw68pJA1RgbQS8/NP7rch6Cwd4j3ZBtgo4/8Flj4eGE7ZYSZRN3iq5pVUv6GPdW5Z1RFleo84uLDA==",
       "dev": true,
       "requires": {
-        "eslint-visitor-keys": "^1.1.0"
+        "eslint-visitor-keys": "^2.0.0"
       },
       "dependencies": {
         "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz",
+          "integrity": "sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==",
           "dev": true
         }
       }
     },
     "eslint-visitor-keys": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-2.0.0.tgz",
-      "integrity": "sha512-QudtT6av5WXels9WjIM7qz1XD1cWGvX4gGXvp/zBn9nXG02D0utdU3Em2m/QjTnrsk6bBjmCygl3rmj118msQQ==",
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.3.0.tgz",
+      "integrity": "sha512-mQ+suqKJVyeuwGYHAdjMFqjCyfl8+Ldnxuyp3ldiMBFKkvytrXUZWaiPCEav8qDHKty44bD+qV1IP4T+w+xXRA==",
       "dev": true
     },
     "espree": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-7.3.1.tgz",
-      "integrity": "sha512-v3JCNCE64umkFpmkFGqzVKsOT0tN1Zr+ueqLZfpV1Ob8e+CEgPWa+OxCoGH3tnhimMKIaBm4m/vaRpJ/krRz2g==",
+      "version": "9.3.2",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-9.3.2.tgz",
+      "integrity": "sha512-D211tC7ZwouTIuY5x9XnS0E9sWNChB7IYKX/Xp5eQj3nFXhqmiUDB9q27y76oFl8jTg3pXcQx/bpxMfs3CIZbA==",
       "dev": true,
       "requires": {
-        "acorn": "^7.4.0",
-        "acorn-jsx": "^5.3.1",
-        "eslint-visitor-keys": "^1.3.0"
+        "acorn": "^8.7.1",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^3.3.0"
       },
       "dependencies": {
-        "eslint-visitor-keys": {
-          "version": "1.3.0",
-          "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz",
-          "integrity": "sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==",
+        "acorn": {
+          "version": "8.7.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
           "dev": true
         }
       }
@@ -17709,9 +20710,9 @@
       },
       "dependencies": {
         "estraverse": {
-          "version": "5.2.0",
-          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.2.0.tgz",
-          "integrity": "sha512-BxbNGGNm0RyRYvUdHpIwv9IWzeM9XClbOxwoATuFdOE7ZE6wHL+HQ5T8hoPM+zHvmKzzsEqhgy0GrQ5X13afiQ==",
+          "version": "5.3.0",
+          "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+          "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
           "dev": true
         }
       }
@@ -17780,6 +20781,15 @@
         "strip-final-newline": "^2.0.0"
       }
     },
+    "execall": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/execall/-/execall-2.0.0.tgz",
+      "integrity": "sha512-0FU2hZ5Hh6iQnarpRtQurM/aAvp3RIbfvgLHrcqJYzhXyV2KFruhuChf9NC6waAhiUR7FFtlugkI4p7f2Fqlow==",
+      "dev": true,
+      "requires": {
+        "clone-regexp": "^2.1.0"
+      }
+    },
     "exit": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz",
@@ -17955,17 +20965,16 @@
       "dev": true
     },
     "fast-glob": {
-      "version": "3.2.5",
-      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.5.tgz",
-      "integrity": "sha512-2DtFcgT68wiTTiwZ2hNdJfcHNke9XOfnwmBRWXhmeKM8rF0TGwmC/Qto3S7RoZKp5cilZbxzO5iTNTQsJ+EeDg==",
+      "version": "3.2.11",
+      "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.2.11.tgz",
+      "integrity": "sha512-xrO3+1bxSo3ZVHAnqzyuewYT6aMFHRAd4Kcs92MAonjwQZLsK9d0SF1IyQ3k5PoirxTW0Oe/RqFgMQ6TcNE5Ew==",
       "dev": true,
       "requires": {
         "@nodelib/fs.stat": "^2.0.2",
         "@nodelib/fs.walk": "^1.2.3",
-        "glob-parent": "^5.1.0",
+        "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
-        "micromatch": "^4.0.2",
-        "picomatch": "^2.2.1"
+        "micromatch": "^4.0.4"
       }
     },
     "fast-json-stable-stringify": {
@@ -17987,9 +20996,9 @@
       "dev": true
     },
     "fastq": {
-      "version": "1.11.0",
-      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.11.0.tgz",
-      "integrity": "sha512-7Eczs8gIPDrVzT+EksYBcupqMyxSHXXrHOLRRxU2/DicV8789MRBRR8+Hc2uWzUupOs4YS4JzBmBxjjCVBxD/g==",
+      "version": "1.13.0",
+      "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
+      "integrity": "sha512-YpkpUnK8od0o1hmeSc7UUs/eB/vIPWJYjKck2QKIzAf71Vm1AAQ3EbuZB3g2JIy+pg+ERD0vqI79KyZiB2e2Nw==",
       "dev": true,
       "requires": {
         "reusify": "^1.0.4"
@@ -18073,17 +21082,6 @@
         }
       }
     },
-    "find-cache-dir": {
-      "version": "3.3.1",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.1.tgz",
-      "integrity": "sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ==",
-      "dev": true,
-      "requires": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      }
-    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -18105,15 +21103,15 @@
       }
     },
     "flatted": {
-      "version": "3.1.1",
-      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.1.tgz",
-      "integrity": "sha512-zAoAQiudy+r5SvnSw3KJy5os/oRJYHzrzja/tBDqrZtNhUw8bt6y8OBzMWcjWr+8liV8Eb6yOhw8WZ7VFZ5ZzA==",
+      "version": "3.2.4",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.2.4.tgz",
+      "integrity": "sha512-8/sOawo8tJ4QOBX8YlQBMxL8+RLZfxMQOif9o0KUKTNTjMYElWPE0r/m5VNFxTRd0NSw8qSy8dajrwX4RYI1Hw==",
       "dev": true
     },
     "follow-redirects": {
-      "version": "1.14.1",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.1.tgz",
-      "integrity": "sha512-HWqDgT7ZEkqRzBvc2s64vSZ/hfOceEol3ac/7tKwzuvEyWx3/4UegXh5oBOIotkGsObyk3xznnSRVADBgWSQVg==",
+      "version": "1.14.8",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.8.tgz",
+      "integrity": "sha512-1x0S9UVJHsQprFcEC/qnNzBLcIxsjAV905f/UkQxbclCsoTWlacCNOpQa/anodLl2uaEKFhfWOvM2Qg77+15zA==",
       "dev": true
     },
     "form-data": {
@@ -18140,18 +21138,18 @@
       "dev": true
     },
     "fs-minipass": {
-      "version": "1.2.7",
-      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
-      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-2.1.0.tgz",
+      "integrity": "sha512-V/JgOLFCS+R6Vcq0slCuaeWEdNC3ouDlJMNIsacH2VtALiu9mV4LPrHc5cDl8k5aw6J8jwgWWpiTo5RYhmIzvg==",
       "dev": true,
       "requires": {
-        "minipass": "^2.6.0"
+        "minipass": "^3.0.0"
       }
     },
     "fs-monkey": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.1.tgz",
-      "integrity": "sha512-fcSa+wyTqZa46iWweI7/ZiUfegOZl0SG8+dltIwFXo7+zYU9J9kpS3NB6pZcSlJdhvIwp81Adx2XhZorncxiaA==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/fs-monkey/-/fs-monkey-1.0.3.tgz",
+      "integrity": "sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==",
       "dev": true
     },
     "fs.realpath": {
@@ -18173,63 +21171,45 @@
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
       "dev": true
     },
+    "function.prototype.name": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/function.prototype.name/-/function.prototype.name-1.1.5.tgz",
+      "integrity": "sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.0",
+        "functions-have-names": "^1.2.2"
+      }
+    },
     "functional-red-black-tree": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz",
       "integrity": "sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=",
       "dev": true
     },
+    "functions-have-names": {
+      "version": "1.2.3",
+      "resolved": "https://registry.npmjs.org/functions-have-names/-/functions-have-names-1.2.3.tgz",
+      "integrity": "sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==",
+      "dev": true
+    },
     "gauge": {
-      "version": "2.7.4",
-      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
-      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-4.0.0.tgz",
+      "integrity": "sha512-F8sU45yQpjQjxKkm1UOAhf0U/O0aFt//Fl7hsrNVto+patMHjs7dPI9mFOGUKbhrgKm0S3EjW3scMFuQmWSROw==",
       "dev": true,
       "requires": {
-        "aproba": "^1.0.3",
+        "ansi-regex": "^5.0.1",
+        "aproba": "^1.0.3 || ^2.0.0",
+        "color-support": "^1.1.2",
         "console-control-strings": "^1.0.0",
-        "has-unicode": "^2.0.0",
-        "object-assign": "^4.1.0",
+        "has-unicode": "^2.0.1",
         "signal-exit": "^3.0.0",
-        "string-width": "^1.0.1",
-        "strip-ansi": "^3.0.1",
-        "wide-align": "^1.1.0"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
-          "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "1.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
-          "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
-          "dev": true,
-          "requires": {
-            "number-is-nan": "^1.0.0"
-          }
-        },
-        "string-width": {
-          "version": "1.0.2",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
-          "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
-          "dev": true,
-          "requires": {
-            "code-point-at": "^1.0.0",
-            "is-fullwidth-code-point": "^1.0.0",
-            "strip-ansi": "^3.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "3.0.1",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
-          "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^2.0.0"
-          }
-        }
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "wide-align": "^1.1.2"
       }
     },
     "gensync": {
@@ -18273,6 +21253,16 @@
       "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==",
       "dev": true
     },
+    "get-symbol-description": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/get-symbol-description/-/get-symbol-description-1.0.0.tgz",
+      "integrity": "sha512-2EmdH1YvIQiZpltCNgkuiUnyukzxM/R6NDJX31Ke3BG1Nq5b0S2PhX59UKi9vZpPDQVdqn+1IcaAwnzTT5vCjw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "get-intrinsic": "^1.1.1"
+      }
+    },
     "glob": {
       "version": "7.1.6",
       "resolved": "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz",
@@ -18302,6 +21292,37 @@
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
       "dev": true
     },
+    "global-modules": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz",
+      "integrity": "sha512-NGbfmJBp9x8IxyJSd1P+otYK8vonoJactOogrVfFRIAEY1ukil8RSKDz2Yo7wh1oihl51l/r6W4epkeKJHqL8A==",
+      "dev": true,
+      "requires": {
+        "global-prefix": "^3.0.0"
+      }
+    },
+    "global-prefix": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/global-prefix/-/global-prefix-3.0.0.tgz",
+      "integrity": "sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==",
+      "dev": true,
+      "requires": {
+        "ini": "^1.3.5",
+        "kind-of": "^6.0.2",
+        "which": "^1.3.1"
+      },
+      "dependencies": {
+        "which": {
+          "version": "1.3.1",
+          "resolved": "https://registry.npmjs.org/which/-/which-1.3.1.tgz",
+          "integrity": "sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==",
+          "dev": true,
+          "requires": {
+            "isexe": "^2.0.0"
+          }
+        }
+      }
+    },
     "globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -18309,27 +21330,25 @@
       "dev": true
     },
     "globby": {
-      "version": "11.0.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-11.0.3.tgz",
-      "integrity": "sha512-ffdmosjA807y7+lA1NM0jELARVmYul/715xiILEjo3hBLPTcirgQNnXECn5g3mtR8TOLCVbkfua1Hpen25/Xcg==",
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-11.1.0.tgz",
+      "integrity": "sha512-jhIXaOzy1sb8IyocaruWSn1TjmnBVs8Ayhcy83rmxNJ8q2uWKCAj3CnJY+KpGSXCueAPc0i05kVvVKtP1t9S3g==",
       "dev": true,
       "requires": {
         "array-union": "^2.1.0",
         "dir-glob": "^3.0.1",
-        "fast-glob": "^3.1.1",
-        "ignore": "^5.1.4",
-        "merge2": "^1.3.0",
+        "fast-glob": "^3.2.9",
+        "ignore": "^5.2.0",
+        "merge2": "^1.4.1",
         "slash": "^3.0.0"
-      },
-      "dependencies": {
-        "ignore": {
-          "version": "5.1.8",
-          "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.1.8.tgz",
-          "integrity": "sha512-BMpfD7PpiETpBl/A6S498BaIJ6Y/ABT93ETbby2fP00v4EbvPBXWEoaR1UBPKs3iR53pJY7EtZk5KACI57i1Uw==",
-          "dev": true
-        }
       }
     },
+    "globjoin": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/globjoin/-/globjoin-0.1.4.tgz",
+      "integrity": "sha512-xYfnw62CKG8nLkZBfWbhWwDw02CHty86jfPcc2cr3ZfeuK9ysoVPPEUxf21bAD/rWAgk52SuBrLJlefNy8mvFg==",
+      "dev": true
+    },
     "glur": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/glur/-/glur-1.1.2.tgz",
@@ -18348,6 +21367,18 @@
       "integrity": "sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==",
       "dev": true
     },
+    "hard-rejection": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/hard-rejection/-/hard-rejection-2.1.0.tgz",
+      "integrity": "sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==",
+      "dev": true
+    },
+    "harmony-reflect": {
+      "version": "1.6.2",
+      "resolved": "https://registry.npmjs.org/harmony-reflect/-/harmony-reflect-1.6.2.tgz",
+      "integrity": "sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==",
+      "dev": true
+    },
     "has": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
@@ -18374,24 +21405,57 @@
         }
       }
     },
+    "has-bigints": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/has-bigints/-/has-bigints-1.0.2.tgz",
+      "integrity": "sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==",
+      "dev": true
+    },
     "has-flag": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
       "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
       "dev": true
     },
+    "has-property-descriptors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz",
+      "integrity": "sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==",
+      "dev": true,
+      "requires": {
+        "get-intrinsic": "^1.1.1"
+      }
+    },
     "has-symbols": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.2.tgz",
-      "integrity": "sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==",
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/has-symbols/-/has-symbols-1.0.3.tgz",
+      "integrity": "sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==",
       "dev": true
     },
+    "has-tostringtag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/has-tostringtag/-/has-tostringtag-1.0.0.tgz",
+      "integrity": "sha512-kFjcSNhnlGV1kyoGk7OXKSawH5JOb/LzUc5w9B02hOTO0dfFRjbHQKvg1d6cf3HbeUmtU9VbbV3qzZ2Teh97WQ==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
     "has-unicode": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
       "dev": true
     },
+    "hosted-git-info": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-4.1.0.tgz",
+      "integrity": "sha512-kyCuEOWjJqZuDbRHzL8V93NzQhwIB71oFWSyzVo+KPZI+pnQPPxucdkrOZvkLRnrf5URsQM+IJ09Dw29cRALIA==",
+      "dev": true,
+      "requires": {
+        "lru-cache": "^6.0.0"
+      }
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -18425,6 +21489,12 @@
       "integrity": "sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==",
       "dev": true
     },
+    "html-tags": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
+      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "dev": true
+    },
     "http-deceiver": {
       "version": "1.2.7",
       "resolved": "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz",
@@ -18481,9 +21551,9 @@
       }
     },
     "http-proxy-middleware": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-1.3.1.tgz",
-      "integrity": "sha512-13eVVDYS4z79w7f1+NPllJtOQFx/FdUW4btIvVRMaRlUY9VGstAbo5MOhLEuUgZFRHn3x50ufn25zkj/boZnEg==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.1.tgz",
+      "integrity": "sha512-cfaXRVoZxSed/BmkA7SwBVNI9Kj7HFltaE5rqYOub5kWzWZ+gofV2koVN1j2rMW7pEfSSlCHGJ31xmuyFyfLOg==",
       "dev": true,
       "requires": {
         "@types/http-proxy": "^1.17.5",
@@ -18518,21 +21588,28 @@
         "safer-buffer": ">= 2.1.2 < 3"
       }
     },
-    "ignore": {
-      "version": "4.0.6",
-      "resolved": "https://registry.npmjs.org/ignore/-/ignore-4.0.6.tgz",
-      "integrity": "sha512-cyFDKrqc/YdcWFniJhzI42+AzS+gNwmUzOSFcRCQYwySuBBBy/KjuxWLZ/FHEH6Moq1NizMOBWyTcv8O4OZIMg==",
-      "dev": true
+    "icss-utils": {
+      "version": "5.1.0",
+      "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-5.1.0.tgz",
+      "integrity": "sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==",
+      "dev": true,
+      "requires": {}
     },
-    "ignore-walk": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
-      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
+    "identity-obj-proxy": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/identity-obj-proxy/-/identity-obj-proxy-3.0.0.tgz",
+      "integrity": "sha512-00n6YnVHKrinT9t0d9+5yZC6UBNJANpYEQvL2LlX6Ab9lnmxzIRcEmTPuyGScvl1+jKuCICX1Z0Ab1pPKKdikA==",
       "dev": true,
       "requires": {
-        "minimatch": "^3.0.4"
+        "harmony-reflect": "^1.4.6"
       }
     },
+    "ignore": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.2.0.tgz",
+      "integrity": "sha512-CmxgYGiEPCLhfLnpPp1MoRmifwEIOgjcHXxOBjv7mY96c+eWScsOP9c112ZyLdWHi0FxHjI+4uVhKYp/gcdRmQ==",
+      "dev": true
+    },
     "import-fresh": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz",
@@ -18551,6 +21628,12 @@
         }
       }
     },
+    "import-lazy": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/import-lazy/-/import-lazy-4.0.0.tgz",
+      "integrity": "sha512-rKtvo6a868b5Hu3heneU+L4yEQ4jYKLtjpnPeUdK7h0yzXGmyBTypknlkCvHFBqfX9YlorEiMM6Dnq/5atfHkw==",
+      "dev": true
+    },
     "import-local": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/import-local/-/import-local-3.0.2.tgz",
@@ -18595,16 +21678,15 @@
       "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
       "dev": true
     },
-    "internal-ip": {
-      "version": "6.2.0",
-      "resolved": "https://registry.npmjs.org/internal-ip/-/internal-ip-6.2.0.tgz",
-      "integrity": "sha512-D8WGsR6yDt8uq7vDMu7mjcR+yRMm3dW8yufyChmszWRjcSHuxLBkR3GdS2HZAjodsaGuCvXeEJpueisXJULghg==",
+    "internal-slot": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.3.tgz",
+      "integrity": "sha512-O0DB1JC/sPyZl7cIo78n5dR7eUSwwpYPiXRhTzNxZVAMUuB8vlnRFyLxdrVToks6XPLVnFfbzaVd5WLjhgg+vA==",
       "dev": true,
       "requires": {
-        "default-gateway": "^6.0.0",
-        "ipaddr.js": "^1.9.1",
-        "is-ip": "^3.1.0",
-        "p-event": "^4.2.0"
+        "get-intrinsic": "^1.1.0",
+        "has": "^1.0.3",
+        "side-channel": "^1.0.4"
       }
     },
     "interpret": {
@@ -18619,24 +21701,12 @@
       "integrity": "sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=",
       "dev": true
     },
-    "ip-regex": {
-      "version": "4.3.0",
-      "resolved": "https://registry.npmjs.org/ip-regex/-/ip-regex-4.3.0.tgz",
-      "integrity": "sha512-B9ZWJxHHOHUhUjCPrMpLD4xEq35bUTClHM1S6CBU5ixQnkZmwipwgc96vAd7AAGM9TGHvJR+Uss+/Ak6UphK+Q==",
-      "dev": true
-    },
     "ipaddr.js": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
       "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==",
       "dev": true
     },
-    "is-absolute-url": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz",
-      "integrity": "sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==",
-      "dev": true
-    },
     "is-arguments": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-arguments/-/is-arguments-1.1.0.tgz",
@@ -18646,6 +21716,21 @@
         "call-bind": "^1.0.0"
       }
     },
+    "is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "dev": true
+    },
+    "is-bigint": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-bigint/-/is-bigint-1.0.4.tgz",
+      "integrity": "sha512-zB9CruMamjym81i2JZ3UMn54PKGsQzsJeo6xvN3HJJ4CAsQNB6iRutp2To77OfCNuoxspsIhzaPoO1zyCEhFOg==",
+      "dev": true,
+      "requires": {
+        "has-bigints": "^1.0.1"
+      }
+    },
     "is-binary-path": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/is-binary-path/-/is-binary-path-2.1.0.tgz",
@@ -18655,6 +21740,22 @@
         "binary-extensions": "^2.0.0"
       }
     },
+    "is-boolean-object": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/is-boolean-object/-/is-boolean-object-1.1.2.tgz",
+      "integrity": "sha512-gDYaKHJmnj4aWxyj6YHyXVpdQawtVLHU5cb+eztPGczf6cjuTdwve5ZIEfgXqH4e57An1D1AKf8CZ3kYrQRqYA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-callable": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/is-callable/-/is-callable-1.2.4.tgz",
+      "integrity": "sha512-nsuwtxZfMX67Oryl9LCQ+upnC0Z0BgpwntpS89m1H/TLF0zNfzfLMV/9Wa/6MZsj0acpEjAO0KF1xT6ZdLl95w==",
+      "dev": true
+    },
     "is-ci": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/is-ci/-/is-ci-3.0.0.tgz",
@@ -18665,9 +21766,9 @@
       }
     },
     "is-core-module": {
-      "version": "2.2.0",
-      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz",
-      "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==",
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.9.0.tgz",
+      "integrity": "sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==",
       "dev": true,
       "requires": {
         "has": "^1.0.3"
@@ -18680,9 +21781,9 @@
       "dev": true
     },
     "is-docker": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.1.1.tgz",
-      "integrity": "sha512-ZOoqiXfEwtGknTiuDEy8pN2CfE3TxMHprvNer1mXiqwkOT77Rw3YVrUQ52EqAOU3QAWDQ+bQdx7HJzrv7LS2Hw==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/is-docker/-/is-docker-2.2.1.tgz",
+      "integrity": "sha512-F+i2BKsFrH66iaUFc0woD8sLy8getkwTwtOBjvs56Cx4CgJDeKQeqfz8wAYiSb8JOprWhHH5p77PbmYCvvUuXQ==",
       "dev": true
     },
     "is-extglob": {
@@ -18704,22 +21805,19 @@
       "dev": true
     },
     "is-glob": {
-      "version": "4.0.1",
-      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.1.tgz",
-      "integrity": "sha512-5G0tKtBTFImOqDnLB2hG6Bp2qcKEFduo4tZu9MT/H6NQv/ghhy30o55ufafxJ/LdH79LLs2Kfrn85TLKyA7BUg==",
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
+      "integrity": "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==",
       "dev": true,
       "requires": {
         "is-extglob": "^2.1.1"
       }
     },
-    "is-ip": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/is-ip/-/is-ip-3.1.0.tgz",
-      "integrity": "sha512-35vd5necO7IitFPjd/YBeqwWnyDWbuLH9ZXQdMfDA8TEo7pv5X8yfrvVO3xbJbLUlERCMvf6X0hTUamQxCYJ9Q==",
-      "dev": true,
-      "requires": {
-        "ip-regex": "^4.0.0"
-      }
+    "is-negative-zero": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/is-negative-zero/-/is-negative-zero-2.0.2.tgz",
+      "integrity": "sha512-dqJvarLawXsFbNDeJW7zAz8ItJ9cd28YufuuFzh0G8pNHjJMnY08Dv7sYX2uF5UpQOwieAeOExEYAWWfu7ZZUA==",
+      "dev": true
     },
     "is-number": {
       "version": "7.0.0",
@@ -18727,6 +21825,15 @@
       "integrity": "sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==",
       "dev": true
     },
+    "is-number-object": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-number-object/-/is-number-object-1.0.7.tgz",
+      "integrity": "sha512-k1U0IRzLMo7ZlYIfzRu23Oh6MiIFasgpb9X76eqfFZAqwH44UI4KTBvBYIZ1dSL9ZzChTB9ShHfLkR4pdW5krQ==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
     "is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -18761,13 +21868,28 @@
       "dev": true
     },
     "is-regex": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.2.tgz",
-      "integrity": "sha512-axvdhb5pdhEVThqJzYXwMlVuZwC+FF2DpcOhTS+y/8jVq4trxyPgfcwIxIKiyeuLlSQYKkmUaPQJ8ZE4yNKXDg==",
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/is-regex/-/is-regex-1.1.4.tgz",
+      "integrity": "sha512-kvRdxDsxZjhzUX07ZnLydzS1TU/TJlTUHHY4YLL87e37oUA49DfkLqgy+VjFocowy29cKvcSiu+kIv728jTTVg==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "has-symbols": "^1.0.1"
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-regexp": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/is-regexp/-/is-regexp-2.1.0.tgz",
+      "integrity": "sha512-OZ4IlER3zmRIoB9AqNhEggVxqIH4ofDns5nRrPS6yQxXE1TPCUpFznBfRQmQa8uC+pXqjMnukiJBxCisIxiLGA==",
+      "dev": true
+    },
+    "is-shared-array-buffer": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz",
+      "integrity": "sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
       }
     },
     "is-stream": {
@@ -18776,12 +21898,39 @@
       "integrity": "sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==",
       "dev": true
     },
+    "is-string": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/is-string/-/is-string-1.0.7.tgz",
+      "integrity": "sha512-tE2UXzivje6ofPW7l23cjDOMa09gb7xlAqG6jG5ej6uPV32TlWP3NKPigtaGeHNu9fohccRYvIiZMfOOnOYUtg==",
+      "dev": true,
+      "requires": {
+        "has-tostringtag": "^1.0.0"
+      }
+    },
+    "is-symbol": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/is-symbol/-/is-symbol-1.0.4.tgz",
+      "integrity": "sha512-C/CPBqKWnvdcxqIARxyOh4v1UUEOCHpgDa0WYgpKDFMszcrPcffg5uhwSgPCLD2WWxmq6isisz87tzT01tuGhg==",
+      "dev": true,
+      "requires": {
+        "has-symbols": "^1.0.2"
+      }
+    },
     "is-typedarray": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-typedarray/-/is-typedarray-1.0.0.tgz",
       "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=",
       "dev": true
     },
+    "is-weakref": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-weakref/-/is-weakref-1.0.2.tgz",
+      "integrity": "sha512-qctsuLZmIQ0+vSSMfoVvyFe2+GSEvnmZ2ezTup1SBse9+twCCeial6EEi3Nc2KFcf6+qz2FBPnjXsk8xhKSaPQ==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2"
+      }
+    },
     "is-wsl": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-wsl/-/is-wsl-2.2.0.tgz",
@@ -21371,6 +24520,12 @@
       "integrity": "sha512-mrqyZKfX5EhL7hvqcV6WG1yYjnjeuYDzDhhcAAUrq8Po85NBQBJP+ZDUT75qZQ98IkUoBqdkExkukOU7Ts2wrw==",
       "dev": true
     },
+    "json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
+    },
     "json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -21392,11 +24547,15 @@
         "minimist": "^1.2.5"
       }
     },
-    "killable": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
-      "integrity": "sha512-LzqtLKlUwirEUyl/nicirVmNiPvYs7l5n8wOPP7fyJVpUPkvCnW/vuiXGpylGUlnPDnB7311rARzAt3Mhswpjg==",
-      "dev": true
+    "jsx-ast-utils": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.0.tgz",
+      "integrity": "sha512-XzO9luP6L0xkxwhIJMTJQpZo/eeN60K08jHdexfD569AGxeNug6UketeHXEhROoM8aR7EcUoOQmIhcJQjcuq8Q==",
+      "dev": true,
+      "requires": {
+        "array-includes": "^3.1.4",
+        "object.assign": "^4.1.2"
+      }
     },
     "kind-of": {
       "version": "6.0.3",
@@ -21410,6 +24569,12 @@
       "integrity": "sha512-eTIzlVOSUR+JxdDFepEYcBMtZ9Qqdef+rnzWdRZuMbOywu5tO2w2N7rqjoANZ5k9vywhL6Br1VRjUIgTQx4E8w==",
       "dev": true
     },
+    "known-css-properties": {
+      "version": "0.25.0",
+      "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.25.0.tgz",
+      "integrity": "sha512-b0/9J1O9Jcyik1GC6KC42hJ41jKwdO/Mq8Mdo5sYN+IuRTXs2YFHZC3kZSx6ueusqa95x3wLYe/ytKjbAfGixA==",
+      "dev": true
+    },
     "leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -21426,6 +24591,12 @@
         "type-check": "~0.3.2"
       }
     },
+    "lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "dev": true
+    },
     "loader-runner": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.2.0.tgz",
@@ -21464,6 +24635,27 @@
       "integrity": "sha1-gteb/zCmfEAF/9XiUVMArZyk168=",
       "dev": true
     },
+    "lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true
+    },
+    "lodash.truncate": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz",
+      "integrity": "sha512-jttmRe7bRse52OsWIMDLaXxWqRAmtIUccAQ3garviCqJjafXOfNMO0yMfNpdD6zbGaTU0P5Nz7e7gAT6cKmJRw==",
+      "dev": true
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
     "lru-cache": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
@@ -21503,14 +24695,17 @@
         "tmpl": "1.0.x"
       }
     },
-    "map-age-cleaner": {
-      "version": "0.1.3",
-      "resolved": "https://registry.npmjs.org/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz",
-      "integrity": "sha512-bJzx6nMoP6PDLPBFmg7+xRKeFZvFboMrGlxmNj9ClvX53KrmvM5bXFXEWjbz4cz1AFn+jWJ9z/DJSz7hrs0w3w==",
-      "dev": true,
-      "requires": {
-        "p-defer": "^1.0.0"
-      }
+    "map-obj": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.3.0.tgz",
+      "integrity": "sha512-hdN1wVrZbb29eBGiGjJbeP8JbKjq1urkHJ/LIP/NY48MZ1QVXUsQBV1G1zvYFHn1XE06cwjBsOI2K3Ulnj1YXQ==",
+      "dev": true
+    },
+    "mathml-tag-names": {
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
+      "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==",
+      "dev": true
     },
     "media-typer": {
       "version": "0.3.0",
@@ -21518,43 +24713,43 @@
       "integrity": "sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=",
       "dev": true
     },
-    "mem": {
-      "version": "8.1.0",
-      "resolved": "https://registry.npmjs.org/mem/-/mem-8.1.0.tgz",
-      "integrity": "sha512-FIkgXo0kTi3XpvaznV5Muk6Y6w8SkdmRXcY7ZLonQesuYezp59UooLxAVBcGuN6PH2tXN84mR3vyzSc6oSMUfA==",
+    "memfs": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.4.1.tgz",
+      "integrity": "sha512-1c9VPVvW5P7I85c35zAdEr1TD5+F11IToIHIlrVIcflfnzPkJa0ZoYEoEdYDP8KgPFoSZ/opDrUsAoZWym3mtw==",
       "dev": true,
       "requires": {
-        "map-age-cleaner": "^0.1.3",
-        "mimic-fn": "^3.1.0"
+        "fs-monkey": "1.0.3"
+      }
+    },
+    "meow": {
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/meow/-/meow-9.0.0.tgz",
+      "integrity": "sha512-+obSblOQmRhcyBt62furQqRAQpNyWXo8BuQ5bN7dG8wmwQ+vwHKp/rCFD4CrTP8CsDQD1sjoZ94K417XEUk8IQ==",
+      "dev": true,
+      "requires": {
+        "@types/minimist": "^1.2.0",
+        "camelcase-keys": "^6.2.2",
+        "decamelize": "^1.2.0",
+        "decamelize-keys": "^1.1.0",
+        "hard-rejection": "^2.1.0",
+        "minimist-options": "4.1.0",
+        "normalize-package-data": "^3.0.0",
+        "read-pkg-up": "^7.0.1",
+        "redent": "^3.0.0",
+        "trim-newlines": "^3.0.0",
+        "type-fest": "^0.18.0",
+        "yargs-parser": "^20.2.3"
       },
       "dependencies": {
-        "mimic-fn": {
-          "version": "3.1.0",
-          "resolved": "https://registry.npmjs.org/mimic-fn/-/mimic-fn-3.1.0.tgz",
-          "integrity": "sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==",
+        "type-fest": {
+          "version": "0.18.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz",
+          "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==",
           "dev": true
         }
       }
     },
-    "memfs": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/memfs/-/memfs-3.2.0.tgz",
-      "integrity": "sha512-f/xxz2TpdKv6uDn6GtHee8ivFyxwxmPuXatBb1FBwxYNuVpbM3k/Y1Z+vC0mH/dIXXrukYfe3qe5J32Dfjg93A==",
-      "dev": true,
-      "requires": {
-        "fs-monkey": "1.0.1"
-      }
-    },
-    "memory-fs": {
-      "version": "0.5.0",
-      "resolved": "https://registry.npmjs.org/memory-fs/-/memory-fs-0.5.0.tgz",
-      "integrity": "sha512-jA0rdU5KoQMC0e6ppoNRtpp6vjFq6+NY7r8hywnC7V+1Xj/MtHwGIbB1QaK/dunyjWteJzmkpd7ooeWg10T7GA==",
-      "dev": true,
-      "requires": {
-        "errno": "^0.1.3",
-        "readable-stream": "^2.0.1"
-      }
-    },
     "merge-descriptors": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/merge-descriptors/-/merge-descriptors-1.0.1.tgz",
@@ -21580,13 +24775,13 @@
       "dev": true
     },
     "micromatch": {
-      "version": "4.0.4",
-      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
-      "integrity": "sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==",
+      "version": "4.0.5",
+      "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.5.tgz",
+      "integrity": "sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==",
       "dev": true,
       "requires": {
-        "braces": "^3.0.1",
-        "picomatch": "^2.2.3"
+        "braces": "^3.0.2",
+        "picomatch": "^2.3.1"
       }
     },
     "micromodal": {
@@ -21601,18 +24796,18 @@
       "dev": true
     },
     "mime-db": {
-      "version": "1.46.0",
-      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.46.0.tgz",
-      "integrity": "sha512-svXaP8UQRZ5K7or+ZmfNhg2xX3yKDMUzqadsSqi4NCH/KomcH75MAMYAGVlvXn4+b/xOPhS3I2uHKRUzvjY7BQ==",
+      "version": "1.51.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.51.0.tgz",
+      "integrity": "sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==",
       "dev": true
     },
     "mime-types": {
-      "version": "2.1.29",
-      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.29.tgz",
-      "integrity": "sha512-Y/jMt/S5sR9OaqteJtslsFZKWOIIqMACsJSiHghlCAyhf7jfVYjKBmLiX8OgpWeW+fjJ2b+Az69aPFPkUOY6xQ==",
+      "version": "2.1.34",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.34.tgz",
+      "integrity": "sha512-6cP692WwGIs9XXdOO4++N+7qjqv0rqxxVvJ3VHPh/Sc9mVZcQP+ZGhkKiTvWMQRr2tbHkJP/Yn7Y0npb3ZBs4A==",
       "dev": true,
       "requires": {
-        "mime-db": "1.46.0"
+        "mime-db": "1.51.0"
       }
     },
     "mimic-fn": {
@@ -21627,6 +24822,12 @@
       "integrity": "sha512-wXqjST+SLt7R009ySCglWBCFpjUygmCIfD790/kVbiGmUgfYGuB14PiTd5DwVxSV4NcYHjzMkoj5LjQZwTQLEA==",
       "dev": true
     },
+    "min-indent": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/min-indent/-/min-indent-1.0.1.tgz",
+      "integrity": "sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==",
+      "dev": true
+    },
     "minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",
@@ -21634,45 +24835,56 @@
       "dev": true
     },
     "minimatch": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.0.4.tgz",
-      "integrity": "sha512-yJHVQEhyqPLUTgt9B83PXu6W3rx4MvvHvSUvToogpwoGDOUQ+yDrR0HRot+yOCdCO7u4hX3pWft6kWBBcqh0UA==",
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
+      "integrity": "sha512-J7p63hRiAjw1NDEww1W7i37+ByIrOWO5XQQAzZ3VOcL0PNybwpfmV/N05zFAzwQ9USyEcX6t3UO+K5aqBQOIHw==",
       "dev": true,
       "requires": {
         "brace-expansion": "^1.1.7"
       }
     },
     "minimist": {
-      "version": "1.2.5",
-      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
-      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "version": "1.2.6",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.6.tgz",
+      "integrity": "sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==",
       "dev": true
     },
-    "minipass": {
-      "version": "2.9.0",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
-      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+    "minimist-options": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/minimist-options/-/minimist-options-4.1.0.tgz",
+      "integrity": "sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==",
       "dev": true,
       "requires": {
-        "safe-buffer": "^5.1.2",
-        "yallist": "^3.0.0"
+        "arrify": "^1.0.1",
+        "is-plain-obj": "^1.1.0",
+        "kind-of": "^6.0.3"
       },
       "dependencies": {
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+        "is-plain-obj": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-1.1.0.tgz",
+          "integrity": "sha512-yvkRyxmFKEOQ4pNXCmJG5AEQNlXJS5LaONXo5/cLdTZdWvsZ1ioJEonLGAosKlMWE8lwUy/bJzMjcw8az73+Fg==",
           "dev": true
         }
       }
     },
-    "minizlib": {
-      "version": "1.3.3",
-      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
-      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+    "minipass": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-3.1.5.tgz",
+      "integrity": "sha512-+8NzxD82XQoNKNrl1d/FSi+X8wAEWR+sbYAfIvub4Nz0d22plFG72CEVVaufV8PNf4qSslFTD8VMOxNVhHCjTw==",
       "dev": true,
       "requires": {
-        "minipass": "^2.9.0"
+        "yallist": "^4.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-2.1.2.tgz",
+      "integrity": "sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==",
+      "dev": true,
+      "requires": {
+        "minipass": "^3.0.0",
+        "yallist": "^4.0.0"
       }
     },
     "mkdirp": {
@@ -21712,34 +24924,18 @@
       "integrity": "sha512-M2ufzIiINKCuDfBSAUr1vWQ+vuVcA9kqx8JJUsbQi6yf1uGRyb7HfpdfUr5qLXf3B/t8dPvcjhKMmlfnP47EzQ==",
       "dev": true
     },
+    "nanoid": {
+      "version": "3.3.4",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
+      "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==",
+      "dev": true
+    },
     "natural-compare": {
       "version": "1.4.0",
       "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
       "integrity": "sha1-Sr6/7tdUHywnrPspvbvRXI1bpPc=",
       "dev": true
     },
-    "needle": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmjs.org/needle/-/needle-2.6.0.tgz",
-      "integrity": "sha512-KKYdza4heMsEfSWD7VPUIz3zX2XDwOyX2d+geb4vrERZMT5RMU6ujjaD+I5Yr54uZxQ2w6XRTAhHBbSCyovZBg==",
-      "dev": true,
-      "requires": {
-        "debug": "^3.2.6",
-        "iconv-lite": "^0.4.4",
-        "sax": "^1.2.4"
-      },
-      "dependencies": {
-        "debug": {
-          "version": "3.2.7",
-          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
-          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
-          "dev": true,
-          "requires": {
-            "ms": "^2.1.1"
-          }
-        }
-      }
-    },
     "negotiator": {
       "version": "0.6.2",
       "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -21752,10 +24948,43 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node-fetch": {
+      "version": "2.6.7",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.7.tgz",
+      "integrity": "sha512-ZjMPFEfVx5j+y2yF35Kzx5sF7kDzxuDj6ziH4FFbOp87zKDZNx8yExJIb05OGF4Nlt9IHFIMBkRl41VdvcNdbQ==",
+      "dev": true,
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      },
+      "dependencies": {
+        "tr46": {
+          "version": "0.0.3",
+          "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+          "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o=",
+          "dev": true
+        },
+        "webidl-conversions": {
+          "version": "3.0.1",
+          "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+          "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE=",
+          "dev": true
+        },
+        "whatwg-url": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+          "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+          "dev": true,
+          "requires": {
+            "tr46": "~0.0.3",
+            "webidl-conversions": "^3.0.0"
+          }
+        }
+      }
+    },
     "node-forge": {
-      "version": "0.10.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
-      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-1.3.0.tgz",
+      "integrity": "sha512-08ARB91bUi6zNKzVmaj3QO7cr397uiDT2nJ63cHjyNtCTWIgvS47j3eT0WfzUwS9+6Z5YshRaoasFkXCKrIYbA==",
       "dev": true
     },
     "node-int64": {
@@ -21770,41 +24999,6 @@
       "integrity": "sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=",
       "dev": true
     },
-    "node-pre-gyp": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.15.0.tgz",
-      "integrity": "sha512-7QcZa8/fpaU/BKenjcaeFF9hLz2+7S9AqyXFhlH/rilsQ/hPZKK32RtR5EQHJElgu+q5RfbJ34KriI79UWaorA==",
-      "dev": true,
-      "requires": {
-        "detect-libc": "^1.0.2",
-        "mkdirp": "^0.5.3",
-        "needle": "^2.5.0",
-        "nopt": "^4.0.1",
-        "npm-packlist": "^1.1.6",
-        "npmlog": "^4.0.2",
-        "rc": "^1.2.7",
-        "rimraf": "^2.6.1",
-        "semver": "^5.3.0",
-        "tar": "^4.4.2"
-      },
-      "dependencies": {
-        "rimraf": {
-          "version": "2.7.1",
-          "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
-          "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
-          "dev": true,
-          "requires": {
-            "glob": "^7.1.3"
-          }
-        },
-        "semver": {
-          "version": "5.7.1",
-          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
-          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
-          "dev": true
-        }
-      }
-    },
     "node-releases": {
       "version": "1.1.71",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.71.tgz",
@@ -21812,13 +25006,35 @@
       "dev": true
     },
     "nopt": {
-      "version": "4.0.3",
-      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
-      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-5.0.0.tgz",
+      "integrity": "sha512-Tbj67rffqceeLpcRXrT7vKAN8CwfPeIBgM7E6iBkmKLV7bEMwpGgYLGv0jACUsECaa/vuxP0IjEont6umdMgtQ==",
       "dev": true,
       "requires": {
-        "abbrev": "1",
-        "osenv": "^0.1.4"
+        "abbrev": "1"
+      }
+    },
+    "normalize-package-data": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.3.tgz",
+      "integrity": "sha512-p2W1sgqij3zMMyRC067Dg16bfzVH+w7hyegmpIvZ4JNjqtGOVAIvLmjBx3yP7YTe9vKJgkoNOPjwQGogDoMXFA==",
+      "dev": true,
+      "requires": {
+        "hosted-git-info": "^4.0.1",
+        "is-core-module": "^2.5.0",
+        "semver": "^7.3.4",
+        "validate-npm-package-license": "^3.0.1"
+      },
+      "dependencies": {
+        "semver": {
+          "version": "7.3.7",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.7.tgz",
+          "integrity": "sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==",
+          "dev": true,
+          "requires": {
+            "lru-cache": "^6.0.0"
+          }
+        }
       }
     },
     "normalize-path": {
@@ -21827,32 +25043,6 @@
       "integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
       "dev": true
     },
-    "npm-bundled": {
-      "version": "1.1.2",
-      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
-      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
-      "dev": true,
-      "requires": {
-        "npm-normalize-package-bin": "^1.0.1"
-      }
-    },
-    "npm-normalize-package-bin": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
-      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
-      "dev": true
-    },
-    "npm-packlist": {
-      "version": "1.4.8",
-      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
-      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
-      "dev": true,
-      "requires": {
-        "ignore-walk": "^3.0.1",
-        "npm-bundled": "^1.0.1",
-        "npm-normalize-package-bin": "^1.0.1"
-      }
-    },
     "npm-run-path": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz",
@@ -21863,23 +25053,17 @@
       }
     },
     "npmlog": {
-      "version": "4.1.2",
-      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
-      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-6.0.0.tgz",
+      "integrity": "sha512-03ppFRGlsyUaQFbGC2C8QWJN/C/K7PsfyD9aQdhVKAQIH4sQBc8WASqFBP7O+Ut4d2oo5LoeoboB3cGdBZSp6Q==",
       "dev": true,
       "requires": {
-        "are-we-there-yet": "~1.1.2",
-        "console-control-strings": "~1.1.0",
-        "gauge": "~2.7.3",
-        "set-blocking": "~2.0.0"
+        "are-we-there-yet": "^2.0.0",
+        "console-control-strings": "^1.1.0",
+        "gauge": "^4.0.0",
+        "set-blocking": "^2.0.0"
       }
     },
-    "number-is-nan": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
-      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
-      "dev": true
-    },
     "nwsapi": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/nwsapi/-/nwsapi-2.2.0.tgz",
@@ -21892,6 +25076,12 @@
       "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=",
       "dev": true
     },
+    "object-inspect": {
+      "version": "1.12.2",
+      "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.12.2.tgz",
+      "integrity": "sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==",
+      "dev": true
+    },
     "object-is": {
       "version": "1.1.5",
       "resolved": "https://registry.npmjs.org/object-is/-/object-is-1.1.5.tgz",
@@ -21920,6 +25110,49 @@
         "object-keys": "^1.1.1"
       }
     },
+    "object.entries": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.5.tgz",
+      "integrity": "sha512-TyxmjUoZggd4OrrU1W66FMDG6CuqJxsFvymeyXI51+vQLN67zYfZseptRge703kKQdo4uccgAKebXFcRCzk4+g==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.fromentries": {
+      "version": "2.0.5",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.5.tgz",
+      "integrity": "sha512-CAyG5mWQRRiBU57Re4FKoTBjXfDoNwdFVH2Y1tS9PqCsfUTymAohOkEMSG3aRNKmv4lV3O7p1et7c187q6bynw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
+    "object.hasown": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/object.hasown/-/object.hasown-1.1.1.tgz",
+      "integrity": "sha512-LYLe4tivNQzq4JdaWW6WO3HMZZJWzkkH8fnI6EebWl0VZth2wL2Lovm74ep2/gZzlaTdV62JZHEqHQ2yVn8Q/A==",
+      "dev": true,
+      "requires": {
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "object.values": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.5.tgz",
+      "integrity": "sha512-QUZRW0ilQ3PnPpbNtgdNV1PDbEqLIiSFB3l+EnGtBQ/8SUTLj1PZwtQHABZtLgwpJZTSZhuGLOGk57Drx2IvYg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1"
+      }
+    },
     "obuf": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/obuf/-/obuf-1.1.2.tgz",
@@ -21960,13 +25193,14 @@
       }
     },
     "open": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/open/-/open-7.4.2.tgz",
-      "integrity": "sha512-MVHddDVweXZF3awtlAS+6pgKLlm/JgxZ90+/NBurBoQctVOOB/zDdVjcyPzQ+0laDGbsWgrRkflI65sQeOgT9Q==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/open/-/open-8.4.0.tgz",
+      "integrity": "sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==",
       "dev": true,
       "requires": {
-        "is-docker": "^2.0.0",
-        "is-wsl": "^2.1.1"
+        "define-lazy-prop": "^2.0.0",
+        "is-docker": "^2.1.1",
+        "is-wsl": "^2.2.0"
       }
     },
     "optionator": {
@@ -21983,49 +25217,6 @@
         "word-wrap": "~1.2.3"
       }
     },
-    "os-homedir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
-      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
-      "dev": true
-    },
-    "os-tmpdir": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
-      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
-      "dev": true
-    },
-    "osenv": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
-      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
-      "dev": true,
-      "requires": {
-        "os-homedir": "^1.0.0",
-        "os-tmpdir": "^1.0.0"
-      }
-    },
-    "p-defer": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-defer/-/p-defer-1.0.0.tgz",
-      "integrity": "sha1-n26xgvbJqozXQwBKfU+WsZaw+ww=",
-      "dev": true
-    },
-    "p-event": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/p-event/-/p-event-4.2.0.tgz",
-      "integrity": "sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==",
-      "dev": true,
-      "requires": {
-        "p-timeout": "^3.1.0"
-      }
-    },
-    "p-finally": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/p-finally/-/p-finally-1.0.0.tgz",
-      "integrity": "sha1-P7z7FbiZpEEjs0ttzBi3JDNqLK4=",
-      "dev": true
-    },
     "p-limit": {
       "version": "2.3.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
@@ -22063,15 +25254,6 @@
         "retry": "^0.13.1"
       }
     },
-    "p-timeout": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/p-timeout/-/p-timeout-3.2.0.tgz",
-      "integrity": "sha512-rhIwUycgwwKcP9yTOOFK/AKsAopjjCakVqLHePO3CC6Mir1Z99xT+R63jZxAT5lFZLa2inS5h+ZS2GvR99/FBg==",
-      "dev": true,
-      "requires": {
-        "p-finally": "^1.0.0"
-      }
-    },
     "p-try": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
@@ -22087,6 +25269,18 @@
         "callsites": "^3.0.0"
       }
     },
+    "parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "dev": true,
+      "requires": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      }
+    },
     "parse5": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-6.0.1.tgz",
@@ -22135,10 +25329,16 @@
       "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
       "dev": true
     },
+    "picocolors": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
+      "integrity": "sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==",
+      "dev": true
+    },
     "picomatch": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.0.tgz",
-      "integrity": "sha512-lY1Q/PiJGC2zOv/z391WOTD+Z02bCgsFfvxoXXf6h7kv9o+WmsmzYqrAwY63sNgOxE4xEdq0WyUnXfKeBrSvYw==",
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-2.3.1.tgz",
+      "integrity": "sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==",
       "dev": true
     },
     "pirates": {
@@ -22204,6 +25404,93 @@
         }
       }
     },
+    "postcss": {
+      "version": "8.4.14",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.14.tgz",
+      "integrity": "sha512-E398TUmfAYFPBSdzgeieK2Y1+1cpdxJx8yXbK/m57nRhKSmk1GB2tO4lbLBtlkfPQTDKfe4Xqv1ASWPpayPEig==",
+      "dev": true,
+      "requires": {
+        "nanoid": "^3.3.4",
+        "picocolors": "^1.0.0",
+        "source-map-js": "^1.0.2"
+      }
+    },
+    "postcss-media-query-parser": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/postcss-media-query-parser/-/postcss-media-query-parser-0.2.3.tgz",
+      "integrity": "sha512-3sOlxmbKcSHMjlUXQZKQ06jOswE7oVkXPxmZdoB1r5l0q6gTFTQSHxNxOrCccElbW7dxNytifNEo8qidX2Vsig==",
+      "dev": true
+    },
+    "postcss-modules-extract-imports": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz",
+      "integrity": "sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-modules-local-by-default": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz",
+      "integrity": "sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0",
+        "postcss-selector-parser": "^6.0.2",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
+    "postcss-modules-scope": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz",
+      "integrity": "sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==",
+      "dev": true,
+      "requires": {
+        "postcss-selector-parser": "^6.0.4"
+      }
+    },
+    "postcss-modules-values": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz",
+      "integrity": "sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==",
+      "dev": true,
+      "requires": {
+        "icss-utils": "^5.0.0"
+      }
+    },
+    "postcss-resolve-nested-selector": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/postcss-resolve-nested-selector/-/postcss-resolve-nested-selector-0.1.1.tgz",
+      "integrity": "sha512-HvExULSwLqHLgUy1rl3ANIqCsvMS0WHss2UOsXhXnQaZ9VCc2oBvIpXrl00IUFT5ZDITME0o6oiXeiHr2SAIfw==",
+      "dev": true
+    },
+    "postcss-safe-parser": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/postcss-safe-parser/-/postcss-safe-parser-6.0.0.tgz",
+      "integrity": "sha512-FARHN8pwH+WiS2OPCxJI8FuRJpTVnn6ZNFiqAM2aeW2LwTHWWmWgIyKC6cUo0L8aeKiF/14MNvnpls6R2PBeMQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "postcss-selector-parser": {
+      "version": "6.0.10",
+      "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.10.tgz",
+      "integrity": "sha512-IQ7TZdoaqbT+LCpShg46jnZVlhWD2w6iQYAcYXfHARZ7X1t/UGhhceQDs5X0cGqKvYlHNOuv7Oa1xmb0oQuA3w==",
+      "dev": true,
+      "requires": {
+        "cssesc": "^3.0.0",
+        "util-deprecate": "^1.0.2"
+      }
+    },
+    "postcss-value-parser": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz",
+      "integrity": "sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==",
+      "dev": true
+    },
+    "preact": {
+      "version": "10.7.1",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.7.1.tgz",
+      "integrity": "sha512-MufnRFz39aIhs9AMFisonjzTud1PK1bY+jcJLo6m2T9Uh8AqjD77w11eAAawmjUogoGOnipECq7e/1RClIKsxg=="
+    },
     "prelude-ls": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz",
@@ -22254,12 +25541,6 @@
       "integrity": "sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==",
       "dev": true
     },
-    "progress": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/progress/-/progress-2.0.3.tgz",
-      "integrity": "sha512-7PiHtLll5LdnKIMw100I+8xJXR5gW2QwWYkT6iJva0bXitZKa/XMrSbdmg3r2Xnaidz9Qumd0VPaMrZlF9V9sA==",
-      "dev": true
-    },
     "prompts": {
       "version": "2.4.1",
       "resolved": "https://registry.npmjs.org/prompts/-/prompts-2.4.1.tgz",
@@ -22270,6 +25551,25 @@
         "sisteransi": "^1.0.5"
       }
     },
+    "prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+          "dev": true
+        }
+      }
+    },
     "proxy-addr": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz",
@@ -22280,12 +25580,6 @@
         "ipaddr.js": "1.9.1"
       }
     },
-    "prr": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/prr/-/prr-1.0.1.tgz",
-      "integrity": "sha1-0/wRS6BplaRexok/SEzrHXj19HY=",
-      "dev": true
-    },
     "psl": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
@@ -22298,18 +25592,18 @@
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
       "dev": true
     },
-    "querystring": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz",
-      "integrity": "sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=",
-      "dev": true
-    },
     "queue-microtask": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
       "integrity": "sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==",
       "dev": true
     },
+    "quick-lru": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz",
+      "integrity": "sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==",
+      "dev": true
+    },
     "randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -22355,32 +25649,75 @@
         "schema-utils": "^3.0.0"
       }
     },
-    "rc": {
-      "version": "1.2.8",
-      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
-      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
-      "dev": true,
-      "requires": {
-        "deep-extend": "^0.6.0",
-        "ini": "~1.3.0",
-        "minimist": "^1.2.0",
-        "strip-json-comments": "~2.0.1"
-      },
-      "dependencies": {
-        "strip-json-comments": {
-          "version": "2.0.1",
-          "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
-          "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
-          "dev": true
-        }
-      }
-    },
     "react-is": {
       "version": "17.0.2",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==",
       "dev": true
     },
+    "read-pkg": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-5.2.0.tgz",
+      "integrity": "sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==",
+      "dev": true,
+      "requires": {
+        "@types/normalize-package-data": "^2.4.0",
+        "normalize-package-data": "^2.5.0",
+        "parse-json": "^5.0.0",
+        "type-fest": "^0.6.0"
+      },
+      "dependencies": {
+        "hosted-git-info": {
+          "version": "2.8.9",
+          "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",
+          "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
+          "dev": true
+        },
+        "normalize-package-data": {
+          "version": "2.5.0",
+          "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-2.5.0.tgz",
+          "integrity": "sha512-/5CMN3T0R4XTj4DcGaexo+roZSdSFW/0AOOTROrjxzCG1wrWXEsGbRKevjlIL+ZDE4sZlJr5ED4YW0yqmkK+eA==",
+          "dev": true,
+          "requires": {
+            "hosted-git-info": "^2.1.4",
+            "resolve": "^1.10.0",
+            "semver": "2 || 3 || 4 || 5",
+            "validate-npm-package-license": "^3.0.1"
+          }
+        },
+        "semver": {
+          "version": "5.7.1",
+          "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
+          "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==",
+          "dev": true
+        },
+        "type-fest": {
+          "version": "0.6.0",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.6.0.tgz",
+          "integrity": "sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==",
+          "dev": true
+        }
+      }
+    },
+    "read-pkg-up": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/read-pkg-up/-/read-pkg-up-7.0.1.tgz",
+      "integrity": "sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==",
+      "dev": true,
+      "requires": {
+        "find-up": "^4.1.0",
+        "read-pkg": "^5.2.0",
+        "type-fest": "^0.8.1"
+      },
+      "dependencies": {
+        "type-fest": {
+          "version": "0.8.1",
+          "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz",
+          "integrity": "sha512-4dbzIzqvjtgiM5rw1k5rEHtBANKmdudhGyBEajN01fEyhaAIhsoKNy6y7+IN93IfpFtwY9iqi7kD+xwKhQsNJA==",
+          "dev": true
+        }
+      }
+    },
     "readable-stream": {
       "version": "2.3.7",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
@@ -22397,9 +25734,9 @@
       }
     },
     "readdirp": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.5.0.tgz",
-      "integrity": "sha512-cMhu7c/8rdhkHXWsY+osBhfSy0JikwpHK/5+imo+LpeasTF8ouErHrlYkwT0++njiyuDvc7OFY5T3ukvZ8qmFQ==",
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
+      "integrity": "sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==",
       "dev": true,
       "requires": {
         "picomatch": "^2.2.1"
@@ -22414,6 +25751,16 @@
         "resolve": "^1.9.0"
       }
     },
+    "redent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/redent/-/redent-3.0.0.tgz",
+      "integrity": "sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==",
+      "dev": true,
+      "requires": {
+        "indent-string": "^4.0.0",
+        "strip-indent": "^3.0.0"
+      }
+    },
     "regenerate": {
       "version": "1.4.2",
       "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.2.tgz",
@@ -22445,19 +25792,20 @@
       }
     },
     "regexp.prototype.flags": {
-      "version": "1.3.1",
-      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",
-      "integrity": "sha512-JiBdRBq91WlY7uRJ0ds7R+dU02i6LKi8r3BuQhNXn+kmeLN+EfHhfjqMRis1zJxnlu88hq/4dx0P2OP3APRTOA==",
+      "version": "1.4.3",
+      "resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz",
+      "integrity": "sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==",
       "dev": true,
       "requires": {
         "call-bind": "^1.0.2",
-        "define-properties": "^1.1.3"
+        "define-properties": "^1.1.3",
+        "functions-have-names": "^1.2.2"
       }
     },
     "regexpp": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.1.0.tgz",
-      "integrity": "sha512-ZOIzd8yVsQQA7j8GCSlPGXwg5PfmA1mrq0JP4nGhh54LaKN3xdai/vHUDu74pKwV8OxseMS65u2NImosQcSD0Q==",
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-3.2.0.tgz",
+      "integrity": "sha512-pq2bWo9mVD43nbts2wGv17XLiNLya+GklZ8kaDLV2Z08gDCsGpnKn9BFMepvWuHCbyVvY7J5o5+BVvoQbmlJLg==",
       "dev": true
     },
     "regexpu-core": {
@@ -22582,12 +25930,6 @@
       "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
       "dev": true
     },
-    "sax": {
-      "version": "1.2.4",
-      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
-      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
-      "dev": true
-    },
     "saxes": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/saxes/-/saxes-5.0.1.tgz",
@@ -22615,12 +25957,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.11",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.11.tgz",
-      "integrity": "sha512-aVmbPOfViZqOZPgRBT0+3u4yZFHpmnIghLMlAcb5/xhp5ZtB/RVnKhz5vl2M32CLXAqR4kha9zfhNg0Lf/sxKA==",
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-2.0.1.tgz",
+      "integrity": "sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==",
       "dev": true,
       "requires": {
-        "node-forge": "^0.10.0"
+        "node-forge": "^1"
       }
     },
     "semver": {
@@ -22788,10 +26130,21 @@
       "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==",
       "dev": true
     },
+    "side-channel": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/side-channel/-/side-channel-1.0.4.tgz",
+      "integrity": "sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.0",
+        "get-intrinsic": "^1.0.2",
+        "object-inspect": "^1.9.0"
+      }
+    },
     "signal-exit": {
-      "version": "3.0.3",
-      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
-      "integrity": "sha512-VUJ49FC8U1OxwZLxIbTTrDvLnf/6TDgxZcK8wxR8zs13xpx7xbG60ndBlhNrFi2EMuFRoeDoJO7wthSLq42EjA==",
+      "version": "3.0.7",
+      "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.7.tgz",
+      "integrity": "sha512-wnD2ZE+l+SPC/uoS0vXeE9L1+0wuaMqKlfz9AMUo38JsyLSBWSFcHR1Rri62LZc12vLr1gb3jl7iwQhgwpAbGQ==",
       "dev": true
     },
     "simple-concat": {
@@ -22801,9 +26154,9 @@
       "dev": true
     },
     "simple-get": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.0.tgz",
-      "integrity": "sha512-bCR6cP+aTdScaQCnQKbPKtJOKDp/hj9EDLJo3Nw4y1QksqaovlW/bnptB6/c1e+qmNIDHRK+oXFDdEqBT8WzUA==",
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/simple-get/-/simple-get-3.1.1.tgz",
+      "integrity": "sha512-CQ5LTKGfCpvE1K0n2us+kuMPbk/q0EKl82s4aheV9oXjFEz6W/Y7oQFVJuU6QG77hRT4Ghb5RURteF5vnWjupA==",
       "dev": true,
       "requires": {
         "decompress-response": "^4.2.0",
@@ -22891,10 +26244,26 @@
       "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
       "dev": true
     },
+    "source-map-js": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
+      "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true
+    },
+    "source-map-resolve": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.6.0.tgz",
+      "integrity": "sha512-KXBr9d/fO/bWo97NXsPIAW1bFSBOuCnjbNTBMO7N59hsv5i9yzRDfcYwwt0l04+VqnKC+EwzvJZIP/qkuMgR/w==",
+      "dev": true,
+      "requires": {
+        "atob": "^2.1.2",
+        "decode-uri-component": "^0.2.0"
+      }
+    },
     "source-map-support": {
-      "version": "0.5.19",
-      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.19.tgz",
-      "integrity": "sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==",
+      "version": "0.5.21",
+      "resolved": "https://registry.npmjs.org/source-map-support/-/source-map-support-0.5.21.tgz",
+      "integrity": "sha512-uBHU3L3czsIyYXKX88fdrGovxdSCoTGDRZ6SYXtSRxLZUzHg5P/66Ht6uoUlHu9EZod+inXhKo3qQgwXUT/y1w==",
       "dev": true,
       "requires": {
         "buffer-from": "^1.0.0",
@@ -22909,6 +26278,38 @@
         }
       }
     },
+    "spdx-correct": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.1.tgz",
+      "integrity": "sha512-cOYcUWwhCuHCXi49RhFRCyJEK3iPj1Ziz9DpViV3tbZOwXD49QzIN3MpOLJNxh2qwq2lJJZaKMVw9qNi4jTC0w==",
+      "dev": true,
+      "requires": {
+        "spdx-expression-parse": "^3.0.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-exceptions": {
+      "version": "2.3.0",
+      "resolved": "https://registry.npmjs.org/spdx-exceptions/-/spdx-exceptions-2.3.0.tgz",
+      "integrity": "sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==",
+      "dev": true
+    },
+    "spdx-expression-parse": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz",
+      "integrity": "sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==",
+      "dev": true,
+      "requires": {
+        "spdx-exceptions": "^2.1.0",
+        "spdx-license-ids": "^3.0.0"
+      }
+    },
+    "spdx-license-ids": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.11.tgz",
+      "integrity": "sha512-Ctl2BrFiM0X3MANYgj3CkygxhRmr9mi6xhejbdO960nF6EDJApTYpn0BQnDKlnNBULKiCN1n3w9EBkHK8ZWg+g==",
+      "dev": true
+    },
     "spdy": {
       "version": "4.0.2",
       "resolved": "https://registry.npmjs.org/spdy/-/spdy-4.0.2.tgz",
@@ -23004,23 +26405,61 @@
       }
     },
     "string-width": {
-      "version": "4.2.2",
-      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.2.tgz",
-      "integrity": "sha512-XBJbT3N4JhVumXE0eoLU9DCjcaF92KLNqTmFCnG1pf8duUxFGwtP6AD6nkjw9a3IdiRtL3E2w3JDiE/xi3vOeA==",
+      "version": "4.2.3",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-4.2.3.tgz",
+      "integrity": "sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==",
       "dev": true,
       "requires": {
         "emoji-regex": "^8.0.0",
         "is-fullwidth-code-point": "^3.0.0",
-        "strip-ansi": "^6.0.0"
+        "strip-ansi": "^6.0.1"
+      }
+    },
+    "string.prototype.matchall": {
+      "version": "4.0.7",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.7.tgz",
+      "integrity": "sha512-f48okCX7JiwVi1NXCVWcFnZgADDC/n2vePlQ/KUCNqCikLLilQvwjMO8+BHVKvgzH0JB0J9LEPgxOGT02RoETg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.19.1",
+        "get-intrinsic": "^1.1.1",
+        "has-symbols": "^1.0.3",
+        "internal-slot": "^1.0.3",
+        "regexp.prototype.flags": "^1.4.1",
+        "side-channel": "^1.0.4"
+      }
+    },
+    "string.prototype.trimend": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.5.tgz",
+      "integrity": "sha512-I7RGvmjV4pJ7O3kdf+LXFpVfdNOxtCW/2C8f6jNiW4+PQchwxkCDzlk1/7p+Wl4bqFIZeF47qAHXLuHHWKAxog==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
+      }
+    },
+    "string.prototype.trimstart": {
+      "version": "1.0.5",
+      "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.5.tgz",
+      "integrity": "sha512-THx16TJCGlsN0o6dl2o6ncWUsdgnLRSA23rRE5pyGBw/mLr3Ej/R2LaqCtgP8VNMGZsvMWnf9ooZPyY2bHvUFg==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "define-properties": "^1.1.4",
+        "es-abstract": "^1.19.5"
       }
     },
     "strip-ansi": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.0.tgz",
-      "integrity": "sha512-AuvKTrTfQNYNIctbR1K/YGTR1756GycPsg7b9bdV9Duqur4gv6aKqHXah67Z8ImS7WEz5QVcOtlfW2rZEugt6w==",
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-6.0.1.tgz",
+      "integrity": "sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==",
       "dev": true,
       "requires": {
-        "ansi-regex": "^5.0.0"
+        "ansi-regex": "^5.0.1"
       }
     },
     "strip-bom": {
@@ -23035,12 +26474,151 @@
       "integrity": "sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==",
       "dev": true
     },
+    "strip-indent": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/strip-indent/-/strip-indent-3.0.0.tgz",
+      "integrity": "sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==",
+      "dev": true,
+      "requires": {
+        "min-indent": "^1.0.0"
+      }
+    },
     "strip-json-comments": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
       "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
       "dev": true
     },
+    "style-loader": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-3.3.1.tgz",
+      "integrity": "sha512-GPcQ+LDJbrcxHORTRes6Jy2sfvK2kS6hpSfI/fXhPt+spVzxF6LJ1dHLN9zIGmVaaP044YKaIatFaufENRiDoQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "style-search": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/style-search/-/style-search-0.1.0.tgz",
+      "integrity": "sha512-Dj1Okke1C3uKKwQcetra4jSuk0DqbzbYtXipzFlFMZtowbF1x7BKJwB9AayVMyFARvU8EDrZdcax4At/452cAg==",
+      "dev": true
+    },
+    "stylelint": {
+      "version": "14.9.1",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-14.9.1.tgz",
+      "integrity": "sha512-RdAkJdPiLqHawCSnu21nE27MjNXaVd4WcOHA4vK5GtIGjScfhNnaOuWR2wWdfKFAvcWQPOYe311iveiVKSmwsA==",
+      "dev": true,
+      "requires": {
+        "@csstools/selector-specificity": "^2.0.1",
+        "balanced-match": "^2.0.0",
+        "colord": "^2.9.2",
+        "cosmiconfig": "^7.0.1",
+        "css-functions-list": "^3.1.0",
+        "debug": "^4.3.4",
+        "execall": "^2.0.0",
+        "fast-glob": "^3.2.11",
+        "fastest-levenshtein": "^1.0.12",
+        "file-entry-cache": "^6.0.1",
+        "get-stdin": "^8.0.0",
+        "global-modules": "^2.0.0",
+        "globby": "^11.1.0",
+        "globjoin": "^0.1.4",
+        "html-tags": "^3.2.0",
+        "ignore": "^5.2.0",
+        "import-lazy": "^4.0.0",
+        "imurmurhash": "^0.1.4",
+        "is-plain-object": "^5.0.0",
+        "known-css-properties": "^0.25.0",
+        "mathml-tag-names": "^2.1.3",
+        "meow": "^9.0.0",
+        "micromatch": "^4.0.5",
+        "normalize-path": "^3.0.0",
+        "picocolors": "^1.0.0",
+        "postcss": "^8.4.14",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-safe-parser": "^6.0.0",
+        "postcss-selector-parser": "^6.0.10",
+        "postcss-value-parser": "^4.2.0",
+        "resolve-from": "^5.0.0",
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1",
+        "style-search": "^0.1.0",
+        "supports-hyperlinks": "^2.2.0",
+        "svg-tags": "^1.0.0",
+        "table": "^6.8.0",
+        "v8-compile-cache": "^2.3.0",
+        "write-file-atomic": "^4.0.1"
+      },
+      "dependencies": {
+        "balanced-match": {
+          "version": "2.0.0",
+          "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-2.0.0.tgz",
+          "integrity": "sha512-1ugUSr8BHXRnK23KfuYS+gVMC3LB8QGH9W1iGtDPsNWoQbgtXSExkBu2aDR4epiGWZOjZsj6lDl/N/AqqTC3UA==",
+          "dev": true
+        },
+        "get-stdin": {
+          "version": "8.0.0",
+          "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz",
+          "integrity": "sha512-sY22aA6xchAzprjyqmSEQv4UbAAzRN0L2dQB0NlN5acTTK9Don6nhoc3eAbUnpZiCANAMfd/+40kVdKfFygohg==",
+          "dev": true
+        },
+        "is-plain-object": {
+          "version": "5.0.0",
+          "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+          "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+          "dev": true
+        },
+        "write-file-atomic": {
+          "version": "4.0.1",
+          "resolved": "https://registry.npmjs.org/write-file-atomic/-/write-file-atomic-4.0.1.tgz",
+          "integrity": "sha512-nSKUxgAbyioruk6hU87QzVbY279oYT6uiwgDoujth2ju4mJ+TZau7SQBhtbTmUyuNYTuXnSyRn66FV0+eCgcrQ==",
+          "dev": true,
+          "requires": {
+            "imurmurhash": "^0.1.4",
+            "signal-exit": "^3.0.7"
+          }
+        }
+      }
+    },
+    "stylelint-config-css-modules": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-css-modules/-/stylelint-config-css-modules-4.1.0.tgz",
+      "integrity": "sha512-w6d552NscwvpUEaUcmq8GgWXKRv6lVHLbDj6QIHSM2vCWr83qRqRvXBJCfXDyaG/J3Zojw2inU9VvU99ZlXuUw==",
+      "dev": true,
+      "requires": {
+        "stylelint-scss": "^4.2.0"
+      }
+    },
+    "stylelint-config-recommended": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-8.0.0.tgz",
+      "integrity": "sha512-IK6dWvE000+xBv9jbnHOnBq01gt6HGVB2ZTsot+QsMpe82doDQ9hvplxfv4YnpEuUwVGGd9y6nbaAnhrjcxhZQ==",
+      "dev": true,
+      "requires": {}
+    },
+    "stylelint-config-standard": {
+      "version": "26.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-26.0.0.tgz",
+      "integrity": "sha512-hUuB7LaaqM8abvkOO84wh5oYSkpXgTzHu2Zza6e7mY+aOmpNTjoFBRxSLlzY0uAOMWEFx0OMKzr+reG1BUtcqQ==",
+      "dev": true,
+      "requires": {
+        "stylelint-config-recommended": "^8.0.0"
+      }
+    },
+    "stylelint-scss": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.2.0.tgz",
+      "integrity": "sha512-HHHMVKJJ5RM9pPIbgJ/XA67h9H0407G68Rm69H4fzFbFkyDMcTV1Byep3qdze5+fJ3c0U7mJrbj6S0Fg072uZA==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "lodash": "^4.17.21",
+        "postcss-media-query-parser": "^0.2.3",
+        "postcss-resolve-nested-selector": "^0.1.1",
+        "postcss-selector-parser": "^6.0.6",
+        "postcss-value-parser": "^4.1.0"
+      }
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -23077,6 +26655,12 @@
         }
       }
     },
+    "svg-tags": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/svg-tags/-/svg-tags-1.0.0.tgz",
+      "integrity": "sha512-ovssysQTa+luh7A5Weu3Rta6FJlFBBbInjOh722LIt6klpU2/HtdUbszju/G4devcvk8PGt7FCLv5wftu3THUA==",
+      "dev": true
+    },
     "symbol-tree": {
       "version": "3.2.4",
       "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",
@@ -23084,21 +26668,22 @@
       "dev": true
     },
     "table": {
-      "version": "6.0.7",
-      "resolved": "https://registry.npmjs.org/table/-/table-6.0.7.tgz",
-      "integrity": "sha512-rxZevLGTUzWna/qBLObOe16kB2RTnnbhciwgPbMMlazz1yZGVEgnZK762xyVdVznhqxrfCeBMmMkgOOaPwjH7g==",
+      "version": "6.8.0",
+      "resolved": "https://registry.npmjs.org/table/-/table-6.8.0.tgz",
+      "integrity": "sha512-s/fitrbVeEyHKFa7mFdkuQMWlH1Wgw/yEXMt5xACT4ZpzWFluehAxRtUUQKPuWhaLAWhFcVx6w3oC8VKaUfPGA==",
       "dev": true,
       "requires": {
-        "ajv": "^7.0.2",
-        "lodash": "^4.17.20",
+        "ajv": "^8.0.1",
+        "lodash.truncate": "^4.4.2",
         "slice-ansi": "^4.0.0",
-        "string-width": "^4.2.0"
+        "string-width": "^4.2.3",
+        "strip-ansi": "^6.0.1"
       },
       "dependencies": {
         "ajv": {
-          "version": "7.2.3",
-          "resolved": "https://registry.npmjs.org/ajv/-/ajv-7.2.3.tgz",
-          "integrity": "sha512-idv5WZvKVXDqKralOImQgPM9v6WOdLNa0IY3B3doOjw/YxRGT8I+allIJ6kd7Uaj+SF1xZUSU+nPM5aDNBVtnw==",
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
           "dev": true,
           "requires": {
             "fast-deep-equal": "^3.1.1",
@@ -23116,36 +26701,29 @@
       }
     },
     "tapable": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/tapable/-/tapable-1.1.3.tgz",
-      "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.1.tgz",
+      "integrity": "sha512-GNzQvQTOIP6RyTfE2Qxb8ZVlNmw0n88vp1szwWRimP02mnTsx3Wtn5qRdqY9w2XduFNUgvOwhNnQsjwCp+kqaQ==",
       "dev": true
     },
     "tar": {
-      "version": "4.4.19",
-      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
-      "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
+      "version": "6.1.11",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-6.1.11.tgz",
+      "integrity": "sha512-an/KZQzQUkZCkuoAA64hM92X0Urb6VpRhAFllDzz44U2mcD5scmT3zBc4VgVpkugF580+DQn8eAFSyoQt0tznA==",
       "dev": true,
       "requires": {
-        "chownr": "^1.1.4",
-        "fs-minipass": "^1.2.7",
-        "minipass": "^2.9.0",
-        "minizlib": "^1.3.3",
-        "mkdirp": "^0.5.5",
-        "safe-buffer": "^5.2.1",
-        "yallist": "^3.1.1"
+        "chownr": "^2.0.0",
+        "fs-minipass": "^2.0.0",
+        "minipass": "^3.0.0",
+        "minizlib": "^2.1.1",
+        "mkdirp": "^1.0.3",
+        "yallist": "^4.0.0"
       },
       "dependencies": {
-        "safe-buffer": {
-          "version": "5.2.1",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
-          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
-          "dev": true
-        },
-        "yallist": {
-          "version": "3.1.1",
-          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
-          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+        "mkdirp": {
+          "version": "1.0.4",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-1.0.4.tgz",
+          "integrity": "sha512-vVqVZQyf3WLx2Shd0qJ9xuvqgAyKPLAiqITEtqW0oIUjzo3PePDd6fW9iFz30ef7Ysp/oiWqbhszeGWW2T6Gzw==",
           "dev": true
         }
       }
@@ -23161,20 +26739,21 @@
       }
     },
     "terser": {
-      "version": "5.6.1",
-      "resolved": "https://registry.npmjs.org/terser/-/terser-5.6.1.tgz",
-      "integrity": "sha512-yv9YLFQQ+3ZqgWCUk+pvNJwgUTdlIxUk1WTN+RnaFJe2L7ipG2csPT0ra2XRm7Cs8cxN7QXmK1rFzEwYEQkzXw==",
+      "version": "5.14.2",
+      "resolved": "https://registry.npmjs.org/terser/-/terser-5.14.2.tgz",
+      "integrity": "sha512-oL0rGeM/WFQCUd0y2QrWxYnq7tfSuKBiqTjRPWrRgB46WD/kiwHwF8T23z78H6Q6kGCuuHcPB+KULHRdxvVGQA==",
       "dev": true,
       "requires": {
+        "@jridgewell/source-map": "^0.3.2",
+        "acorn": "^8.5.0",
         "commander": "^2.20.0",
-        "source-map": "~0.7.2",
-        "source-map-support": "~0.5.19"
+        "source-map-support": "~0.5.20"
       },
       "dependencies": {
-        "source-map": {
-          "version": "0.7.3",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.3.tgz",
-          "integrity": "sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==",
+        "acorn": {
+          "version": "8.7.1",
+          "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.7.1.tgz",
+          "integrity": "sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==",
           "dev": true
         }
       }
@@ -23286,6 +26865,12 @@
         "punycode": "^2.1.1"
       }
     },
+    "trim-newlines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.1.tgz",
+      "integrity": "sha512-c1PTsA3tYrIsLGkJkzHF+w9F2EyxfXGo4UyJc4pFL++FMjnq0HJS69T3M7d//gKrFKwy429bouPescbjecU+Zw==",
+      "dev": true
+    },
     "ts-jest": {
       "version": "27.0.5",
       "resolved": "https://registry.npmjs.org/ts-jest/-/ts-jest-27.0.5.tgz",
@@ -23314,14 +26899,13 @@
       }
     },
     "ts-loader": {
-      "version": "8.0.18",
-      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-8.0.18.tgz",
-      "integrity": "sha512-hRZzkydPX30XkLaQwJTDcWDoxZHK6IrEMDQpNd7tgcakFruFkeUp/aY+9hBb7BUGb+ZWKI0jiOGMo0MckwzdDQ==",
+      "version": "9.3.0",
+      "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.3.0.tgz",
+      "integrity": "sha512-2kLLAdAD+FCKijvGKi9sS0OzoqxLCF3CxHpok7rVgCZ5UldRzH0TkbwG9XECKjBzHsAewntC5oDaI/FwKzEUog==",
       "dev": true,
       "requires": {
         "chalk": "^4.1.0",
-        "enhanced-resolve": "^4.0.0",
-        "loader-utils": "^2.0.0",
+        "enhanced-resolve": "^5.0.0",
         "micromatch": "^4.0.0",
         "semver": "^7.3.4"
       },
@@ -23442,11 +27026,23 @@
       }
     },
     "typescript": {
-      "version": "4.2.3",
-      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.2.3.tgz",
-      "integrity": "sha512-qOcYwxaByStAWrBf4x0fibwZvMRG+r4cQoTjbPtUlrWjBHbmCAww1i448U0GJ+3cNNEtebDteo/cHOR3xJ4wEw==",
+      "version": "4.7.3",
+      "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.7.3.tgz",
+      "integrity": "sha512-WOkT3XYvrpXx4vMMqlD+8R8R37fZkjyLGlxavMc4iB8lrl8L0DeTcHbYgw/v0N/z9wAFsgBhcsF0ruoySS22mA==",
       "dev": true
     },
+    "unbox-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/unbox-primitive/-/unbox-primitive-1.0.2.tgz",
+      "integrity": "sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==",
+      "dev": true,
+      "requires": {
+        "call-bind": "^1.0.2",
+        "has-bigints": "^1.0.2",
+        "has-symbols": "^1.0.3",
+        "which-boxed-primitive": "^1.0.2"
+      }
+    },
     "unicode-canonical-property-names-ecmascript": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-1.0.4.tgz",
@@ -23496,24 +27092,6 @@
         "punycode": "^2.1.0"
       }
     },
-    "url": {
-      "version": "0.11.0",
-      "resolved": "https://registry.npmjs.org/url/-/url-0.11.0.tgz",
-      "integrity": "sha1-ODjpfPxgUh63PFJajlW/3Z4uKPE=",
-      "dev": true,
-      "requires": {
-        "punycode": "1.3.2",
-        "querystring": "0.2.0"
-      },
-      "dependencies": {
-        "punycode": {
-          "version": "1.3.2",
-          "resolved": "https://registry.npmjs.org/punycode/-/punycode-1.3.2.tgz",
-          "integrity": "sha1-llOgNvt8HuQjQvIyXM7v6jkmxI0=",
-          "dev": true
-        }
-      }
-    },
     "util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -23551,6 +27129,16 @@
         }
       }
     },
+    "validate-npm-package-license": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.4.tgz",
+      "integrity": "sha512-DpKm2Ui/xN7/HQKCtpZxoRWBhZ9Z0kqtygG8XCgNQ8ZlDnxuQmWhj566j8fN4Cu3/JmbhsDo7fcAJq4s9h27Ew==",
+      "dev": true,
+      "requires": {
+        "spdx-correct": "^3.0.0",
+        "spdx-expression-parse": "^3.0.0"
+      }
+    },
     "vary": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -23645,47 +27233,35 @@
           "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.1.0.tgz",
           "integrity": "sha512-LWCF/Wn0nfHOmJ9rzQApGnxnvgfROzGilS8936rqN/lfcYkY9MYZzdMqN+2NJ4SlTc+m5HiSa+kNfDtI64dwUA==",
           "dev": true
-        },
-        "enhanced-resolve": {
-          "version": "5.7.0",
-          "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.7.0.tgz",
-          "integrity": "sha512-6njwt/NsZFUKhM6j9U8hzVyD4E4r0x7NQzhTCbcWOJ0IQjNSAoalWmb0AE51Wn+fwan5qVESWi7t2ToBxs9vrw==",
-          "dev": true,
-          "requires": {
-            "graceful-fs": "^4.2.4",
-            "tapable": "^2.2.0"
-          }
-        },
-        "tapable": {
-          "version": "2.2.0",
-          "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.2.0.tgz",
-          "integrity": "sha512-FBk4IesMV1rBxX2tfiK8RAmogtWn53puLOQlvO8XuwlgxcYbP4mVPS9Ph4aeamSyyVjOl24aYWAuc8U5kCVwMw==",
-          "dev": true
         }
       }
     },
     "webpack-cli": {
-      "version": "4.5.0",
-      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.5.0.tgz",
-      "integrity": "sha512-wXg/ef6Ibstl2f50mnkcHblRPN/P9J4Nlod5Hg9HGFgSeF8rsqDGHJeVe4aR26q9l62TUJi6vmvC2Qz96YJw1Q==",
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/webpack-cli/-/webpack-cli-4.9.1.tgz",
+      "integrity": "sha512-JYRFVuyFpzDxMDB+v/nanUdQYcZtqFPGzmlW4s+UkPMFhSpfRNmf1z4AwYcHJVdvEFAM7FFCQdNTpsBYhDLusQ==",
       "dev": true,
       "requires": {
         "@discoveryjs/json-ext": "^0.5.0",
-        "@webpack-cli/configtest": "^1.0.1",
-        "@webpack-cli/info": "^1.2.2",
-        "@webpack-cli/serve": "^1.3.0",
-        "colorette": "^1.2.1",
+        "@webpack-cli/configtest": "^1.1.0",
+        "@webpack-cli/info": "^1.4.0",
+        "@webpack-cli/serve": "^1.6.0",
+        "colorette": "^2.0.14",
         "commander": "^7.0.0",
-        "enquirer": "^2.3.6",
         "execa": "^5.0.0",
         "fastest-levenshtein": "^1.0.12",
         "import-local": "^3.0.2",
         "interpret": "^2.2.0",
         "rechoir": "^0.7.0",
-        "v8-compile-cache": "^2.2.0",
         "webpack-merge": "^5.7.3"
       },
       "dependencies": {
+        "colorette": {
+          "version": "2.0.16",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+          "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+          "dev": true
+        },
         "commander": {
           "version": "7.2.0",
           "resolved": "https://registry.npmjs.org/commander/-/commander-7.2.0.tgz",
@@ -23695,59 +27271,175 @@
       }
     },
     "webpack-dev-middleware": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-4.1.0.tgz",
-      "integrity": "sha512-mpa/FY+DiBu5+r5JUIyTCYWRfkWgyA3/OOE9lwfzV9S70A4vJYLsVRKj5rMFEsezBroy2FmPyQ8oBRVW8QmK1A==",
+      "version": "5.3.1",
+      "resolved": "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-5.3.1.tgz",
+      "integrity": "sha512-81EujCKkyles2wphtdrnPg/QqegC/AtqNH//mQkBYSMqwFVCQrxM6ktB2O/SPlZy7LqeEfTbV3cZARGQz6umhg==",
       "dev": true,
       "requires": {
-        "colorette": "^1.2.1",
-        "mem": "^8.0.0",
-        "memfs": "^3.2.0",
-        "mime-types": "^2.1.28",
+        "colorette": "^2.0.10",
+        "memfs": "^3.4.1",
+        "mime-types": "^2.1.31",
         "range-parser": "^1.2.1",
-        "schema-utils": "^3.0.0"
+        "schema-utils": "^4.0.0"
+      },
+      "dependencies": {
+        "ajv": {
+          "version": "8.11.0",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.11.0.tgz",
+          "integrity": "sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "colorette": {
+          "version": "2.0.16",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+          "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+          "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        }
       }
     },
     "webpack-dev-server": {
-      "version": "4.0.0-beta.3",
-      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.0.0-beta.3.tgz",
-      "integrity": "sha512-Ud7ieH15No/KiSdRuzk+2k+S4gSCR/N7m4hJhesDbKQEZy3P+NPXTXfsimNOZvbVX2TRuIEFB+VdLZFn8DwGwg==",
+      "version": "4.7.4",
+      "resolved": "https://registry.npmjs.org/webpack-dev-server/-/webpack-dev-server-4.7.4.tgz",
+      "integrity": "sha512-nfdsb02Zi2qzkNmgtZjkrMOcXnYZ6FLKcQwpxT7MvmHKc+oTtDsBju8j+NMyAygZ9GW1jMEUpy3itHtqgEhe1A==",
       "dev": true,
       "requires": {
-        "ansi-html": "^0.0.7",
+        "@types/bonjour": "^3.5.9",
+        "@types/connect-history-api-fallback": "^1.3.5",
+        "@types/express": "^4.17.13",
+        "@types/serve-index": "^1.9.1",
+        "@types/sockjs": "^0.3.33",
+        "@types/ws": "^8.2.2",
+        "ansi-html-community": "^0.0.8",
         "bonjour": "^3.5.0",
-        "chokidar": "^3.5.1",
+        "chokidar": "^3.5.3",
+        "colorette": "^2.0.10",
         "compression": "^1.7.4",
         "connect-history-api-fallback": "^1.6.0",
+        "default-gateway": "^6.0.3",
         "del": "^6.0.0",
         "express": "^4.17.1",
-        "find-cache-dir": "^3.3.1",
         "graceful-fs": "^4.2.6",
         "html-entities": "^2.3.2",
-        "http-proxy-middleware": "^1.3.1",
-        "internal-ip": "^6.2.0",
-        "ipaddr.js": "^2.0.0",
-        "is-absolute-url": "^3.0.3",
-        "killable": "^1.0.1",
-        "open": "^7.4.2",
+        "http-proxy-middleware": "^2.0.0",
+        "ipaddr.js": "^2.0.1",
+        "open": "^8.0.9",
         "p-retry": "^4.5.0",
         "portfinder": "^1.0.28",
-        "schema-utils": "^3.0.0",
-        "selfsigned": "^1.10.11",
+        "schema-utils": "^4.0.0",
+        "selfsigned": "^2.0.0",
         "serve-index": "^1.9.1",
         "sockjs": "^0.3.21",
         "spdy": "^4.0.2",
-        "strip-ansi": "^6.0.0",
-        "url": "^0.11.0",
-        "webpack-dev-middleware": "^4.1.0",
-        "ws": "^7.4.5"
+        "strip-ansi": "^7.0.0",
+        "webpack-dev-middleware": "^5.3.1",
+        "ws": "^8.4.2"
       },
       "dependencies": {
+        "ajv": {
+          "version": "8.8.2",
+          "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.8.2.tgz",
+          "integrity": "sha512-x9VuX+R/jcFj1DHo/fCp99esgGDWiHENrKxaCENuCxpoMCmAt/COCGVDwA7kleEpEzJjDnvh3yGoOuLu0Dtllw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.1",
+            "json-schema-traverse": "^1.0.0",
+            "require-from-string": "^2.0.2",
+            "uri-js": "^4.2.2"
+          }
+        },
+        "ajv-keywords": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
+          "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
+          "dev": true,
+          "requires": {
+            "fast-deep-equal": "^3.1.3"
+          }
+        },
+        "ansi-regex": {
+          "version": "6.0.1",
+          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.0.1.tgz",
+          "integrity": "sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==",
+          "dev": true
+        },
+        "colorette": {
+          "version": "2.0.16",
+          "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.16.tgz",
+          "integrity": "sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==",
+          "dev": true
+        },
         "ipaddr.js": {
           "version": "2.0.1",
           "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-2.0.1.tgz",
           "integrity": "sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==",
           "dev": true
+        },
+        "json-schema-traverse": {
+          "version": "1.0.0",
+          "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
+          "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
+          "dev": true
+        },
+        "schema-utils": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.0.0.tgz",
+          "integrity": "sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==",
+          "dev": true,
+          "requires": {
+            "@types/json-schema": "^7.0.9",
+            "ajv": "^8.8.0",
+            "ajv-formats": "^2.1.1",
+            "ajv-keywords": "^5.0.0"
+          }
+        },
+        "strip-ansi": {
+          "version": "7.0.1",
+          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-7.0.1.tgz",
+          "integrity": "sha512-cXNxvT8dFNRVfhVME3JAe98mkXDYN2O1l7jmcwMnOslDeESg1rF/OZMtK0nRAhiari1unG5cD4jG3rapUAkLbw==",
+          "dev": true,
+          "requires": {
+            "ansi-regex": "^6.0.1"
+          }
+        },
+        "ws": {
+          "version": "8.5.0",
+          "resolved": "https://registry.npmjs.org/ws/-/ws-8.5.0.tgz",
+          "integrity": "sha512-BWX0SWVgLPzYwF8lTzEy1egjhS4S4OEAHfsO8o65WOVsrnSRGaSiUaa9e0ggGlkMTtBlmOpEXiie9RUcBO86qg==",
+          "dev": true,
+          "requires": {}
         }
       }
     },
@@ -23831,46 +27523,26 @@
         "isexe": "^2.0.0"
       }
     },
-    "wide-align": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
-      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+    "which-boxed-primitive": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/which-boxed-primitive/-/which-boxed-primitive-1.0.2.tgz",
+      "integrity": "sha512-bwZdv0AKLpplFY2KZRX6TvyuN7ojjr7lwkg6ml0roIy9YeuSr7JS372qlNW18UQYzgYK9ziGcerWqZOmEn9VNg==",
       "dev": true,
       "requires": {
-        "string-width": "^1.0.2 || 2"
-      },
-      "dependencies": {
-        "ansi-regex": {
-          "version": "3.0.0",
-          "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz",
-          "integrity": "sha1-7QMXwyIGT3lGbAKWa922Bas32Zg=",
-          "dev": true
-        },
-        "is-fullwidth-code-point": {
-          "version": "2.0.0",
-          "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-2.0.0.tgz",
-          "integrity": "sha1-o7MKXE8ZkYMWeqq5O+764937ZU8=",
-          "dev": true
-        },
-        "string-width": {
-          "version": "2.1.1",
-          "resolved": "https://registry.npmjs.org/string-width/-/string-width-2.1.1.tgz",
-          "integrity": "sha512-nOqH59deCq9SRHlxq1Aw85Jnt4w6KvLKqWVik6oA9ZklXLNIOlqg4F2yrT1MVaTjAqvVwdfeZ7w7aCvJD7ugkw==",
-          "dev": true,
-          "requires": {
-            "is-fullwidth-code-point": "^2.0.0",
-            "strip-ansi": "^4.0.0"
-          }
-        },
-        "strip-ansi": {
-          "version": "4.0.0",
-          "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz",
-          "integrity": "sha1-qEeQIusaw2iocTibY1JixQXuNo8=",
-          "dev": true,
-          "requires": {
-            "ansi-regex": "^3.0.0"
-          }
-        }
+        "is-bigint": "^1.0.1",
+        "is-boolean-object": "^1.1.0",
+        "is-number-object": "^1.0.4",
+        "is-string": "^1.0.5",
+        "is-symbol": "^1.0.3"
+      }
+    },
+    "wide-align": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.5.tgz",
+      "integrity": "sha512-eDMORYaPNZ4sQIuuYPDHdQvf4gyCF9rEEV/yPxGfwPkRodwEgiMUUXTx/dex+Me0wxx53S+NgUHaP7y3MGlDmg==",
+      "dev": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2 || 3 || 4"
       }
     },
     "wildcard": {
@@ -23971,6 +27643,12 @@
       "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==",
       "dev": true
     },
+    "yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "dev": true
+    },
     "yargs": {
       "version": "16.2.0",
       "resolved": "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz",
diff --git a/package.json b/package.json
index 83df814..2185c1a 100644
--- a/package.json
+++ b/package.json
@@ -6,12 +6,12 @@
     "build": "rimraf dist/* && webpack --mode=production",
     "dev": "webpack serve --mode=development",
     "index": "bin/index > json/disks/index.js",
-    "lint": "eslint '**/*.js' '**/*.ts'",
+    "lint": "eslint '**/*.js' '**/*.ts' '**/*.tsx' && stylelint '**/*.css'",
     "start": "webpack serve --mode=development --progress",
     "test": "jest"
   },
   "engines": {
-    "node": ">= 6"
+    "node": ">= 14"
   },
   "repository": {
     "type": "git",
@@ -25,35 +25,51 @@
   "homepage": "https://github.com/whscullin/apple2js#readme",
   "devDependencies": {
     "@babel/core": "^7.9.0",
+    "@babel/plugin-transform-react-jsx": "^7.17.3",
     "@babel/preset-env": "^7.9.0",
+    "@babel/preset-typescript": "^7.16.7",
     "@testing-library/dom": "^7.30.3",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/preact": "^3.0.1",
     "@testing-library/user-event": "^13.1.3",
     "@types/jest": "^27.0.2",
     "@types/jest-image-snapshot": "^4.3.1",
     "@types/micromodal": "^0.3.2",
-    "@typescript-eslint/eslint-plugin": "^4.28.2",
-    "@typescript-eslint/parser": "^4.28.2",
+    "@types/wicg-file-system-access": "^2020.9.5",
+    "@typescript-eslint/eslint-plugin": "^5.27.0",
+    "@typescript-eslint/parser": "^5.27.0",
     "ajv": "^6.12.0",
     "babel-jest": "^27.2.4",
-    "canvas": "^2.7.0",
-    "eslint": "^7.22.0",
+    "canvas": "^2.8.0",
+    "css-loader": "^6.7.1",
+    "eslint": "^8.17.0",
+    "eslint-plugin-jest": "^26.4.3",
+    "eslint-plugin-react": "^7.30.0",
+    "eslint-plugin-react-hooks": "^4.5.0",
     "file-loader": "^6.0.0",
+    "identity-obj-proxy": "^3.0.0",
     "jest": "^27.2.4",
     "jest-image-snapshot": "^4.5.1",
-    "node-forge": "^0.10.0",
+    "node-forge": "^1.3.0",
     "raw-loader": "^4.0.0",
     "rimraf": "^3.0.2",
+    "style-loader": "^3.3.1",
+    "stylelint": "^14.9.1",
+    "stylelint-config-css-modules": "^4.1.0",
+    "stylelint-config-standard": "^26.0.0",
     "ts-jest": "^27.0.5",
-    "ts-loader": "^8.0.15",
-    "typescript": "^4.1.3",
+    "ts-loader": "^9.3.0",
+    "typescript": "^4.7.3",
     "webpack": "^5.28.0",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "^4.0.0-beta.3",
+    "webpack-cli": "^4.9.1",
+    "webpack-dev-server": "^4.6.0",
     "webpack-merge": "^5.8.0",
     "y18n": "^4.0.1"
   },
   "dependencies": {
-    "apple2shader": "0.0.3",
-    "micromodal": "^0.4.2"
+    "apple2shader": "0.0.4",
+    "classnames": "^2.3.1",
+    "micromodal": "^0.4.2",
+    "preact": "^10.7.1"
   }
 }
diff --git a/test/components/ErrorModal.spec.tsx b/test/components/ErrorModal.spec.tsx
new file mode 100644
index 0000000..d11a7ff
--- /dev/null
+++ b/test/components/ErrorModal.spec.tsx
@@ -0,0 +1,64 @@
+/** @jest-environment jsdom */
+import { h } from 'preact';
+import { fireEvent, render, screen } from '@testing-library/preact';
+import {
+    ErrorModal,
+} from 'js/components/ErrorModal';
+
+describe('ErrorModal', () => {
+    it('renders when there is an error', () => {
+        const setError = jest.fn();
+        render(
+            <ErrorModal error={new Error('My Error')} setError={setError} />
+        );
+        expect(screen.queryByRole('banner')).toBeVisible();
+        expect(screen.queryByRole('banner')).toHaveTextContent('Error');
+        expect(screen.queryByText('My Error')).toBeVisible();
+    });
+
+    it('renders when there is an error string', () => {
+        const setError = jest.fn();
+        render(
+            <ErrorModal error={'My Error'} setError={setError} />
+        );
+        expect(screen.queryByRole('banner')).toBeVisible();
+        expect(screen.queryByRole('banner')).toHaveTextContent('Error');
+        expect(screen.queryByText('My Error')).toBeVisible();
+    });
+
+    it('does not render when there is not an error', () => {
+        const setError = jest.fn();
+        const { container } = render(
+            <ErrorModal error={undefined} setError={setError} />
+        );
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it('handles an invalid error', () => {
+        jest.spyOn(console, 'error').mockImplementation();
+        const setError = jest.fn();
+        render(
+            <ErrorModal error={{foo: 'My Error'}} setError={setError} />
+        );
+        expect(screen.queryByText('Unknown Error')).toBeVisible();
+        expect(console.error).toHaveBeenCalledWith({foo: 'My Error'});
+    });
+
+    it('calls setError when close is clicked', () => {
+        const setError = jest.fn();
+        render(
+            <ErrorModal error="My Error" setError={setError} />
+        );
+        fireEvent.click(screen.getByTitle('Close'));
+        expect(setError).toHaveBeenCalledWith(undefined);
+    });
+
+    it('calls setError when OK is clicked', () => {
+        const setError = jest.fn();
+        render(
+            <ErrorModal error="My Error" setError={setError} />
+        );
+        fireEvent.click(screen.getByText('OK'));
+        expect(setError).toHaveBeenCalledWith(undefined);
+    });
+});
diff --git a/test/components/FileChooser.spec.tsx b/test/components/FileChooser.spec.tsx
new file mode 100644
index 0000000..99d7c76
--- /dev/null
+++ b/test/components/FileChooser.spec.tsx
@@ -0,0 +1,131 @@
+/**
+ * @jest-environment ./test/env/jsdom-with-backdoors
+ */
+
+import { h } from 'preact';
+import { fireEvent, render, screen, waitFor } from '@testing-library/preact';
+
+import 'test/env/jsdom-with-backdoors';
+import { FileChooser, FileChooserProps } from '../../js/components/FileChooser';
+
+type ShowOpenFilePicker = typeof window.showOpenFilePicker;
+
+const FAKE_FILE_HANDLE = {
+    kind: 'file',
+    name: 'file name',
+    createWritable: jest.fn(),
+    getFile: jest.fn(),
+    isSameEntry: jest.fn(),
+    queryPermission: jest.fn(),
+    requestPermission: jest.fn(),
+    isFile: true,
+    isDirectory: false,
+} as const;
+
+const NOP = () => { /* do nothing */ };
+
+// eslint-disable-next-line no-undef
+const EMPTY_FILE_LIST = backdoors.newFileList();
+
+const FAKE_FILE = new File([], 'fake');
+
+describe('FileChooser', () => {
+    describe('input-based chooser', () => {
+        it('should be instantiable', () => {
+            const { container } = render(<FileChooser control='input' onChange={NOP} />);
+
+            expect(container).not.toBeNull();
+        });
+
+        it('should use the file input element', async () => {
+            render(<FileChooser control='input' onChange={NOP} />);
+
+            const inputElement = await screen.findByRole('button') as HTMLInputElement;
+            expect(inputElement.type).toBe('file');
+        });
+
+        it('should fire a callback with empty list when no files are selected', async () => {
+            const onChange = jest.fn();
+            render(<FileChooser control='input' onChange={onChange} />);
+            const inputElement = await screen.findByRole('button') as HTMLInputElement;
+            inputElement.files = EMPTY_FILE_LIST;
+            fireEvent.change(inputElement);
+            await waitFor(() => {
+                expect(onChange).toBeCalledWith([]);
+            });
+        });
+
+        it('should fire a callback with a file handle when a file is selected', async () => {
+            const onChange = jest.fn<ReturnType<FileChooserProps['onChange']>, Parameters<FileChooserProps['onChange']>>();
+            render(<FileChooser control='input' onChange={onChange} />);
+            const inputElement = await screen.findByRole('button') as HTMLInputElement;
+            // eslint-disable-next-line no-undef
+            inputElement.files = backdoors.newFileList(FAKE_FILE);
+            fireEvent.change(inputElement);
+            await waitFor(async () => {
+                expect(onChange).toHaveBeenCalled();
+                const handleList = onChange.mock.calls[0][0];
+                expect(handleList).toHaveLength(1);
+                const handle = handleList[0];
+                expect(handle.kind).toBe('file');
+                expect(handle.name).toBe(FAKE_FILE.name);
+                await expect(handle.getFile()).resolves.toBe(FAKE_FILE);
+                await expect(handle.createWritable()).rejects.toEqual('File not writable.');
+                await expect(handle.queryPermission({ mode: 'readwrite' })).resolves.toBe('denied');
+            });
+        });
+    });
+
+    describe('picker-base chooser', () => {
+        const mockFilePicker = jest.fn<ReturnType<ShowOpenFilePicker>, Parameters<ShowOpenFilePicker>>();
+
+        beforeEach(() => {
+            if (typeof window.showOpenFilePicker !== 'undefined') {
+                throw new Error('window.showOpenFilePicker not undefined');
+            }
+            window.showOpenFilePicker = mockFilePicker as unknown as ShowOpenFilePicker;
+            mockFilePicker.mockReset();
+        });
+
+        afterEach(() => {
+            window.showOpenFilePicker = undefined as unknown as typeof window.showOpenFilePicker;
+        });
+
+        it('should be instantiable', () => {
+            const { container } = render(<FileChooser control='picker' onChange={NOP} />);
+
+            expect(container).not.toBeNull();
+        });
+
+        it('should fire a callback with empty list when no files are selected', async () => {
+            mockFilePicker.mockResolvedValueOnce([]);
+            const onChange = jest.fn();
+            render(<FileChooser control='picker' onChange={onChange} />);
+
+            fireEvent.click(await screen.findByText('Choose File'));
+
+            await waitFor(() => {
+                expect(mockFilePicker).toBeCalled();
+                expect(onChange).toBeCalledWith([]);
+            });
+        });
+
+        it('should fire a callback with a file handle when a file is selected', async () => {
+            mockFilePicker.mockResolvedValueOnce([FAKE_FILE_HANDLE]);
+            const onChange = jest.fn<ReturnType<FileChooserProps['onChange']>, Parameters<FileChooserProps['onChange']>>();
+            render(<FileChooser control='picker' onChange={onChange} />);
+
+            fireEvent.click(await screen.findByText('Choose File'));
+
+            await waitFor(() => {
+                expect(mockFilePicker).toBeCalled();
+                expect(onChange).toHaveBeenCalled();
+                const handleList = onChange.mock.calls[0][0];
+                expect(handleList).toHaveLength(1);
+                const handle = handleList[0];
+                expect(handle.kind).toBe(FAKE_FILE_HANDLE.kind);
+                expect(handle.name).toBe(FAKE_FILE_HANDLE.name);
+            });
+        });
+    });
+});
diff --git a/test/components/Modal.spec.tsx b/test/components/Modal.spec.tsx
new file mode 100644
index 0000000..a1ed9a5
--- /dev/null
+++ b/test/components/Modal.spec.tsx
@@ -0,0 +1,97 @@
+/** @jest-environment jsdom */
+import { h } from 'preact';
+import { fireEvent, render, screen } from '@testing-library/preact';
+import {
+    Modal,
+    ModalContent,
+    ModalFooter,
+} from 'js/components/Modal';
+
+describe('Modal', () => {
+    it('renders a title and content when open', () => {
+        render(
+            <Modal
+                title="My Title"
+                isOpen={true}
+            >
+                <ModalContent>
+                    My Content
+                </ModalContent>
+            </Modal>
+        );
+        expect(screen.queryByRole('banner')).toBeVisible();
+        expect(screen.queryByRole('banner')).toHaveTextContent('My Title');
+        expect(screen.queryByText('My Content')).toBeVisible();
+
+        expect(screen.queryByRole('img')).not.toBeInTheDocument();
+        expect(screen.queryByTitle('Close')).not.toBeInTheDocument();
+    });
+
+    it('does not render a title and content when not open', () => {
+        render(
+            <Modal
+                title="My Title"
+                isOpen={false}
+            >
+                <ModalContent>
+                    My Content
+                </ModalContent>
+            </Modal>
+        );
+        expect(screen.queryByRole('banner')).not.toBeInTheDocument();
+        expect(screen.queryByText('My Content')).not.toBeInTheDocument();
+    });
+
+    it('renders a footer', () => {
+        render(
+            <Modal
+                title="My Title"
+                isOpen={true}
+            >
+                <ModalContent>
+                    My Content
+                </ModalContent>
+                <ModalFooter>
+                    My Footer
+                </ModalFooter>
+            </Modal>
+        );
+        expect(screen.queryByRole('banner')).toHaveTextContent('My Title');
+        expect(screen.queryByText('My Content')).toBeVisible();
+        expect(screen.getByRole('contentinfo')).toHaveTextContent('My Footer');
+    });
+
+    it('can have a close button', () => {
+        const onClose = jest.fn();
+        render(
+            <Modal
+                title="My Title"
+                isOpen={true}
+                onClose={onClose}
+            >
+                <ModalContent>
+                    My Content
+                </ModalContent>
+            </Modal>
+        );
+        const button = screen.getByTitle('Close');
+        expect(button).toBeVisible();
+        fireEvent.click(button);
+        expect(onClose).toHaveBeenCalledWith(true);
+    });
+
+    it('can have an icon', () => {
+        render(
+            <Modal
+                title="My Title"
+                isOpen={true}
+                icon="warning"
+            >
+                <ModalContent>
+                    My Content
+                </ModalContent>
+            </Modal>
+        );
+        expect(screen.getByRole('img')).toBeVisible();
+    });
+});
diff --git a/test/components/util/promises.spec.ts b/test/components/util/promises.spec.ts
new file mode 100644
index 0000000..df614ed
--- /dev/null
+++ b/test/components/util/promises.spec.ts
@@ -0,0 +1,106 @@
+/** @jest-environment jsdom */
+
+import { Ready, spawn } from 'js/components/util/promises';
+
+describe('promises', () => {
+    describe('spawn', () => {
+        it('returns an AbortController', () => {
+            const controller = spawn(() => Promise.resolve(1));
+            expect(controller).not.toBeNull();
+            expect(controller).toBeInstanceOf(AbortController);
+        });
+
+        it('passes an AbortSignal to the target function', () => {
+            let signalCapture: AbortSignal | null = null;
+            spawn((signal) => {
+                signalCapture = signal;
+                return Promise.resolve(1);
+            });
+            expect(signalCapture).not.toBeNull();
+            expect(signalCapture).toBeInstanceOf(AbortSignal);
+        });
+
+        it('has the controller hooked up to the signal', async () => {
+            let isAborted = false;
+
+            const controllerIsAborted = new Ready();
+            const spawnHasRecorded = new Ready();
+
+            const controller = spawn(async (signal) => {
+                await controllerIsAborted.ready;
+                isAborted = signal.aborted;
+                spawnHasRecorded.onReady();
+            });
+
+            controller.abort();
+            controllerIsAborted.onReady();
+
+            await spawnHasRecorded.ready;
+            expect(isAborted).toBe(true);
+        });
+
+        it('allows long-running tasks to be stopped', async () => {
+            let isFinished = false;
+
+            const innerReady = new Ready();
+            const innerFinished = new Ready();
+
+            const controller = spawn(async (signal) => {
+                innerReady.onReady();
+                let i = 0;
+                while (!signal.aborted) {
+                    i++;
+                    await tick();
+                }
+                expect(i).toBe(2);
+                isFinished = true;
+                innerFinished.onReady();
+            });
+            await innerReady.ready;
+            await tick();
+            controller.abort();
+            await innerFinished.ready;
+
+            expect(isFinished).toBe(true);
+        });
+
+        it('allows nesting via listeners', async () => {
+            let isInnerAborted = false;
+
+            const innerReady = new Ready();
+            const outerReady = new Ready();
+            const abortRecorded = new Ready();
+
+            const controller = spawn(async (signal) => {
+                const innerController = spawn(async (innerSignal) => {
+                    await innerReady.ready;
+                    isInnerAborted = innerSignal.aborted;
+                    abortRecorded.onReady();
+                });
+                // TODO(flan): Chain signal.reason when calling innerController.abort()
+                // once jsdom 19 has wider adoption (currently on 16.6.0). Likewise there
+                // are some subtle problems with signal.addEventListener that should be
+                // addressed by https://github.com/jsdom/jsdom/pull/3347.
+                // signal.addEventListener('abort', () => innerController.abort(signal.reason));
+                signal.addEventListener('abort', () => innerController.abort());
+                await outerReady.ready;
+            });
+
+            // Abort the outer controller, but don't let the outer block run.
+            controller.abort();
+            // Let the inner block run.
+            innerReady.onReady();
+            await abortRecorded.ready;
+
+            // Inner block is aborted.
+            expect(isInnerAborted).toBe(true);
+
+            // Let outer block finish.
+            outerReady.onReady();
+        });
+    });
+});
+
+function tick() {
+    return new Promise(resolve => setTimeout(resolve, 0));
+}
diff --git a/test/cpu-tom-harte.spec.ts b/test/cpu-tom-harte.spec.ts
index 2bbb4ca..22f9989 100644
--- a/test/cpu-tom-harte.spec.ts
+++ b/test/cpu-tom-harte.spec.ts
@@ -7,7 +7,7 @@
 
 import fs from 'fs';
 
-import CPU6502 from 'js/cpu6502';
+import CPU6502, { FLAVOR_ROCKWELL_65C02, FLAVOR_WDC_65C02 } from 'js/cpu6502';
 import { toHex } from 'js/util';
 import type { byte, word } from 'js/types';
 
@@ -25,45 +25,45 @@ const detail = !!process.env.JEST_DETAIL;
 /**
  * Memory address and value
  */
-type MemoryValue = [address: word, value: byte]
+type MemoryValue = [address: word, value: byte];
 
 /**
  * Represents initial and final CPU and memory states
  */
  interface TestState {
     /** Program counter */
-    pc: word
+    pc: word;
     /** Stack register */
-    s: byte
+    s: byte;
     /** Accumulator */
-    a: byte
+    a: byte;
     /** X index */
-    x: byte
+    x: byte;
     /** Y index */
-    y: byte
+    y: byte;
     /** Processor status register */
-    p: byte
+    p: byte;
     /** M */
-    ram: MemoryValue[]
+    ram: MemoryValue[];
 }
 
 /**
  * CPU cycle memory operation
  */
-type Cycle = [address: word, value: byte, type: 'read'|'write']
+type Cycle = [address: word, value: byte, type: 'read'|'write'];
 
 /**
  * One test record
  */
 interface Test {
     /** Test name */
-    name: string
+    name: string;
     /** Initial CPU register and memory state */
-    initial: TestState
+    initial: TestState;
     /**  Final CPU register and memory state */
-    final: TestState
+    final: TestState;
     /** Detailed CPU cycles */
-    cycles: Cycle[]
+    cycles: Cycle[];
 }
 
 /**
@@ -145,9 +145,9 @@ function expectState(cpu: CPU6502, memory: TestMemory, test: Test) {
 }
 
 interface OpTest {
-    op: string
-    name: string
-    mode: string
+    op: string;
+    name: string;
+    mode: string;
 }
 
 const testPath = process.env.TOM_HARTE_TEST_PATH;
@@ -158,28 +158,56 @@ const maxTests = 16;
 
 if (testPath) {
     const testPath6502 = `${testPath}/6502/v1/`;
-    const testPath65C02 = `${testPath}/wdc65c02/v1/`;
+    const testPathWDC65C02 = `${testPath}/wdc65c02/v1/`;
+    const testPathRW65C02 = `${testPath}/rockwell65c02/v1/`;
 
     const opAry6502: OpTest[] = [];
-    const opAry65C02: OpTest[] = [];
+    const opAryRW65C02: OpTest[] = [];
+    const opAryWDC65C02: OpTest[] = [];
 
     const buildOpArrays = () => {
         const cpu = new CPU6502();
 
-        // Grab the implemented op codes
-        // TODO: Decide which undocumented opcodes are worthwhile.
         for (const op in cpu.OPS_6502) {
             const { name, mode } = cpu.OPS_6502[op];
             const test = { op: toHex(+op), name, mode };
             opAry6502.push(test);
-            opAry65C02.push(test);
+            opAryRW65C02.push(test);
+            opAryWDC65C02.push(test);
+        }
+
+        for (const op in cpu.OPS_NMOS_6502) {
+            const { name, mode } = cpu.OPS_NMOS_6502[op];
+            const test = { op: toHex(+op), name, mode };
+            opAry6502.push(test);
         }
 
         for (const op in cpu.OPS_65C02) {
             const { name, mode } = cpu.OPS_65C02[op];
             const test = { op: toHex(+op), name, mode };
-            opAry65C02.push(test);
+            opAryRW65C02.push(test);
+            opAryWDC65C02.push(test);
         }
+
+        // WDC 65C02 NOPs
+        [
+            '03', '0b', '13', '1b', '23', '2b', '33', '3b',
+            '43', '4b', '53', '5b', '63', '6b', '73', '7b',
+            '83', '8b', '93', '9b', 'a3', 'ab', 'b3', 'bb',
+            'c3',       'd3',       'e3', 'eb', 'f3', 'fb'
+        ].forEach((op) =>
+            opAryWDC65C02.push({ op, name: 'nop', mode: 'implied'})
+        );
+
+        // Rockwell 65C02 NOPs
+        [
+            '03', '0b', '13', '1b', '23', '2b', '33', '3b',
+            '43', '4b', '53', '5b', '63', '6b', '73', '7b',
+            '83', '8b', '93', '9b', 'a3', 'ab', 'b3', 'bb',
+            'c3', 'cb', 'd3', 'db', 'e3', 'eb', 'f3', 'fb'
+        ].forEach((op) =>
+            opAryRW65C02.push({ op, name: 'nop', mode: 'implied'})
+        );
     };
 
     buildOpArrays();
@@ -188,7 +216,7 @@ if (testPath) {
         let cpu: CPU6502;
         let memory: TestMemory;
 
-        describe('6502', function() {
+        describe('NMOS 6502', function() {
             beforeAll(function() {
                 cpu = new CPU6502();
                 memory = new TestMemory(256);
@@ -209,15 +237,36 @@ if (testPath) {
             });
         });
 
-        describe('WDC 65C02', function() {
+        describe('Rockwell 65C02', function() {
             beforeAll(function() {
-                cpu = new CPU6502({ '65C02': true });
+                cpu = new CPU6502({ flavor: FLAVOR_ROCKWELL_65C02 });
                 memory = new TestMemory(256);
                 cpu.addPageHandler(memory);
             });
 
-            describe.each(opAry65C02)('Test op $op $name $mode', ({op}) => {
-                const data = fs.readFileSync(`${testPath65C02}${op}.json`, 'utf-8');
+            describe.each(opAryRW65C02)('Test op $op $name $mode', ({op}) => {
+                const data = fs.readFileSync(`${testPathRW65C02}${op}.json`, 'utf-8');
+                const tests = JSON.parse(data) as Test[];
+
+                it.each(tests.slice(0, maxTests))('Test $name', (test) => {
+                    initState(cpu, test.initial);
+                    memory.logStart();
+                    cpu.step();
+                    memory.logStop();
+                    expectState(cpu, memory, test);
+                });
+            });
+        });
+
+        describe('WDC 65C02', function() {
+            beforeAll(function() {
+                cpu = new CPU6502({ flavor: FLAVOR_WDC_65C02 });
+                memory = new TestMemory(256);
+                cpu.addPageHandler(memory);
+            });
+
+            describe.each(opAryWDC65C02)('Test op $op $name $mode', ({op}) => {
+                const data = fs.readFileSync(`${testPathWDC65C02}${op}.json`, 'utf-8');
                 const tests = JSON.parse(data) as Test[];
 
                 it.each(tests.slice(0, maxTests))('Test $name', (test) => {
diff --git a/test/cpu.spec.ts b/test/cpu.spec.ts
index c04df8b..1001830 100644
--- a/test/cpu.spec.ts
+++ b/test/cpu.spec.ts
@@ -1,4 +1,4 @@
-import CPU6502 from '../js/cpu6502';
+import CPU6502, { FLAVOR_ROCKWELL_65C02 } from '../js/cpu6502';
 // From https://github.com/Klaus2m5/6502_65C02_functional_tests
 import Test6502 from './roms/6502test';
 import Test65C02 from './roms/65C02test';
@@ -12,7 +12,7 @@ describe('CPU', function () {
 
     function traceCB() {
         const pc = cpu.getPC();
-        done = lastPC == pc;
+        done = lastPC === pc;
         lastPC = pc;
     }
 
@@ -33,7 +33,7 @@ describe('CPU', function () {
 
     describe('65C02', function () {
         it('completes the test ROM', function () {
-            cpu = new CPU6502({'65C02': true});
+            cpu = new CPU6502({ flavor: FLAVOR_ROCKWELL_65C02 });
             const test = new Test65C02();
             cpu.addPageHandler(test);
             cpu.setPC(0x400);
diff --git a/test/cpu6502.spec.ts b/test/cpu6502.spec.ts
index a98ce02..d274265 100644
--- a/test/cpu6502.spec.ts
+++ b/test/cpu6502.spec.ts
@@ -1,4 +1,8 @@
-import CPU6502, { CpuState, flags } from '../js/cpu6502';
+import CPU6502, {
+    CpuState,
+    FLAVOR_ROCKWELL_65C02,
+    flags
+} from '../js/cpu6502';
 import { TestMemory } from './util/memory';
 import { bios, Program } from './util/bios';
 import { toReadableState } from './util/cpu';
@@ -277,14 +281,6 @@ describe('CPU6502', function() {
                 pc: 0x1234
             });
         });
-
-        it('should log unimplemented opcodes', () => {
-            jest.spyOn(console, 'log').mockImplementation();
-            testCode([0xFF], 1, {}, {
-                cycles: 1
-            });
-            expect(console.log).toHaveBeenLastCalledWith('Unknown OpCode: FF at 0400');
-        });
     });
 
     describe('#registers', function() {
@@ -1542,7 +1538,7 @@ describe('CPU6502', function() {
 
 describe('65c02', function() {
     beforeEach(function() {
-        cpu = new CPU6502({'65C02': true});
+        cpu = new CPU6502({ flavor: FLAVOR_ROCKWELL_65C02 });
         memory = new TestMemory(4);
 
         cpu.addPageHandler(memory);
diff --git a/test/env/jsdom-with-backdoors.d.ts b/test/env/jsdom-with-backdoors.d.ts
new file mode 100644
index 0000000..b6bfab4
--- /dev/null
+++ b/test/env/jsdom-with-backdoors.d.ts
@@ -0,0 +1,10 @@
+/**
+ * Provide types for the jsdom-with-backdoors testing environment.
+ */
+export { };
+
+declare global {
+    const backdoors: {
+        newFileList(...files: File[]): FileList;
+    };
+}
diff --git a/test/env/jsdom-with-backdoors.js b/test/env/jsdom-with-backdoors.js
new file mode 100644
index 0000000..f50d323
--- /dev/null
+++ b/test/env/jsdom-with-backdoors.js
@@ -0,0 +1,34 @@
+/**
+ * This is a total and terrible hack that allows us to create otherwise
+ * uninstantiable jsdom objects. Currently this exposes a way to create
+ * `FileList` objects.
+ * 
+ * This was inspired by felipochoa's implementation in GitHub issue:
+ * https://github.com/jsdom/jsdom/issues/1272. This implementation is
+ * "better" because it does all of the dirty work during environment
+ * setup. It still requires typing.
+ */
+
+const JsdomEnvironment = require('jest-environment-jsdom');
+
+export default class JsdomEnvironmentWithBackDoors extends JsdomEnvironment {
+    async setup() {
+        await super.setup();
+        const jsdomUtils = require('jsdom/lib/jsdom/living/generated/utils');
+        const jsdomFileList = require('jsdom/lib/jsdom/living/generated/FileList');
+
+        this.global.backdoors = {
+            newFileList: (...files) => {
+                const impl = jsdomFileList.createImpl(this.global);
+                const fileList = Object.assign([...files], {
+                    item: i => fileList[i],
+                    [jsdomUtils.implSymbol]: impl,
+                });
+                impl[jsdomUtils.wrapperSymbol] = fileList;
+                const fileListCtor = this.global[jsdomUtils.ctorRegistrySymbol].FileList;
+                Object.setPrototypeOf(fileList, fileListCtor.prototype);
+                return fileList;
+            },
+        };
+    }
+}
diff --git a/test/jest-setup.js b/test/jest-setup.ts
similarity index 73%
rename from test/jest-setup.js
rename to test/jest-setup.ts
index 579dbe1..5f03d11 100644
--- a/test/jest-setup.js
+++ b/test/jest-setup.ts
@@ -1,3 +1,4 @@
 import { toMatchImageSnapshot } from 'jest-image-snapshot';
+import '@testing-library/jest-dom';
 
 expect.extend({ toMatchImageSnapshot });
diff --git a/test/js/__mocks__/apple2shader.js b/test/js/__mocks__/apple2shader.js
index 5cbe040..77cfb9a 100644
--- a/test/js/__mocks__/apple2shader.js
+++ b/test/js/__mocks__/apple2shader.js
@@ -11,7 +11,7 @@ export const screenEmu = (function () {
         DisplayConfiguration: class {},
         Point: class {},
         ScreenView: class {
-            initOpenGL() {}
+            initOpenGL() { return Promise.resolve(); }
         },
         Size: class{},
     };
diff --git a/test/js/applesoft/compiler.spec.ts b/test/js/applesoft/compiler.spec.ts
new file mode 100644
index 0000000..cae444c
--- /dev/null
+++ b/test/js/applesoft/compiler.spec.ts
@@ -0,0 +1,431 @@
+import ApplesoftCompiler from 'js/applesoft/compiler';
+import RAM from 'js/ram';
+import { Memory } from 'js/types';
+
+// Zero page locations used by Applesoft. The names come from
+// the commented decompilation produced by the Merlin Pro
+// assembler, revision 4/27/84. There is evidence from
+// https://www.pagetable.com/?p=774 that the original Microsoft
+// BASIC source code used these names as well.
+const TXTTAB = 0x67; // start of program, word
+const VARTAB = 0x69; // start of variables, word
+const ARYTAB = 0x6B; // start of arrays, word
+const STREND = 0x6D; // end of strings, word
+const PRGEND = 0xAF; // end of program, word
+
+function compileToMemory(ram: Memory, program: string) {
+    ApplesoftCompiler.compileToMemory(ram, program);
+}
+
+// Manual decompilation based on "Applesoft Internal Structure"
+// by C.K. Mesztenyi/Washington Apple Pi, from Call—A.P.P.L.E.,
+// January, 1982. Archived at:
+// https://archive.org/details/DTCA2DOC-045_applesoft_internal
+// Decompilation verified on the emulator by typing in the
+// program, then:
+//    ]CALL -151
+//    *800.820
+// and comparing the resulting bytes (starting at 801).
+
+describe('ApplesoftCompiler', () => {
+    it('compiles a one-line hello world', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 PRINT "HELLO, WORLD!"');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x16, 0x08, 0x0a, 0x00, 0xba, 0x22, 0x48, 0x45,
+            0x4c, 0x4c, 0x4f, 0x2c, 0x20, 0x57, 0x4f, 0x52,
+            0x4c, 0x44, 0x21, 0x22, 0x00, 0x00, 0x00
+        ]));
+    });
+
+    it('compiles a one-line hello world into memory', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 PRINT "HELLO, WORLD!"');
+        expect(ram.read(0x08, 0x01)).toBe(0x16); // pointer to next line low
+        expect(ram.read(0x08, 0x02)).toBe(0x08); // pointer to next line high
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0xba); // PRINT
+        expect(ram.read(0x08, 0x06)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x07)).toBe(0x48); // H
+        expect(ram.read(0x08, 0x08)).toBe(0x45); // E
+        expect(ram.read(0x08, 0x09)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x0a)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x0b)).toBe(0x4F); // O
+        expect(ram.read(0x08, 0x0c)).toBe(0x2C); // ,
+        expect(ram.read(0x08, 0x0d)).toBe(0x20); // space
+        expect(ram.read(0x08, 0x0e)).toBe(0x57); // W
+        expect(ram.read(0x08, 0x0f)).toBe(0x4F); // O
+        expect(ram.read(0x08, 0x10)).toBe(0x52); // R
+        expect(ram.read(0x08, 0x11)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x12)).toBe(0x44); // D
+        expect(ram.read(0x08, 0x13)).toBe(0x21); // !
+        expect(ram.read(0x08, 0x14)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x15)).toBe(0x00); // end of line
+        expect(ram.read(0x08, 0x16)).toBe(0x00); // end of program low
+        expect(ram.read(0x08, 0x17)).toBe(0x00); // end of program high
+
+        expect(ram.read(0x00, TXTTAB)).toBe(0x01);   // start of program low
+        expect(ram.read(0x00, TXTTAB + 1)).toBe(0x08); // start of program high
+        expect(ram.read(0x00, VARTAB)).toBe(0x19);   // start of variables low
+        expect(ram.read(0x00, VARTAB + 1)).toBe(0x08); // start of variables high
+        expect(ram.read(0x00, ARYTAB)).toBe(0x19);   // start of arrays low
+        expect(ram.read(0x00, ARYTAB + 1)).toBe(0x08); // start of arrays high
+        expect(ram.read(0x00, STREND)).toBe(0x19);   // end of strings low
+        expect(ram.read(0x00, STREND + 1)).toBe(0x08); // end of strings high
+        expect(ram.read(0x00, PRGEND)).toBe(0x19);   // end of program low
+        expect(ram.read(0x00, PRGEND + 1)).toBe(0x08); // end of program high
+    });
+
+    it('uppercases normal-mode text, like variables', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 fori=xtoz');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x81); // FOR
+        expect(ram.read(0x08, 0x06)).toBe(0x49); // I
+        expect(ram.read(0x08, 0x07)).toBe(0xd0); // = (token)
+        expect(ram.read(0x08, 0x08)).toBe(0x58); // X
+        expect(ram.read(0x08, 0x09)).toBe(0xc1); // TO
+        expect(ram.read(0x08, 0x0a)).toBe(0x5a); // Z
+        expect(ram.read(0x08, 0x0b)).toBe(0x00); // end of line
+    });
+
+    it('allows lower-case characters in strings', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 PRINT "Hello!"');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0xba); // PRINT
+        expect(ram.read(0x08, 0x06)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x07)).toBe(0x48); // H
+        expect(ram.read(0x08, 0x08)).toBe(0x65); // e
+        expect(ram.read(0x08, 0x09)).toBe(0x6C); // l
+        expect(ram.read(0x08, 0x0a)).toBe(0x6C); // l
+        expect(ram.read(0x08, 0x0b)).toBe(0x6F); // o
+    });
+
+    it('allows lower-case characters in comments', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 REM Hello!');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0xb2); // REM
+        expect(ram.read(0x08, 0x06)).toBe(0x20); // space
+        expect(ram.read(0x08, 0x07)).toBe(0x48); // H
+        expect(ram.read(0x08, 0x08)).toBe(0x65); // e
+        expect(ram.read(0x08, 0x09)).toBe(0x6C); // l
+        expect(ram.read(0x08, 0x0a)).toBe(0x6C); // l
+        expect(ram.read(0x08, 0x0b)).toBe(0x6F); // o
+    });
+
+    it('allows lower-case tokens', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 print "Hello!"');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0xba); // PRINT
+    });
+
+    it('accepts out-of-order lines', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '20 GOTO 10\n10 PRINT "HELLO');
+        expect(ram.read(0x08, 0x01)).toBe(0x0d); // pointer to next line low
+        expect(ram.read(0x08, 0x02)).toBe(0x08); // pointer to next line high
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0xba); // PRINT
+        expect(ram.read(0x08, 0x06)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x07)).toBe(0x48); // H
+        expect(ram.read(0x08, 0x08)).toBe(0x45); // E
+        expect(ram.read(0x08, 0x09)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x0a)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x0b)).toBe(0x4F); // O
+        expect(ram.read(0x08, 0x0c)).toBe(0x00); // end of line
+        expect(ram.read(0x08, 0x0d)).toBe(0x15); // pointer to next line low
+        expect(ram.read(0x08, 0x0e)).toBe(0x08); // pointer to next line high
+        expect(ram.read(0x08, 0x0f)).toBe(0x14); // line number low
+        expect(ram.read(0x08, 0x10)).toBe(0x00); // line number high
+        expect(ram.read(0x08, 0x11)).toBe(0xab); // GOTO
+        expect(ram.read(0x08, 0x12)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x13)).toBe(0x30); // 0
+        expect(ram.read(0x08, 0x14)).toBe(0x00); // end of line
+        expect(ram.read(0x08, 0x15)).toBe(0x00); // end of program low
+        expect(ram.read(0x08, 0x16)).toBe(0x00); // end of program high
+    });
+
+    it('prefers ATN to AT', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 X = ATN(20)');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x58); // X
+        expect(ram.read(0x08, 0x06)).toBe(0xd0); // = (token)
+        expect(ram.read(0x08, 0x07)).toBe(0xe1); // ATN
+        expect(ram.read(0x08, 0x08)).toBe(0x28); // (
+        expect(ram.read(0x08, 0x09)).toBe(0x32); // 2
+        expect(ram.read(0x08, 0x0a)).toBe(0x30); // 0
+        expect(ram.read(0x08, 0x0b)).toBe(0x29); // )
+        expect(ram.read(0x08, 0x0c)).toBe(0x00); // end of line
+    });
+
+    it('prefers TO to AT', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 FORI=ATOZ');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x81); // FOR
+        expect(ram.read(0x08, 0x06)).toBe(0x49); // I
+        expect(ram.read(0x08, 0x07)).toBe(0xd0); // = (token)
+        expect(ram.read(0x08, 0x08)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x09)).toBe(0xc1); // TO
+        expect(ram.read(0x08, 0x0a)).toBe(0x5a); // Z
+        expect(ram.read(0x08, 0x0b)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements that start with space', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATA 1,2,3');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x20); // space
+        expect(ram.read(0x08, 0x07)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x08)).toBe(0x2c); // ,
+        expect(ram.read(0x08, 0x09)).toBe(0x32); // 2
+        expect(ram.read(0x08, 0x0a)).toBe(0x2c); // ,
+        expect(ram.read(0x08, 0x0b)).toBe(0x33); // 3
+        expect(ram.read(0x08, 0x0c)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements with numbers', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATA1,2,3');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x07)).toBe(0x2c); // ,
+        expect(ram.read(0x08, 0x08)).toBe(0x32); // 2
+        expect(ram.read(0x08, 0x09)).toBe(0x2c); // ,
+        expect(ram.read(0x08, 0x0a)).toBe(0x33); // 3
+        expect(ram.read(0x08, 0x0b)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements with strings including lower-case', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATA"abc"');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x07)).toBe(0x61); // a
+        expect(ram.read(0x08, 0x08)).toBe(0x62); // b
+        expect(ram.read(0x08, 0x09)).toBe(0x63); // c
+        expect(ram.read(0x08, 0x0a)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x0b)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements with literals', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAHELLO');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x48); // H
+        expect(ram.read(0x08, 0x07)).toBe(0x45); // E
+        expect(ram.read(0x08, 0x08)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x09)).toBe(0x4C); // L
+        expect(ram.read(0x08, 0x0a)).toBe(0x4F); // O
+        expect(ram.read(0x08, 0x0b)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements with literals including lower-case', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAHello');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x48); // H
+        expect(ram.read(0x08, 0x07)).toBe(0x65); // e
+        expect(ram.read(0x08, 0x08)).toBe(0x6C); // l
+        expect(ram.read(0x08, 0x09)).toBe(0x6C); // l
+        expect(ram.read(0x08, 0x0a)).toBe(0x6F); // o
+        expect(ram.read(0x08, 0x0b)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements with literals including quotes', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAAA"B');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x07)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x08)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x09)).toBe(0x42); // B
+        expect(ram.read(0x08, 0x0a)).toBe(0x00); // end of line
+    });
+
+    it('parses DATA statements with literals including spaces', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAA  B');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x07)).toBe(0x20); // space
+        expect(ram.read(0x08, 0x08)).toBe(0x20); // space
+        expect(ram.read(0x08, 0x09)).toBe(0x42); // B
+        expect(ram.read(0x08, 0x0a)).toBe(0x00); // end of line
+    });
+
+    it('terminates DATA statements at colons', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAAA:FORI=1TO1');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x07)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x08)).toBe(0x3a); // :
+        expect(ram.read(0x08, 0x09)).toBe(0x81); // FOR
+        expect(ram.read(0x08, 0x0a)).toBe(0x49); // I
+        expect(ram.read(0x08, 0x0b)).toBe(0xd0); // = (token)
+        expect(ram.read(0x08, 0x0c)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x0d)).toBe(0xc1); // TO
+        expect(ram.read(0x08, 0x0e)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x0f)).toBe(0x00); // end of line
+    });
+
+    it('does not terminate DATA statements with a literal with a quote at colon', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAA":FORI=1TO1');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x07)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x08)).toBe(0x3a); // :
+        expect(ram.read(0x08, 0x09)).toBe(0x46); // F
+        expect(ram.read(0x08, 0x0a)).toBe(0x4F); // O
+        expect(ram.read(0x08, 0x0b)).toBe(0x52); // R
+        expect(ram.read(0x08, 0x0c)).toBe(0x49); // I
+        expect(ram.read(0x08, 0x0d)).toBe(0x3D); // =
+        expect(ram.read(0x08, 0x0e)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x0f)).toBe(0x54); // T
+        expect(ram.read(0x08, 0x10)).toBe(0x4F); // O
+        expect(ram.read(0x08, 0x11)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x12)).toBe(0x00); // end of line
+    });
+
+    it('does terminate DATA statements with a literal with two quotes at colon', () => {
+        const ram = new RAM(0, 0xff); // 64K of RAM
+
+        compileToMemory(ram, '10 DATAA"":FORI=1TO1');
+        expect(ram.read(0x08, 0x03)).toBe(10);   // line number low
+        expect(ram.read(0x08, 0x04)).toBe(0);    // line number high
+        expect(ram.read(0x08, 0x05)).toBe(0x83); // DATA
+        expect(ram.read(0x08, 0x06)).toBe(0x41); // A
+        expect(ram.read(0x08, 0x07)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x08)).toBe(0x22); // "
+        expect(ram.read(0x08, 0x09)).toBe(0x3a); // :
+        expect(ram.read(0x08, 0x0a)).toBe(0x81); // FOR
+        expect(ram.read(0x08, 0x0b)).toBe(0x49); // I
+        expect(ram.read(0x08, 0x0c)).toBe(0xd0); // = (token)
+        expect(ram.read(0x08, 0x0d)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x0e)).toBe(0xc1); // TO
+        expect(ram.read(0x08, 0x0f)).toBe(0x31); // 1
+        expect(ram.read(0x08, 0x10)).toBe(0x00); // end of line
+    });
+
+    it('does not require a space after line number', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10PRINT"HELLO, WORLD!"');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x16, 0x08, 0x0a, 0x00, 0xba, 0x22, 0x48, 0x45,
+            0x4c, 0x4c, 0x4f, 0x2c, 0x20, 0x57, 0x4f, 0x52,
+            0x4c, 0x44, 0x21, 0x22, 0x00, 0x00, 0x00
+        ]));
+    });
+
+    it('parses ? as PRINT', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 ?"HELLO, WORLD!"');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x16, 0x08, 0x0a, 0x00, 0xba, 0x22, 0x48, 0x45,
+            0x4c, 0x4c, 0x4f, 0x2c, 0x20, 0x57, 0x4f, 0x52,
+            0x4c, 0x44, 0x21, 0x22, 0x00, 0x00, 0x00
+        ]));
+    });
+
+    it('skips spaces when reading tokens', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 T H E N');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x07, 0x08, 0x0a, 0x00, 0xc4, 0x00, 0x00, 0x00,
+        ]));
+    });
+
+    it('skips spaces and ignores case when reading tokens', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 T h E n');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x07, 0x08, 0x0a, 0x00, 0xc4, 0x00, 0x00, 0x00,
+        ]));
+    });
+
+    it('smashes tokens together', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 NOT RACE A THEN B');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x0c, 0x08, 0x0a, 0x00, 0x9c, 0xc5, 0x48, 0x45,
+            0x4e, 0x42, 0x00, 0x00, 0x00,
+        ]));
+    });
+
+    it('parses 10ATOZ correctly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10ATOZ');
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x09, 0x08, 0x0a, 0x00, 0x41, 0xc1, 0x5a, 0x00,
+            0x00, 0x00,
+        ]));
+    });
+
+    it('parses a bunch of crazy correctly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile([
+            '10 A THEN B',
+            '30 A TO Z',
+            '40 AT N',
+            '50 A TN',
+            '60 N O T R A C E',
+            '70 NOT RACE'].join('\n'));
+        expect(compiler.program()).toEqual(new Uint8Array([
+            0x0b, 0x08, 0x0a, 0x00, 0xc5, 0x48, 0x45,
+            0x4e, 0x42, 0x00, 0x13, 0x08, 0x1e, 0x00, 0x41,
+            0xc1, 0x5a, 0x00, 0x1a, 0x08, 0x28, 0x00, 0xc5,
+            0x4e, 0x00, 0x20, 0x08, 0x32, 0x00, 0xe1, 0x00,
+            0x26, 0x08, 0x3c, 0x00, 0x9c, 0x00, 0x2c, 0x08,
+            0x46, 0x00, 0x9c, 0x00, 0x00, 0x00,
+        ]));
+    });
+});
diff --git a/test/js/applesoft/decompiler.spec.ts b/test/js/applesoft/decompiler.spec.ts
new file mode 100644
index 0000000..534f79e
--- /dev/null
+++ b/test/js/applesoft/decompiler.spec.ts
@@ -0,0 +1,231 @@
+import ApplesoftDecompiler from 'js/applesoft/decompiler';
+import ApplesoftCompiler from 'js/applesoft/compiler';
+import RAM from 'js/ram';
+import { Memory } from 'js/types';
+
+function decompileFromMemory(ram: Memory): string {
+    const decompiler = ApplesoftDecompiler.decompilerFromMemory(ram);
+    return decompiler.list();
+}
+
+describe('ApplesoftDecompiler', () => {
+    it('decompiles one-line program from memory', () => {
+        const ram = new RAM(0x00, 0xff);  // 64K
+        ApplesoftCompiler.compileToMemory(ram, '10 PRINT "Hello, World!"');
+
+        const program = decompileFromMemory(ram);
+        expect(program).toEqual(' 10  PRINT "Hello, World!"\n');
+    });
+
+    it('decompiles REM statements correctly', () => {
+        const ram = new RAM(0x00, 0xff);  // 64K
+        ApplesoftCompiler.compileToMemory(ram, '10 REMNo space before\n20 REM with space');
+
+        const program = decompileFromMemory(ram);
+        expect(program).toEqual(' 10  REM No space before\n 20  REM  with space\n');
+    });
+
+    it('lists a one-line program', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 PRINT "Hello, World!"');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list();
+        expect(program).toEqual(' 10  PRINT "Hello, World!"\n');
+    });
+
+    it('correctly computes the base address when 0 is passed in', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 PRINT "Hello, World!"\n20 GOTO 10');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program(), 0);
+        const program = decompiler.list();
+        expect(program).toEqual(' 10  PRINT "Hello, World!"\n 20  GOTO 10\n');
+    });
+
+    it('lists a program with a long line', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 PRINT "Hello, World!"\n'
+            + '20 PRINT "Hello, again, with a much longer line this time."\n'
+            + '30 REM1234567890123456789012345678901234567890');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list();
+        expect(program).toEqual(' 10  PRINT "Hello, World!"\n'
+            + ' 20  PRINT "Hello, again, with a \n'
+            + '     much longer line this time."\n'
+            + '     \n'
+            + ' 30  REM 123456789012345678901234\n'
+            + '     5678901234567890\n');
+    });
+
+    it('lists a program with a long line Apple ][+-style', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 PRINT "Hello, World!"\n'
+            + '20 PRINT "Hello, again, with a much longer line this time."\n'
+            + '30 REM1234567890123456789012345678901234567890');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list({ apple2: 'plus' });
+        expect(program).toEqual('10  PRINT "Hello, World!"\n'
+            + '20  PRINT "Hello, again, with a m\n'
+            + '     uch longer line this time."\n'
+            + '30  REM 1234567890123456789012345\n'
+            + '     678901234567890\n');
+    });
+
+    it('lists a range of lines', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 PRINT "Hello, World!"\n'
+            + '20 PRINT "Hello, again, with a much longer line this time."\n'
+            + '30 REM1234567890123456789012345678901234567890');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list({}, 10, 20);
+        expect(program).toEqual(' 10  PRINT "Hello, World!"\n'
+            + ' 20  PRINT "Hello, again, with a \n'
+            + '     much longer line this time."\n'
+            + '     \n');
+    });
+
+    it('lists weird code correctly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 NOT RACE A THEN B');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list();
+        expect(program).toEqual(' 10  NOTRACE  AT HENB\n');
+    });
+
+    it('lists 10ATOZ correctly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10ATOZ');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list();
+        expect(program).toEqual(' 10 A TO Z\n');
+    });
+
+    it('wraps correctly in 80-column mode', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 ?:?:?:?:?:?:?:?:?:?:?:?:?:?:?:?');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.list({ columns: 80 });
+        expect(program).toEqual(' 10  PRINT : PRINT : PRINT : PRINT : '
+            + 'PRINT : PRINT : PRINT : PRINT : PRINT \n'
+            + '     : PRINT : PRINT : PRINT : PRINT : PRINT : PRINT : '
+            + 'PRINT \n');
+    });
+
+    it('decompiles compactly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 ?:?:?:?:?:?:?:?:?:?:?:?:?:?:?:?');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'compact' });
+        expect(program).toEqual('10?:?:?:?:?:?:?:?:?:?:?:?:?:?:?:?');
+    });
+
+    it('when decompiling compactly, adds a space after the line', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 12345');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'compact' });
+        expect(program).toEqual('10 12345');
+    });
+
+    it('when decompiling compactly, adds a space after AT for token', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 AT NEXT');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'compact' });
+        expect(program).toEqual('10AT NEXT');
+    });
+
+    it('when decompiling compactly, adds a space after AT for literal', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 AT n');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'compact' });
+        expect(program).toEqual('10AT N');
+    });
+
+    it('when decompiling compactly, decompiles 10ATOZ correctly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10ATOZ');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'compact' });
+        expect(program).toEqual('10ATOZ');
+    });
+
+    it('when decompiling compactly, adds a space to disambiguate tokens', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile([
+            '10 A THEN B',
+            '30 A TO Z',
+            '40 AT N',
+            '50 A TN',
+            '60 N O T R A C E',
+            '70 NOT RACE'].join('\n'));
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'compact' });
+        expect(program).toEqual([
+            '10ATHENB',
+            '30ATOZ',
+            '40AT N',
+            '50ATN',
+            '60NOTRACE',
+            '70NOTRACE'].join('\n'));
+    });
+
+    it('when decompiling prettily, formats reasonably well', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 FORI=1TO10:PRINTI:NEXT');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'pretty' });
+        expect(program).toEqual('10 FOR I = 1 TO 10 : PRINT I : NEXT');
+    });
+
+    it('when decompiling prettily, formats relations', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 IFA<BORA>=BORB<=AORB=A THEN');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'pretty' });
+        expect(program).toEqual('10 IF A < B OR A >= B OR B <= A OR B = AT HEN');
+    });
+
+    it('when decompiling prettily, decompiles 10ATOZ correctly', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10ATOZ');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'pretty' });
+        expect(program).toEqual('10 A TO Z');
+    });
+
+    it('when decompiling prettily, does not insert extra spaces in strings', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10A="::::":B=","');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'pretty' });
+        expect(program).toEqual('10 A = "::::" : B = ","');
+    });
+
+    it('when decompiling prettily, inserts space after comma', () => {
+        const compiler = new ApplesoftCompiler();
+        compiler.compile('10 HPLOTX,Y:GOTO10');
+
+        const decompiler = new ApplesoftDecompiler(compiler.program());
+        const program = decompiler.decompile({ style: 'pretty' });
+        expect(program).toEqual('10 HPLOT X, Y : GOTO 10');
+    });
+});
diff --git a/test/js/cards/data/DOS 3.3 System Master.woz b/test/js/cards/data/DOS 3.3 System Master.woz
new file mode 100644
index 0000000..2f09782
Binary files /dev/null and b/test/js/cards/data/DOS 3.3 System Master.woz differ
diff --git a/test/js/cards/disk2.spec.ts b/test/js/cards/disk2.spec.ts
new file mode 100644
index 0000000..9e31cd0
--- /dev/null
+++ b/test/js/cards/disk2.spec.ts
@@ -0,0 +1,835 @@
+/** @jest-environment jsdom */
+import fs from 'fs';
+
+import Apple2IO from 'js/apple2io';
+import DiskII, { Callbacks } from 'js/cards/disk2';
+import CPU6502 from 'js/cpu6502';
+import { DriveNumber, NibbleDisk, WozDisk } from 'js/formats/types';
+import { byte } from 'js/types';
+import { toHex } from 'js/util';
+import { VideoModes } from 'js/videomodes';
+import { mocked } from 'ts-jest/utils';
+import { BYTES_BY_SECTOR_IMAGE, BYTES_BY_TRACK_IMAGE } from '../formats/testdata/16sector';
+
+jest.mock('js/apple2io');
+jest.mock('js/videomodes');
+
+type Phase = 0 | 1 | 2 | 3; // not exported from DiskII
+
+const STEPS_PER_TRACK = 4;
+const PHASES_PER_TRACK = 2;
+
+function setTrack(diskII: DiskII, track: number) {
+    const initialState = diskII.getState();
+    initialState.drives[1].track = track * STEPS_PER_TRACK;
+    initialState.drives[1].phase = (track * PHASES_PER_TRACK) % 4 as Phase;
+    diskII.setState(initialState);
+}
+
+function setWriteProtected(diskII: DiskII, isWriteProtected: boolean) {
+    const initialState = diskII.getState();
+    initialState.drives[1].readOnly = isWriteProtected;
+    diskII.setState(initialState);
+}
+
+describe('DiskII', () => {
+    const mockApple2IO = new Apple2IO({} as unknown as CPU6502, {} as unknown as VideoModes);
+    const callbacks: Callbacks = {
+        driveLight: jest.fn(),
+        dirty: jest.fn(),
+        label: jest.fn(),
+    };
+
+    beforeEach(() => {
+        jest.resetAllMocks();
+    });
+
+    it('is constructable', () => {
+        const diskII = new DiskII(mockApple2IO, callbacks);
+        expect(diskII).not.toBeNull();
+    });
+
+    it('round-trips the state when there are no changes', () => {
+        const diskII = new DiskII(mockApple2IO, callbacks);
+        diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+        const state = diskII.getState();
+        diskII.setState(state);
+
+        expect(diskII.getState()).toEqual(state);
+    });
+
+    it('round-trips the state when there are changes', () => {
+        const diskII = new DiskII(mockApple2IO, callbacks);
+        diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+        diskII.setBinary(2, 'BYTES_BY_SECTOR', 'po', BYTES_BY_SECTOR_IMAGE);
+
+        const state = diskII.getState();
+        // These are just arbitrary changes, not an exhaustive list of fields.
+        state.skip = 1;
+        state.controllerState.drive = 2;
+        state.controllerState.latch = 0x42;
+        state.controllerState.on = true;
+        state.controllerState.q7 = true;
+        const disk2 = state.drives[2].disk as NibbleDisk;
+        disk2.tracks[14][12] = 0x80;
+        state.drives[2].head = 1000;
+        state.drives[2].phase = 3;
+        diskII.setState(state);
+
+        expect(diskII.getState()).toEqual(state);
+    });
+
+    it('calls all of the callbacks when state is restored', () => {
+        const diskII = new DiskII(mockApple2IO, callbacks);
+        diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+        jest.resetAllMocks();
+
+        const state = diskII.getState();
+        diskII.setState(state);
+
+        expect(callbacks.driveLight).toHaveBeenCalledTimes(2);
+        expect(callbacks.driveLight).toHaveBeenCalledWith(1, false);
+        expect(callbacks.driveLight).toHaveBeenCalledWith(2, false);
+
+        expect(callbacks.label).toHaveBeenCalledTimes(2);
+        expect(callbacks.label).toHaveBeenCalledWith(1, 'BYTES_BY_TRACK', undefined);
+        expect(callbacks.label).toHaveBeenCalledWith(2, 'Disk 2', undefined);
+
+        expect(callbacks.dirty).toHaveBeenCalledTimes(2);
+        expect(callbacks.dirty).toHaveBeenCalledWith(1, true);
+        expect(callbacks.dirty).toHaveBeenCalledWith(2, false);
+    });
+
+    describe('drive lights', () => {
+        it('turns on drive light 1 when the motor is turned on', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+
+            expect(callbacks.driveLight).toBeCalledTimes(1);
+            expect(callbacks.driveLight).toBeCalledWith(1, true);
+        });
+
+        it('turns off drive light 1 when the motor is turned off', () => {
+            jest.useFakeTimers();
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.ioSwitch(0x89);  // turn on the motor
+            mocked(callbacks.driveLight).mockReset();
+
+            diskII.ioSwitch(0x88);  // turn off the motor
+
+            jest.runAllTimers();
+            expect(callbacks.driveLight).toBeCalledTimes(1);
+            expect(callbacks.driveLight).toBeCalledWith(1, false);
+            jest.useRealTimers();
+        });
+
+        it('turns on drive light 2 when drive 2 is selected and the motor is turned on', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+
+            diskII.ioSwitch(0x8B);  // select drive 2
+            diskII.ioSwitch(0x89);  // turn on the motor
+
+            expect(callbacks.driveLight).toBeCalledTimes(1);
+            expect(callbacks.driveLight).toBeCalledWith(2, true);
+        });
+
+        it('turns off drive light 2 when drive 2 is selected and the motor is turned off', () => {
+            jest.useFakeTimers();
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.ioSwitch(0x8B);  // select drive 2
+            diskII.ioSwitch(0x89);  // turn on the motor
+            mocked(callbacks.driveLight).mockReset();
+
+            diskII.ioSwitch(0x88);  // turn off the motor
+
+            jest.runAllTimers();
+            expect(callbacks.driveLight).toBeCalledTimes(1);
+            expect(callbacks.driveLight).toBeCalledWith(2, false);
+            jest.useRealTimers();
+        });
+
+        it('turns off drive light 1 and turns on drive light two when drive 2 is selected', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8B);  // select drive 2
+
+            expect(callbacks.driveLight).toBeCalledTimes(3);
+            expect(callbacks.driveLight).toHaveBeenNthCalledWith(1, 1, true);
+            expect(callbacks.driveLight).toHaveBeenNthCalledWith(2, 1, false);
+            expect(callbacks.driveLight).toHaveBeenNthCalledWith(3, 2, true);
+        });
+    });
+
+    describe('head positioning', () => {
+        it('does not allow head positioning when the drive is off', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x84);  // coil 2 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(0);
+            expect(state.drives[1].track).toBe(0);
+        });
+
+        it('allows head positioning when the drive is on', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x84);  // coil 2 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(2);
+            expect(state.drives[1].track).toBe(4);
+        });
+
+        it('moves the head to track 2 from track 0 when all phases are cycled', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x86);  // coil 3 off
+            diskII.ioSwitch(0x80);  // coil 0 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(0);
+            expect(state.drives[1].track).toBe(2 * STEPS_PER_TRACK);
+        });
+
+        it('moves the head to track 10 from track 8 when all phases are cycled', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 8);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x86);  // coil 3 off
+            diskII.ioSwitch(0x80);  // coil 0 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(0);
+            expect(state.drives[1].track).toBe(10 * STEPS_PER_TRACK);
+        });
+
+        it('stops the head at track 34', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 33);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x86);  // coil 3 off
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x86);  // coil 3 off
+            diskII.ioSwitch(0x80);  // coil 0 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(0);
+            // The emulated Disk II puts data for track n on the
+            // 4 quarter-tracks starting with n * STEPS_PER_TRACK.
+            // On a real Disk II, the data would likely be on 3
+            // quarter-tracks starting with n * STEPS_PER_TRACK - 1,
+            // leaving 1 essentially blank quarter track at the
+            // half-track.
+            expect(state.drives[1].track).toBe(35 * STEPS_PER_TRACK - 1);
+        });
+
+        it('moves a half track when only one phase is activated', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 15);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x86);  // coil 3 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(3);
+            expect(state.drives[1].track).toBe(15 * STEPS_PER_TRACK + 2);
+        });
+
+        it('moves backward one track when phases are cycled in reverse', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 15);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x80);  // coil 0 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(0);
+            expect(state.drives[1].track).toBe(14 * STEPS_PER_TRACK);
+        });
+
+        it('moves backward two tracks when all phases are cycled in reverse', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 15);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x86);  // coil 3 off
+            diskII.ioSwitch(0x84);  // coil 2 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(2);
+            expect(state.drives[1].track).toBe(13 * STEPS_PER_TRACK);
+        });
+
+        it('does not move backwards past track 0', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 1);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x87);  // coil 3 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x86);  // coil 3 off
+            diskII.ioSwitch(0x84);  // coil 2 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(2);
+            expect(state.drives[1].track).toBe(0);
+        });
+
+        it('moves backward one half track', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 15);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x84);  // coil 2 off
+            diskII.ioSwitch(0x82);  // coil 1 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(1);
+            expect(state.drives[1].track).toBe(14.5 * STEPS_PER_TRACK);
+        });
+
+        // The emulated Disk II is not able to step quarter tracks because
+        // it does not track when phases are turned off.
+        // eslint-disable-next-line jest/no-disabled-tests
+        it.skip('moves a quarter track when two neighboring phases are activated and held', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 15);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x87);  // coil 3 on
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(3);
+            expect(state.drives[1].track).toBe(15 * STEPS_PER_TRACK + 1);
+        });
+
+        // The emulated Disk II is not able to step quarter tracks because
+        // it does not track when phases are turned off.
+        // eslint-disable-next-line jest/no-disabled-tests
+        it.skip('moves backward one quarter track', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setTrack(diskII, 15);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(1);
+            expect(state.drives[1].track).toBe(14.25 * STEPS_PER_TRACK);
+        });
+    });
+
+    describe('reading nibble-based disks', () => {
+        it('spins the disk', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8e);  // read mode
+
+            // Just check for changing nibbles
+            let spinning = false;
+            const firstNibble = diskII.ioSwitch(0x8c);  // read data
+            for (let i = 0; i < 512; i++) {
+                const thisNibble = diskII.ioSwitch(0x8c);  // read data
+                if (thisNibble >= 0x80 && firstNibble !== thisNibble) {
+                    spinning = true;
+                }
+            }
+            expect(spinning).toBeTruthy();
+        });
+
+        it('after reading the data, the data register is set to zero', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8e);  // read mode
+
+            // Find address field prolog
+            let nibble = diskII.ioSwitch(0x8c);  // read data
+            for (let i = 0; i < 512 && nibble !== 0xD5; i++) {
+                nibble = diskII.ioSwitch(0x8c);  // read data
+            }
+            expect(nibble).toBe(0xD5);
+            nibble = diskII.ioSwitch(0x8c);  // read data
+            // expect next read to be a zero because the sequencer is waiting
+            // for data
+            expect(nibble).toBe(0x00);
+        });
+
+        it('after reading the data, then zero, there is new data', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8e);  // read mode
+
+            // Find address field prolog
+            let nibble = diskII.ioSwitch(0x8c);  // read data
+            for (let i = 0; i < 512 && nibble !== 0xD5; i++) {
+                nibble = diskII.ioSwitch(0x8c);  // read data
+            }
+            expect(nibble).toBe(0xD5);
+            nibble = diskII.ioSwitch(0x8c);  // read data
+            // expect next read to be a zero
+            expect(nibble).toBe(0x00);
+            // expect next read to be new data
+            nibble = diskII.ioSwitch(0x8c);  // read data
+            expect(nibble).toBe(0xAA);
+        });
+
+        it('read write protect status', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            setWriteProtected(diskII, true);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8E);  // read mode
+            diskII.ioSwitch(0x8D);  // read write protect if read
+            const isWriteProtected = diskII.ioSwitch(0x8E);  // read data
+
+            expect(isWriteProtected).toBe(0xff);
+        });
+    });
+
+    describe('writing nibble-based disks', () => {
+        it('writes a nibble to the disk', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            let disk1 = diskII.getState().drives[1].disk as NibbleDisk; 
+            let track0 = disk1.tracks[0];
+            expect(track0[0]).toBe(0xFF);
+
+            diskII.ioSwitch(0x89);        // turn on the motor
+            diskII.ioSwitch(0x8F, 0x80);  // write
+            diskII.ioSwitch(0x8C);        // shift
+
+            disk1 = diskII.getState().drives[1].disk as NibbleDisk; 
+            track0 = disk1.tracks[0];
+            expect(track0[0]).toBe(0x80);
+        });
+
+        it('writes two nibbles to the disk', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            let disk1 = diskII.getState().drives[1].disk as NibbleDisk; 
+            let track0 = disk1.tracks[0];
+            expect(track0[0]).toBe(0xFF);
+
+            diskII.ioSwitch(0x89);        // turn on the motor
+            diskII.ioSwitch(0x8F, 0x80);  // write
+            diskII.ioSwitch(0x8C);        // shift
+            diskII.ioSwitch(0x8F, 0x81);  // write
+            diskII.ioSwitch(0x8C);        // shift
+
+            disk1 = diskII.getState().drives[1].disk as NibbleDisk; 
+            track0 = disk1.tracks[0];
+            expect(track0[0]).toBe(0x80);
+            expect(track0[1]).toBe(0x81);
+        });
+
+        it('sets disk state to dirty and calls the dirty callback when written', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'BYTES_BY_TRACK', 'po', BYTES_BY_TRACK_IMAGE);
+            let state = diskII.getState();
+            state.drives[1].dirty = false;
+            diskII.setState(state);
+            jest.resetAllMocks();
+
+            diskII.ioSwitch(0x89);        // turn on the motor
+            diskII.ioSwitch(0x8F, 0x80);  // write
+            diskII.ioSwitch(0x8C);        // shift
+
+            expect(callbacks.dirty).toHaveBeenCalledTimes(1);
+            expect(callbacks.dirty).toHaveBeenCalledWith(1, true);
+
+            state = diskII.getState();
+            expect(state.drives[1].dirty).toBeTruthy();
+        });
+    });
+
+    describe('reading WOZ-based disks', () => {
+        const DOS33_SYSTEM_MASTER_IMAGE =
+            fs.readFileSync('test/js/cards/data/DOS 3.3 System Master.woz').buffer;
+
+        it('accepts WOZ-based disks', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+
+            expect(true).toBeTruthy();
+        });
+
+        it('stops the head at the end of the image', () => {
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+            setTrack(diskII, 33);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x85);  // coil 2 on
+            for (let i = 0; i < 5; i++) {
+                diskII.ioSwitch(0x87);  // coil 3 on
+                diskII.ioSwitch(0x84);  // coil 2 off
+                diskII.ioSwitch(0x81);  // coil 0 on
+                diskII.ioSwitch(0x86);  // coil 3 off
+                diskII.ioSwitch(0x83);  // coil 1 on
+                diskII.ioSwitch(0x80);  // coil 0 off
+                diskII.ioSwitch(0x85);  // coil 2 on
+                diskII.ioSwitch(0x82);  // coil 1 off
+            }
+            diskII.ioSwitch(0x84);  // coil 2 off
+
+            const state = diskII.getState();
+            expect(state.drives[1].phase).toBe(2);
+            // For WOZ images, the number of tracks is the number in the image.
+            // The DOS3.3 System Master was imaged on a 40 track drive, so it
+            // has data for all 40 tracks, even though the last few are garbage.
+            expect(state.drives[1].track).toBe(40 * STEPS_PER_TRACK - 1);
+        });
+
+        it('spins the disk when motor is on', () => {
+            let cycles: number = 0;
+            mocked(mockApple2IO).cycles.mockImplementation(() => cycles);
+
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+
+            let state = diskII.getState();
+            expect(state.drives[1].head).toBe(0);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            cycles += 10;
+            diskII.tick();
+
+            state = diskII.getState();
+            expect(state.drives[1].head).toBeGreaterThan(0);
+        });
+
+        it('does not spin the disk when motor is off', () => {
+            let cycles: number = 0;
+            mocked(mockApple2IO).cycles.mockImplementation(() => cycles);
+
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+
+            let state = diskII.getState();
+            expect(state.drives[1].head).toBe(0);
+
+            cycles += 10;
+            diskII.tick();
+
+            state = diskII.getState();
+            expect(state.drives[1].head).toBe(0);
+        });
+
+        it('reads an FF sync byte from the beginning of the image', () => {
+            let cycles: number = 0;
+            mocked(mockApple2IO).cycles.mockImplementation(() => cycles);
+
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8e);  // read mode
+
+            // The initial bytes in the image are: FF 3F CF F3
+            // making the bit stream:
+            //
+            //     1111 1111 0011 1111 1100 1111 1111 0011
+            //
+            // That's three FF sync bytes in a row. Assuming
+            // the sequencer is in state 2, each sync byte takes
+            // 32 clock cycles to read, is held for 8 clock
+            // cycles while the extra zeros are shifted in, then
+            // is held 8 more clock cycles while the sequencer
+            // reads the next two bits.
+            cycles += 40;  // shift 10 bits
+            const nibble = diskII.ioSwitch(0x8c);  // read data
+            expect(nibble).toBe(0xFF);
+        });
+
+        it('reads several FF sync bytes', () => {
+            let cycles: number = 0;
+            mocked(mockApple2IO).cycles.mockImplementation(() => cycles);
+
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x8e);  // read mode
+
+            // The initial bytes in the image are: FF 3F CF F3
+            // making the bit stream:
+            //
+            //     1111 1111 0011 1111 1100 1111 1111 0011
+            //
+            // That's three FF sync bytes in a row. Assuming
+            // the sequencer is in state 2, each sync byte takes
+            // 32 clock cycles to read, is held for 8 clock
+            // cycles while the extra zeros are shifted in, then
+            // is held 8 more clock cycles while the sequencer
+            // reads the next two bits.  This means that 3 sync
+            // bytes will be available for 3 * 40 + 8 cycles.
+            for (let i = 0; i < 3 * 40 + 8; i++) {
+                cycles++;
+                const nibble = diskII.ioSwitch(0x8c);  // read data
+                if (nibble & 0x80) {
+                    // Nibbles are only valid when the high bit is set.
+                    // eslint-disable-next-line jest/no-conditional-expect
+                    expect(nibble).toBe(0xFF);
+                }
+            }
+        });
+
+        it('reads random garbage on uninitialized tracks', () => {
+            let cycles: number = 0;
+            mocked(mockApple2IO).cycles.mockImplementation(() => cycles);
+
+            const diskII = new DiskII(mockApple2IO, callbacks);
+            diskII.setBinary(1, 'DOS 3.3 System Master', 'woz', DOS33_SYSTEM_MASTER_IMAGE);
+
+            // Step to track 0.5
+            diskII.ioSwitch(0x89);  // turn on the motor
+            diskII.ioSwitch(0x81);  // coil 0 on
+            diskII.ioSwitch(0x83);  // coil 1 on
+            diskII.ioSwitch(0x80);  // coil 0 off
+            diskII.ioSwitch(0x82);  // coil 1 off
+            diskII.ioSwitch(0x8e);  // read mode
+
+            // Read 5 nibbles
+            const nibbles: byte[] = [];
+            let read = false;
+            while (nibbles.length < 5) {
+                cycles++;
+                const nibble = diskII.ioSwitch(0x8c);  // read data
+                const qa = nibble & 0x80;
+                if (qa && !read) {
+                    nibbles.push(nibble);
+                    read = true;
+                }
+                if (!qa && read) {
+                    read = false;
+                }
+            }
+            // Test that the first doesn't equal any of the others.
+            // (Yes, this test could fail with some bad luck.)
+            let equal = false;
+            for (let i = 1; i < 5; i++) {
+                equal ||= nibbles[0] === nibbles[i];
+            }
+            expect(equal).not.toBeTruthy();
+        });
+
+        it('disk spins at a consistent speed', () => {
+            const reader = new TestDiskReader(1, 'DOS 3.3 System Master', DOS33_SYSTEM_MASTER_IMAGE, mockApple2IO, callbacks);
+
+            reader.diskII.ioSwitch(0x89);  // turn on the motor
+            reader.diskII.ioSwitch(0x8e);  // read mode
+
+            // Find track 0, sector 0
+            reader.findSector(0);
+            // Save the start cycles
+            let lastCycles = mockApple2IO.cycles();
+            // Find track 0, sector 0 again
+            reader.findSector(0);
+            let currentCycles = reader.cycles;
+            expect(currentCycles - lastCycles).toBe(201216);
+            lastCycles = currentCycles;
+            // Find track 0, sector 0 once again
+            reader.findSector(0);
+            currentCycles = reader.cycles;
+            expect(currentCycles - lastCycles).toBe(201216);
+        });
+    });
+
+    describe('writing WOZ-based disks', () => {
+        const DOS33_SYSTEM_MASTER_IMAGE =
+            fs.readFileSync('test/js/cards/data/DOS 3.3 System Master.woz').buffer;
+
+        it('can write something', () => {
+            const reader = new TestDiskReader(1, 'DOS 3.3 System Master', DOS33_SYSTEM_MASTER_IMAGE, mockApple2IO, callbacks);
+            const diskII = reader.diskII;
+            const before = reader.rawTracks();
+
+            diskII.ioSwitch(0x89);  // turn on the motor
+
+            // emulate STA $C08F,X (5 CPU cycles)
+            reader.cycles += 4;           // op + load address + work
+            diskII.tick();
+            reader.cycles += 1;
+            diskII.ioSwitch(0x8F, 0x80);  // write
+            // read $C08C,X
+            reader.cycles += 4;           // op + load address + work
+            diskII.tick();
+            reader.cycles += 1;
+            diskII.ioSwitch(0x8C);        // shift
+
+            reader.cycles += 29;          // wait
+            diskII.tick();                // nop (make sure the change is applied)
+
+            const after = reader.rawTracks();
+            expect(before).not.toEqual(after);
+        });
+    });
+});
+
+class TestDiskReader {
+    cycles: number = 0;
+    nibbles = 0;
+    diskII: DiskII;
+
+    constructor(drive: DriveNumber, label: string, image: ArrayBufferLike, apple2IO: Apple2IO, callbacks: Callbacks) {
+        mocked(apple2IO).cycles.mockImplementation(() => this.cycles);
+
+        this.diskII = new DiskII(apple2IO, callbacks);
+        this.diskII.setBinary(drive, label, 'woz', image);
+    }
+
+    readNibble(): byte {
+        let result: number = 0;
+        for (let i = 0; i < 100; i++) {
+            this.cycles++;
+            const nibble = this.diskII.ioSwitch(0x8c);  // read data
+            if (nibble & 0x80) {
+                result = nibble;
+            } else if (result & 0x80) {
+                this.nibbles++;
+                return result;
+            }
+        }
+        throw new Error('Did not find a nibble in 100 clock cycles');
+    }
+
+    findAddressField() {
+        let s = '';
+        for (let i = 0; i < 600; i++) {
+            let nibble = this.readNibble();
+            if (nibble !== 0xD5) {
+                s += ` ${toHex(nibble)}`;
+                continue;
+            }
+            nibble = this.readNibble();
+            if (nibble !== 0xAA) {
+                continue;
+            }
+            nibble = this.readNibble();
+            if (nibble !== 0x96) {
+                continue;
+            }
+            return;
+        }
+        throw new Error(`Did not find an address field in 500 nibbles: ${s}`);
+    }
+
+    nextSector() {
+        this.findAddressField();
+        const volume = (this.readNibble() << 1 | 1) & this.readNibble();
+        const track = (this.readNibble() << 1 | 1) & this.readNibble();
+        const sector = (this.readNibble() << 1 | 1) & this.readNibble();
+        // console.log(`vol: ${volume} trk: ${track} sec: ${thisSector} ${this.diskII.head()} ${this.nibbles}`);
+        return { volume, track, sector };
+    }
+
+    findSector(sector: byte) {
+        for (let i = 0; i < 32; i++) {
+            const { sector: thisSector } = this.nextSector();
+            if (sector === thisSector) {
+                return;
+            }
+        }
+        throw new Error(`Did not find sector ${sector} in 32 sectors`);
+    }
+
+    rawTracks() {
+        // NOTE(flan): Hack to access private properties.
+        const disk = (this.diskII as unknown as { curDisk: WozDisk }).curDisk;
+        const result: Uint8Array[] = [];
+        for (let i = 0; i < disk.rawTracks.length; i++) {
+            result[i] = disk.rawTracks[i].slice(0);
+        }
+
+        return result;
+    }
+}
diff --git a/test/js/debugger.spec.ts b/test/js/debugger.spec.ts
index 6e7b01b..6ee9fae 100644
--- a/test/js/debugger.spec.ts
+++ b/test/js/debugger.spec.ts
@@ -18,11 +18,11 @@ describe('Debugger', () => {
         cpu.addPageHandler(bios);
 
         debuggerContainer = {
-            getCPU: () => cpu,
             run: jest.fn(),
             stop: jest.fn(),
+            isRunning: jest.fn(),
         };
-        theDebugger = new Debugger(debuggerContainer);
+        theDebugger = new Debugger(cpu, debuggerContainer);
     });
 
     describe('#utility', () => {
@@ -55,5 +55,55 @@ describe('Debugger', () => {
                 'A=00 X=00 Y=00 P=20 S=FF --X-----'
             );
         });
+
+        it('should dump the stack,', () => {
+            const stack = theDebugger.getStack();
+            const lines = stack.split('\n');
+            expect(lines).toHaveLength(256);
+            expect(lines[0]).toMatch('* $01FF 00');
+            expect(lines[1]).toMatch('  $01FE 00');
+            expect(lines[254]).toMatch('  $0101 00');
+            expect(lines[255]).toMatch('  $0100 00');
+        });
+
+        it('should dump the stack with size', () => {
+            const stack = theDebugger.getStack(32);
+            const lines = stack.split('\n');
+            expect(lines).toHaveLength(32);
+            expect(lines[0]).toMatch('* $01FF 00');
+            expect(lines[1]).toMatch('  $01FE 00');
+            expect(lines[30]).toMatch('  $01E1 00');
+            expect(lines[31]).toMatch('  $01E0 00');
+        });
+
+        it('should dump the stack within size', () => {
+            const registers = cpu.getState();
+            registers.sp = 0xE3;
+            cpu.setState(registers);
+            const stack = theDebugger.getStack(32);
+            const lines = stack.split('\n');
+            expect(lines).toHaveLength(32);
+            expect(lines[0]).toMatch('  $01FF 00');
+            expect(lines[1]).toMatch('  $01FE 00');
+            expect(lines[28]).toMatch('* $01E3 00');
+            expect(lines[29]).toMatch('  $01E2 00');
+            expect(lines[30]).toMatch('  $01E1 00');
+            expect(lines[31]).toMatch('  $01E0 00');
+        });
+
+        it('should dump the stack with size and move the window', () => {
+            const registers = cpu.getState();
+            registers.sp = 0xC3;
+            cpu.setState(registers);
+            const stack = theDebugger.getStack(32);
+            const lines = stack.split('\n');
+            expect(lines).toHaveLength(32);
+            expect(lines[0]).toMatch('  $01DF 00');
+            expect(lines[1]).toMatch('  $01DE 00');
+            expect(lines[28]).toMatch('* $01C3 00');
+            expect(lines[29]).toMatch('  $01C2 00');
+            expect(lines[30]).toMatch('  $01C1 00');
+            expect(lines[31]).toMatch('  $01C0 00');
+        });
     });
 });
diff --git a/test/js/formats/2mg.spec.ts b/test/js/formats/2mg.spec.ts
new file mode 100644
index 0000000..350e495
--- /dev/null
+++ b/test/js/formats/2mg.spec.ts
@@ -0,0 +1,202 @@
+import {
+    create2MGFragments,
+    create2MGFromBlockDisk,
+    FORMAT,
+    HeaderData,
+    read2MGHeader
+} from 'js/formats/2mg';
+import { BlockDisk, ENCODING_BLOCK } from 'js/formats/types';
+import { concat } from 'js/util';
+import { BYTES_BY_SECTOR_IMAGE } from './testdata/16sector';
+
+const INVALID_SIGNATURE_IMAGE = new Uint8Array([
+    0x11, 0x22, 0x33, 0x44
+]);
+
+const INVALID_HEADER_LENGTH_IMAGE = new Uint8Array([
+    // ID
+    0x32, 0x49, 0x4d, 0x47,
+    // Creator ID
+    0x58, 0x47, 0x53, 0x21,
+    // Header size
+    0x0a, 0x00
+]);
+
+const VALID_PRODOS_IMAGE = concat(new Uint8Array([
+    // ID
+    0x32, 0x49, 0x4d, 0x47,
+    // Creator ID
+    0x58, 0x47, 0x53, 0x21,
+    // Header size
+    0x40, 0x00,
+    // Version number
+    0x01, 0x00,
+    // Image format (ProDOS)
+    0x01, 0x00, 0x00, 0x00,
+    // Flags
+    0x00, 0x00, 0x00, 0x00,
+    // ProDOS blocks
+    0x18, 0x01, 0x00, 0x00,
+    // Data offset
+    0x40, 0x00, 0x00, 0x00,
+    // Data length (in bytes)
+    0x00, 0x30, 0x02, 0x00,
+    // Comment offset
+    0x00, 0x00, 0x00, 0x00,
+    // Comment length
+    0x00, 0x00, 0x00, 0x00,
+    // Creator data offset
+    0x00, 0x00, 0x00, 0x00,
+    // Creator data length
+    0x00, 0x00, 0x00, 0x00,
+    // Padding
+    0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+    0x00, 0x00, 0x00, 0x00,
+]), BYTES_BY_SECTOR_IMAGE);
+
+describe('2mg format', () => {
+    describe('read2MGHeader', () => {
+        it('throws if the signature is invalid', () => {
+            expect(() => read2MGHeader(INVALID_SIGNATURE_IMAGE.buffer)).toThrow(/signature/);
+        });
+
+        it('throws if the header length is invalid', () => {
+            expect(() => read2MGHeader(INVALID_HEADER_LENGTH_IMAGE.buffer)).toThrowError(/header length/);
+        });
+
+        it('throws if block count is not correct for ProDOS image', () => {
+            const image = new Uint8Array(VALID_PRODOS_IMAGE);
+            image[0x14] = image[0x14] + 1;
+            expect(() => read2MGHeader(image.buffer)).toThrowError(/blocks/);
+        });
+
+        it('throws if comment comes before end of disk data', () => {
+            const image = new Uint8Array(VALID_PRODOS_IMAGE);
+            image[0x20] = 1;
+            expect(() => read2MGHeader(image.buffer)).toThrowError(/is before/);
+        });
+
+        it('throws if creator data comes before end of disk data', () => {
+            const image = new Uint8Array(VALID_PRODOS_IMAGE);
+            image[0x28] = 1;
+            expect(() => read2MGHeader(image.buffer)).toThrowError(/is before/);
+        });
+
+        it('throws if data length is too big for file', () => {
+            const image = new Uint8Array(VALID_PRODOS_IMAGE);
+            image[0x1D] += 2;  // Increment byte length by 512
+            image[0x14] += 1;  // Increment block length by 1
+            expect(() => read2MGHeader(image.buffer)).toThrowError(/extends beyond/);
+        });
+
+        it('returns a header for a valid ProDOS image', () => {
+            expect(read2MGHeader(VALID_PRODOS_IMAGE.buffer)).not.toBeNull();
+        });
+
+        it('returns a filled-in header for a valid ProDOS image', () => {
+            const header = read2MGHeader(VALID_PRODOS_IMAGE.buffer);
+            expect(header.creator).toBe('XGS!');
+            expect(header.bytes).toBe(143_360);
+            expect(header.offset).toBe(64);
+            expect(header.format).toBe(1);
+            expect(header.readOnly).toBeFalsy();
+            expect(header.volume).toBe(0);
+            expect(header.comment).toBeUndefined();
+            expect(header.creatorData).toBeUndefined();
+        });
+    });
+
+    describe('create2MGFragments', () => {
+        it('creates a valid image from header data and blocks', () => {
+            const header = read2MGHeader(VALID_PRODOS_IMAGE.buffer);
+            const { prefix, suffix } = create2MGFragments(header, { blocks: header.bytes / 512 });
+            expect(prefix).toEqual(VALID_PRODOS_IMAGE.slice(0, 64));
+            expect(suffix).toEqual(new Uint8Array());
+        });
+
+        it('throws an error if block count does not match byte count', () => {
+            const headerData: HeaderData = {
+                creator: 'A2JS',
+                bytes: 32768,
+                format: FORMAT.ProDOS,
+                readOnly: false,
+                offset: 64,
+                volume: 0,
+            };
+            expect(() => create2MGFragments(headerData, { blocks: 63 })).toThrowError(/does not match/);
+        });
+
+        it('throws an error if not a ProDOS volume', () => {
+            const headerData: HeaderData = {
+                creator: 'A2JS',
+                bytes: 143_360,
+                format: FORMAT.DOS,
+                readOnly: false,
+                offset: 64,
+                volume: 254,
+            };
+            expect(() => create2MGFragments(headerData, { blocks: 280 })).toThrowError(/not supported/);
+        });
+
+        it('uses defaults', () => {
+            const { prefix, suffix } = create2MGFragments(null, { blocks: 280 });
+            const image = concat(prefix, BYTES_BY_SECTOR_IMAGE, suffix);
+            const headerData = read2MGHeader(image.buffer);
+            expect(headerData).toEqual({
+                creator: 'A2JS',
+                bytes: 143_360,
+                format: FORMAT.ProDOS,
+                readOnly: false,
+                offset: 64,
+                volume: 0,
+            });
+        });
+
+        it.each([
+            ['Hello, sailor', undefined],
+            ['Hieyz wizka', new Uint8Array([4, 3, 2, 1])],
+            [undefined, new Uint8Array([4, 3, 2, 1])]
+        ])('can create comment %p and creator data %p', (testComment, testData) => {
+            const headerData: HeaderData = {
+                creator: 'A2JS',
+                bytes: 0,
+                format: FORMAT.ProDOS,
+                readOnly: false,
+                offset: 64,
+                volume: 254,
+            };
+            if (testComment) {
+                headerData.comment = testComment;
+            }
+            if (testData) {
+                headerData.creatorData = testData;
+            }
+            const { prefix, suffix } = create2MGFragments(headerData, { blocks: 0 });
+            const image = concat(prefix, suffix);
+            const { comment, creatorData } = read2MGHeader(image.buffer);
+            expect(comment).toEqual(testComment);
+            expect(creatorData).toEqual(testData);
+        });
+    });
+
+    describe('create2MGFromBlockDisk', () => {
+        it('can create a 2mg disk', () => {
+            const header = read2MGHeader(VALID_PRODOS_IMAGE.buffer);
+            const blocks = [];
+            for (let idx = 0; idx < BYTES_BY_SECTOR_IMAGE.length; idx += 512) {
+                blocks.push(BYTES_BY_SECTOR_IMAGE.slice(idx, idx + 512));
+            }
+            const disk: BlockDisk = {
+                blocks,
+                metadata: { name: 'Good disk' },
+                readOnly: false,
+                encoding: ENCODING_BLOCK,
+                format: 'hdv',
+            };
+            const image = create2MGFromBlockDisk(header, disk);
+            expect(VALID_PRODOS_IMAGE.buffer).toEqual(image);
+        });
+    });
+});
diff --git a/test/js/formats/create_disk.spec.ts b/test/js/formats/create_disk.spec.ts
index 191973a..a1d0081 100644
--- a/test/js/formats/create_disk.spec.ts
+++ b/test/js/formats/create_disk.spec.ts
@@ -7,11 +7,13 @@ describe('createDiskFromJsonDisk', () => {
         expect(disk).toEqual({
             encoding: 'nibble',
             format: 'dsk',
-            name: 'Test Disk',
+            metadata: {
+                name: 'Test Disk',
+                side: 'Front',
+            },
             readOnly: undefined,
-            side: 'Front',
             volume: 254,
-            tracks: expect.any(Array)
+            tracks: expect.any(Array) as number[][]
         });
     });
 });
diff --git a/test/js/formats/d13.spec.ts b/test/js/formats/d13.spec.ts
index 7d3334d..5818eba 100644
--- a/test/js/formats/d13.spec.ts
+++ b/test/js/formats/d13.spec.ts
@@ -59,7 +59,7 @@ describe('DOS-13 format', () => {
         // From Beneith Apple DOS, GAP 1 should have 12-85 0xFF bytes
         const track = disk.tracks[0];
         let numFF = 0;
-        while (track[numFF] == 0xFF && numFF < 0x100) {
+        while (track[numFF] === 0xFF && numFF < 0x100) {
             numFF++;
         }
         expect(numFF).toBeGreaterThanOrEqual(40);
diff --git a/test/js/formats/do.spec.ts b/test/js/formats/do.spec.ts
index 94dc20c..9590b6f 100644
--- a/test/js/formats/do.spec.ts
+++ b/test/js/formats/do.spec.ts
@@ -58,7 +58,7 @@ describe('DOS format', () => {
         // From Beneith Apple DOS, GAP 1 should have 12-85 0xFF bytes
         const track = disk.tracks[0];
         let numFF = 0;
-        while (track[numFF] == 0xFF && numFF < 0x100) {
+        while (track[numFF] === 0xFF && numFF < 0x100) {
             numFF++;
         }
         expect(numFF).toBeGreaterThanOrEqual(40);
diff --git a/test/js/formats/format_utils.spec.ts b/test/js/formats/format_utils.spec.ts
new file mode 100644
index 0000000..b8f9a43
--- /dev/null
+++ b/test/js/formats/format_utils.spec.ts
@@ -0,0 +1,520 @@
+import createDiskFromDOS13 from 'js/formats/d13';
+import createDiskFromDOS from 'js/formats/do';
+import { defourXfour, DO, explodeSector13, findSector, fourXfour, readSector } from 'js/formats/format_utils';
+import { BYTES_BY_SECTOR as BYTES_BY_SECTOR_13, BYTES_IN_ORDER as BYTES_IN_ORDER_13 } from './testdata/13sector';
+import { BYTES_BY_SECTOR as BYTES_BY_SECTOR_16 } from './testdata/16sector';
+
+describe('fourXfour', () => {
+    //    d7 d6 d5 d4 d3 d2 d1 d0
+    // =>  1 d7  1 d5  1 d3  1 d1
+    //     1 d6  1 d4  1 d2  1 d0
+
+    it('converts 0x00 correctly', () => {
+        // 0000 0000 => 1010 1010, 1010 1010
+        expect(fourXfour(0x00)).toEqual([0b1010_1010, 0b1010_1010]);
+    });
+
+    it('converts 0xff correctly', () => {
+        // 1111 1111 => 1111 1111, 1111 1111
+        expect(fourXfour(0xFF)).toEqual([0b1111_1111, 0b1111_1111]);
+    });
+
+    it('converts 0x55 correctly', () => {
+        // 0101 0101 => 1010 1010, 1111 1111
+        expect(fourXfour(0x55)).toEqual([0b1010_1010, 0b1111_1111]);
+    });
+
+    it('converts 0xAA correctly', () => {
+        // 1010 1010 => 1111 1111, 1010 1010
+        expect(fourXfour(0xAA)).toEqual([0b1111_1111, 0b1010_1010]);
+    });
+
+    it('converts 0xA5 correctly', () => {
+        // 1010 0101 => 1111 1010, 1010 1111
+        expect(fourXfour(0xA5)).toEqual([0b1111_1010, 0b1010_1111]);
+    });
+
+    it('converts 0x5A correctly', () => {
+        // 0101 1010 => 1010 1111, 1111 1010
+        expect(fourXfour(0x5A)).toEqual([0b1010_1111, 0b1111_1010]);
+    });
+
+    it('converts 0xC3 (0b1100_0011) correctly', () => {
+        // 1100 0011 => 1110 1011, 1110 1011
+        expect(fourXfour(0b1100_0011)).toEqual([0b1110_1011, 0b1110_1011]);
+    });
+
+    it('converts 0x3C (0b0011_1100) correctly', () => {
+        // 0011 1100 => 1011 1110, 1011 1110
+        expect(fourXfour(0b0011_1100)).toEqual([0b1011_1110, 0b1011_1110]);
+    });
+});
+
+describe('defourXfour', () => {
+    it('converts to 0x00 correctly', () => {
+        //  1010 1010, 1010 1010 => 0000 0000
+        expect(defourXfour(0b1010_1010, 0b1010_1010)).toEqual(0x00);
+    });
+
+    it('converts to 0xff correctly', () => {
+        //  1111 1111, 1111 1111 => 1111 1111
+        expect(defourXfour(0b1111_1111, 0b1111_1111)).toEqual(0xFF);
+    });
+
+    it('converts to 0x55 correctly', () => {
+        //  1010 1010, 1111 1111 => 0101 0101
+        expect(defourXfour(0b1010_1010, 0b1111_1111)).toEqual(0x55);
+    });
+
+    it('converts to 0xAA correctly', () => {
+        //  1111 1111, 1010 1010 => 1010 1010
+        expect(defourXfour(0b1111_1111, 0b1010_1010)).toEqual(0xAA);
+    });
+
+    it('converts to 0xA5 correctly', () => {
+        //  1111 1010, 1010 1111 => 1010 0101
+        expect(defourXfour(0b1111_1010, 0b1010_1111)).toEqual(0xA5);
+    });
+
+    it('converts to 0x5A correctly', () => {
+        //  1010 1111, 1111 1010 => 0101 1010
+        expect(defourXfour(0b1010_1111, 0b1111_1010)).toEqual(0x5A);
+    });
+
+    it('converts to 0xC3 (0b1100_0011) correctly', () => {
+        //  1110 1011, 1110 1011 => 1100 0011
+        expect(defourXfour(0b1110_1011, 0b1110_1011)).toEqual(0b1100_0011);
+    });
+
+    it('converts to 0x3C (0b0011_1100) correctly', () => {
+        //  1011 1110, 1011 1110 => 0011 1100
+        expect(defourXfour(0b1011_1110, 0b1011_1110)).toEqual(0b0011_1100);
+    });
+});
+
+describe('findSector', () => {
+    describe('for a 16 sector DOS disk', () => {
+        it('correctly finds track 0, sector 0', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 0, 0);
+            expect(track).toBe(0);
+            expect(sector).toBe(0);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */);
+            expect(sectors).toBe(16);
+        });
+
+        it('correctly finds track 0, sector 1', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 0, 1);
+            expect(track).toBe(0);
+            expect(sector).toBe(1);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 1 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 342 /* data 6 & 2 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 41 /* GAP3 nibbles for track 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(16);
+        });
+
+        it('correctly finds track 0, sector 2', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 0, 2);
+            expect(track).toBe(0);
+            expect(sector).toBe(2);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 2 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 342 /* data 6 & 2 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 41 /* GAP3 nibbles for track 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(16);
+        });
+
+        it('correctly finds track 0, sector 15', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 0, 15);
+            expect(track).toBe(0);
+            expect(sector).toBe(15);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 15 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 342 /* data 6 & 2 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 41 /* GAP3 nibbles for track 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(16);
+        });
+
+        it('correctly finds track 1, sector 0', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 1, 0);
+            expect(track).toBe(1);
+            expect(sector).toBe(0);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */);
+            expect(sectors).toBe(16);
+        });
+
+        it('correctly finds track 1, sector 1', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 1, 1);
+            expect(track).toBe(1);
+            expect(sector).toBe(1);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 1 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 342 /* data 6 & 2 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 39 /* GAP3 nibbles for track > 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(16);
+        });
+
+        it('correctly finds track 1, sector 15', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 1, 15);
+            expect(track).toBe(1);
+            expect(sector).toBe(15);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 15 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 342 /* data 6 & 2 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 39 /* GAP3 nibbles for track > 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(16);
+        });
+    });
+
+    describe('for a 13 sector disk', () => {
+        it('correctly finds track 0, sector 0 of a 13 sector disk', () => {
+            const disk = createDiskFromDOS13({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_13,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 0, 0);
+            expect(track).toBe(0);
+            expect(sector).toBe(0);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */);
+            expect(sectors).toBe(13);
+        });
+
+        it('correctly finds track 0, sector 1 of a 13 sector disk', () => {
+            const disk = createDiskFromDOS13({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_13,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 0, 1);
+            expect(track).toBe(0);
+            expect(sector).toBe(1);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 4 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 410 /* data 5 & 3 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 41 /* GAP3 nibbles for track 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(13);
+        });
+
+        it('correctly finds track 1, sector 6 of a 13 sector disk', () => {
+            const disk = createDiskFromDOS13({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_13,
+                readOnly: true,
+            });
+            const { nibble, track, sector, sectors } = findSector(disk, 1, 6);
+            expect(track).toBe(1);
+            expect(sector).toBe(6);
+            expect(nibble).toBe(
+                128 /* GAP1 nibbles */
+                + 11 * (
+                    + 14 /* Address Field nibbles */
+                    + 5 /* GAP2 nibbles */
+                    + 3 /* prologue nibbles */
+                    + 410 /* data 5 & 3 */
+                    + 1 /* checksum nibble */
+                    + 3 /* epilogue nibbles */
+                    + 39 /* GAP3 nibbles for track > 0 */)
+                + 14 /* Address Field nibbles */
+                + 5 /* GAP2 nibbles */
+                + 3 /* prologue nibbles */
+            );
+            expect(sectors).toBe(13);
+        });
+    });
+});
+
+describe('readSector', () => {
+    describe('for a 16 sector disk', () => {
+        it('correctly reads track 0, sector 0', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const data = readSector(disk, 0, 0);
+            expect(data).toEqual(new Uint8Array(256));
+        });
+
+        it('correctly reads track 0, sector 1', () => {
+            const disk = createDiskFromDOS({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_16,
+                readOnly: true,
+            });
+            const data = readSector(disk, 0, 1);
+            expect(data).toEqual(new Uint8Array(256).fill(DO[1]));
+        });
+    });
+
+    describe('for a 13 sector disk', () => {
+        it('correctly reads track 0, sector 0', () => {
+            const disk = createDiskFromDOS13({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_13,
+                readOnly: true,
+            });
+            const data = readSector(disk, 0, 0);
+            expect(data).toEqual(new Uint8Array(256));
+        });
+
+        it('correctly reads track 0, sector 1', () => {
+            const disk = createDiskFromDOS13({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_BY_SECTOR_13,
+                readOnly: true,
+            });
+            const data = readSector(disk, 0, 1);
+            expect(data).toEqual(new Uint8Array(256).fill(1));
+        });
+
+        it('correctly reads track 0, sector 0 bytes in order', () => {
+            const disk = createDiskFromDOS13({
+                name: 'Disk by sector',
+                volume: 254,
+                data: BYTES_IN_ORDER_13,
+                readOnly: true,
+            });
+            const data = readSector(disk, 0, 0);
+            const expected = new Uint8Array(256);
+            for (let i = 0; i < 256; i++) {
+                expected[i] = i;
+            }
+            expect(data).toEqual(expected);
+        });
+    });
+
+});
+
+describe('explodeSector13', () => {
+    it('correctly encodes all 1s', () => {
+        const sector = explodeSector13(256, 0, 0, new Uint8Array(256).fill(1));
+        expect(sector[0]).toBe(0xFF);
+        // Address prologue
+        expect(sector[0x80]).toBe(0xD5);
+        expect(sector[0x81]).toBe(0xAA);
+        expect(sector[0x82]).toBe(0xB5);
+
+        // Data prologue
+        expect(sector[0x93]).toBe(0xD5);
+        expect(sector[0x94]).toBe(0xAA);
+        expect(sector[0x95]).toBe(0xAD);
+
+        // Data
+        expect(sector[0x96]).toBe(0xAD); // 01 special low bit of 0xFF
+        expect(sector[0x97]).toBe(0xB7); // C:001 D0:1 E0:1 -> 07 -> 07 ^ 01 -> 06 -> B7
+        expect(sector[0x98]).toBe(0xAB); // G:001 H0:1 I0:1 -> 07 -> 07 ^ 07 -> 00 -> AB
+        expect(sector[0x99]).toBe(0xAB); // J:001 K0:1 L0:1 -> 07 -> 07 ^ 07 -> 00 -> AB
+        for (let i = 0x9A; i <= 0x96 + 0x33; i++) {
+            expect(sector[i]).toBe(0xAB); // same as above
+        }
+
+        expect(sector[0x96 + 0x34]).toBe(0xAF); // B:001 D1:0 E1:0 -> 04 ^ 07 -> 03 -> AF
+        expect(sector[0x96 + 0x35]).toBe(0xAB); // X:001 Y1:0 Z1:0 -> 04 ^ 04 -> 00 -> AB
+        for (let i = 0x96 + 0x36; i <= 0x96 + 0x33 + 0x33; i++) {
+            expect(sector[i]).toBe(0xAB); // same as above
+        }
+
+        // expect(sector[0x98]).toBe(0xAB); // B:001 D1:0 E1:0 -> 04 -> 04 ^ 07 -> 03 -> AF
+        // expect(sector[0x97]).toBe(0xB7); // A:001 D2:0 E2:0 -> 04 -> 04 ^ 02 -> 06 -> B7
+    });
+});
+
+describe('test', () => {
+    it('5-bit nibble to data offset', () => {
+        // const off = (i: number) => 0x33 * (i % 5) + (0x32 - Math.floor(i / 5));
+        const off = (i: number) => Math.floor(i / 0x33) + 5 * (0x32 - (i % 0x33));
+        expect(off(0x32)).toBe(0);
+        expect(off(0x31)).toBe(5);
+        expect(off(0x30)).toBe(10);
+        expect(off(0x65)).toBe(1);
+        expect(off(0x64)).toBe(6);
+        expect(off(0x63)).toBe(11);
+        expect(off(0x98)).toBe(2);
+        expect(off(0x97)).toBe(7);
+        expect(off(0x96)).toBe(12);
+        expect(off(0xCB)).toBe(3);
+        expect(off(0xCA)).toBe(8);
+        expect(off(0xC9)).toBe(13);
+        expect(off(0xFE)).toBe(4);
+        expect(off(0xFD)).toBe(9);
+        expect(off(0xFC)).toBe(14);
+
+        const seen = new Set<number>();
+        for (let i = 0; i < 0xFF; i++) {
+            seen.add(off(i));
+        }
+        for (let i = 0; i < 0xFF; i++) {
+            expect(seen).toContain(i);
+        }
+    });
+    it('3-bit nibble to data offset', () => {
+        // const off = 0x33 * (i % 3) + (0x32 - Math.floor(i / 3));
+        // const off = (i: number) => Math.floor(i / 0x33) + 3 * (0x32 - (i % 0x33));
+        const off = (i: number) => Math.floor(i / 0x33) + 5 * (0x32 - (i % 0x33));
+        const dOff = (i: number) => 3 + 5 * (0x32 - (i % 0x33));
+        const eOff = (i: number) => 4 + 5 * (0x32 - (i % 0x33));
+        const bit = (i: number) => 2 - Math.floor(i / 0x33);
+        expect(off(0x32)).toBe(0);
+        expect(dOff(0x32)).toBe(3);
+        expect(eOff(0x32)).toBe(4);
+        expect(bit(0x32)).toBe(2);
+
+        expect(off(0x65)).toBe(1);
+        expect(dOff(0x65)).toBe(3);
+        expect(eOff(0x65)).toBe(4);
+        expect(bit(0x65)).toBe(1);
+
+        expect(off(0x98)).toBe(2);
+        expect(dOff(0x98)).toBe(3);
+        expect(eOff(0x98)).toBe(4);
+        expect(bit(0x98)).toBe(0);
+
+        expect(off(0x31)).toBe(5);
+        expect(dOff(0x31)).toBe(8);
+        expect(eOff(0x31)).toBe(9);
+
+        expect(off(0x64)).toBe(6);
+        expect(dOff(0x64)).toBe(8);
+        expect(eOff(0x64)).toBe(9);
+
+        expect(off(0x97)).toBe(7);
+        expect(dOff(0x97)).toBe(8);
+        expect(eOff(0x97)).toBe(9);
+
+        expect(off(0x30)).toBe(10);
+        expect(dOff(0x30)).toBe(13);
+        expect(eOff(0x30)).toBe(14);
+
+        const seen = new Set<number>();
+        for (let i = 0; i < 0x99; i++) {
+            seen.add(off(i));
+            seen.add(dOff(i));
+            seen.add(eOff(i));
+        }
+        for (let i = 0; i < 0xFF; i++) {
+            expect(seen).toContain(i);
+        }
+    });
+});
diff --git a/test/js/formats/po.spec.ts b/test/js/formats/po.spec.ts
index fa86d7a..268fc07 100644
--- a/test/js/formats/po.spec.ts
+++ b/test/js/formats/po.spec.ts
@@ -58,7 +58,7 @@ describe('ProDOS format', () => {
         // From Beneith Apple DOS, GAP 1 should have 12-85 0xFF bytes
         const track = disk.tracks[0];
         let numFF = 0;
-        while (track[numFF] == 0xFF && numFF < 0x100) {
+        while (track[numFF] === 0xFF && numFF < 0x100) {
             numFF++;
         }
         expect(numFF).toBeGreaterThanOrEqual(40);
diff --git a/test/js/formats/testdata/16sector.spec.ts b/test/js/formats/testdata/16sector.spec.ts
index 96c9e0a..7308406 100644
--- a/test/js/formats/testdata/16sector.spec.ts
+++ b/test/js/formats/testdata/16sector.spec.ts
@@ -1,4 +1,4 @@
-import { BYTES_BY_SECTOR, BYTES_BY_TRACK, BYTES_IN_ORDER } from './16sector';
+import { BYTES_BY_SECTOR, BYTES_BY_SECTOR_IMAGE, BYTES_BY_TRACK, BYTES_BY_TRACK_IMAGE, BYTES_IN_ORDER } from './16sector';
 
 describe('BYTES_IN_ORDER', () => {
     it('has the correct bytes in track 0, sector 0, byte 0 and byte 1', () => {
@@ -58,6 +58,35 @@ describe('BYTES_BY_SECTOR', () => {
     });
 });
 
+describe('BYTES_BY_SECTOR_IMAGE', () => {
+    it('has the correct bytes in track 0, sector 0, byte 0 and byte 1', () => {
+        const image = BYTES_BY_SECTOR_IMAGE;
+        expect(image[0]).toBe(0);
+        expect(image[1]).toBe(0);
+    });
+
+    it('has the correct bytes in track 0, sector 0', () => {
+        const image = BYTES_BY_SECTOR_IMAGE;
+        for (let i = 0; i < 256; i++) {
+            expect(image[i]).toBe(0);
+        }
+    });
+
+    it('has the correct bytes in track 1, sector 0', () => {
+        const image = BYTES_BY_SECTOR_IMAGE;
+        for (let i = 0; i < 256; i++) {
+            expect(image[1 * 16 * 256 + i]).toBe(0);
+        }
+    });
+
+    it('has the correct bytes in track 30, sector 11', () => {
+        const disk = BYTES_BY_SECTOR_IMAGE;
+        for (let i = 0; i < 256; i++) {
+            expect(disk[((30 * 16) + 11) * 256 + i]).toBe(11);
+        }
+    });
+});
+
 describe('BYTES_BY_TRACK', () => {
     it('has the correct bytes in track 0, sector 0, byte 0 and byte 1', () => {
         const disk = BYTES_BY_TRACK;
@@ -85,4 +114,33 @@ describe('BYTES_BY_TRACK', () => {
             expect(disk[30][11][i]).toBe(30);
         }
     });
-});
\ No newline at end of file
+});
+
+describe('BYTES_BY_TRACK_IMAGE', () => {
+    it('has the correct bytes in track 0, sector 0, byte 0 and byte 1', () => {
+        const image = BYTES_BY_TRACK_IMAGE;
+        expect(image[0]).toBe(0);
+        expect(image[1]).toBe(0);
+    });
+
+    it('has the correct bytes in track 0, sector 0', () => {
+        const image = BYTES_BY_TRACK_IMAGE;
+        for (let i = 0; i < 256; i++) {
+            expect(image[i]).toBe(0);
+        }
+    });
+
+    it('has the correct bytes in track 1, sector 0', () => {
+        const image = BYTES_BY_TRACK_IMAGE;
+        for (let i = 0; i < 256; i++) {
+            expect(image[i + 256 * 16]).toBe(1);
+        }
+    });
+
+    it('has the correct bytes in track 30, sector 11', () => {
+        const image = BYTES_BY_TRACK_IMAGE;
+        for (let i = 0; i < 256; i++) {
+            expect(image[i + ((30 * 16) + 11) * 256]).toBe(30);
+        }
+    });
+});
diff --git a/test/js/formats/testdata/16sector.ts b/test/js/formats/testdata/16sector.ts
index f28d61b..a67fd5b 100644
--- a/test/js/formats/testdata/16sector.ts
+++ b/test/js/formats/testdata/16sector.ts
@@ -1,4 +1,5 @@
 import { memory } from 'js/types';
+import { concat } from 'js/util';
 
 function generateBytesInOrder() {
     const data: memory[][] = [];
@@ -53,3 +54,25 @@ function generateBytesByTrack() {
 }
 
 export const BYTES_BY_TRACK: memory[][] = generateBytesByTrack();
+
+function toImage(disk: memory[][]) {
+    const tracks: Uint8Array[] = [];
+    for (let t = 0; t < disk.length; t++) {
+        const track = concat(...disk[t]);
+        tracks.push(track);
+    }
+    return concat(...tracks);
+}
+
+export const BYTES_BY_SECTOR_IMAGE = toImage(BYTES_BY_SECTOR);
+export const BYTES_BY_TRACK_IMAGE = toImage(BYTES_BY_TRACK);
+
+function randomImage() {
+    const result = new Uint8Array(35 * 16 * 256);
+    for (let i = 0; i < result.length; i++) {
+        result[i] = Math.floor(Math.random() * 256);
+    }
+    return result;
+}
+
+export const RANDOM_IMAGE = randomImage();
diff --git a/test/js/formats/testdata/woz.ts b/test/js/formats/testdata/woz.ts
index b822608..6ab595d 100644
--- a/test/js/formats/testdata/woz.ts
+++ b/test/js/formats/testdata/woz.ts
@@ -1,3 +1,4 @@
+import { byte } from 'js/types';
 import {
     numberToBytes,
     stringToBytes,
@@ -49,7 +50,7 @@ const mockInfo2 = [
  * Track map all pointing to track 0
  */
 
-export const mockTMAP = new Array(160);
+export const mockTMAP = new Array<byte>(160);
 mockTMAP.fill(0);
 
 /**
@@ -58,7 +59,7 @@ mockTMAP.fill(0);
 
 // 24 bits of track data, padded
 
-const mockTrackData = new Array(6646);
+const mockTrackData = new Array<byte>(6646);
 mockTrackData.fill(0);
 mockTrackData[0] = 0xd5;
 mockTrackData[1] = 0xaa;
@@ -82,7 +83,7 @@ const mockTRKS = [
  * Version 2 TRKS structure
  */
 
-const mockTrackMap = new Array(160 * 8);
+const mockTrackMap = new Array<byte>(160 * 8);
 mockTrackMap.fill(0);
 mockTrackMap[0x00] = 0x03;
 mockTrackMap[0x01] = 0x00;
@@ -93,7 +94,7 @@ mockTrackMap[0x07] = 0x00;
 mockTrackMap[0x08] = 0x00;
 mockTrackMap[0x09] = 0x00;
 
-const mockTrackData2 = new Array(512);
+const mockTrackData2 = new Array<byte>(512);
 mockTrackData2.fill(0);
 mockTrackData2[0] = 0xd5;
 mockTrackData2[1] = 0xaa;
diff --git a/test/js/formats/util.ts b/test/js/formats/util.ts
index b1ced14..a96e6c0 100644
--- a/test/js/formats/util.ts
+++ b/test/js/formats/util.ts
@@ -3,18 +3,18 @@ import { memory } from 'js/types';
 export function skipGap(track: memory, start: number = 0): number {
     const end = start + 0x100; // no gap is this big
     let i = start;
-    while (i < end && track[i] == 0xFF) {
+    while (i < end && track[i] === 0xFF) {
         i++;
     }
-    if (i == end) {
-        fail(`found more than 0x100 0xFF bytes after ${start}`);
+    if (i === end) {
+        throw new Error(`found more than 0x100 0xFF bytes after ${start}`);
     }
     return i;
 }
 
 export function compareSequences(track: memory, bytes: number[], pos: number): boolean {
     for (let i = 0; i < bytes.length; i++) {
-        if (track[i + pos] != bytes[i]) {
+        if (track[i + pos] !== bytes[i]) {
             return false;
         }
     }
@@ -24,7 +24,7 @@ export function compareSequences(track: memory, bytes: number[], pos: number): b
 export function expectSequence(track: memory, pos: number, bytes: number[]): number {
     if (!compareSequences(track, bytes, pos)) {
         const track_slice = track.slice(pos, Math.min(track.length, pos + bytes.length));
-        fail(`expected ${bytes} got ${track_slice}`);
+        throw new Error(`expected ${bytes.toString()} got ${track_slice.toString()}`);
     }
     return pos + bytes.length;
 }
diff --git a/test/js/formats/woz.spec.ts b/test/js/formats/woz.spec.ts
index 45df19d..c5a5c5c 100644
--- a/test/js/formats/woz.spec.ts
+++ b/test/js/formats/woz.spec.ts
@@ -1,4 +1,4 @@
-import { WozDisk, ENCODING_BITSTREAM } from 'js/formats/types';
+import { ENCODING_BITSTREAM } from 'js/formats/types';
 import createDiskFromWoz from 'js/formats/woz';
 import {
     mockWoz1,
@@ -19,21 +19,19 @@ describe('woz', () => {
             rawData: mockWoz1
         };
 
-        const disk = createDiskFromWoz(options) as WozDisk;
+        const disk = createDiskFromWoz(options);
         expect(disk).toEqual({
-            name: 'Mock Woz 1',
+            metadata: { name: 'Mock Woz 1', side: undefined },
             readOnly: true,
             encoding: ENCODING_BITSTREAM,
+            format: 'woz',
             trackMap: mockTMAP,
             rawTracks: [new Uint8Array([
                 1, 1, 0, 1, 0, 1, 0, 1,
                 1, 0, 1, 0, 1, 0, 1, 0,
                 1, 0, 0, 1, 0, 1, 1, 0,
             ])],
-            tracks: [new Uint8Array([0xD5, 0xAA, 0x96])],
-        });
-        expect(console.log).toHaveBeenCalledWith(expect.objectContaining({
-            info:  {
+            info: {
                 bitTiming: 0,
                 bootSector: 0,
                 cleaned: 0,
@@ -47,7 +45,7 @@ describe('woz', () => {
                 version: 1,
                 writeProtected: 0
             }
-        }));
+        });
     });
 
     it('can parse Woz version 2', () => {
@@ -58,22 +56,22 @@ describe('woz', () => {
             rawData: mockWoz2
         };
 
-        const disk = createDiskFromWoz(options) as WozDisk;
+        const disk = createDiskFromWoz(options);
         expect(disk).toEqual({
-            name: 'Mock Woz 2',
-            side: 'B',
+            metadata: {
+                name: 'Mock Woz 2',
+                side: 'B',
+            },
             readOnly: true,
             encoding: ENCODING_BITSTREAM,
+            format: 'woz',
             trackMap: mockTMAP,
             rawTracks: [new Uint8Array([
                 1, 1, 0, 1, 0, 1, 0, 1,
                 1, 0, 1, 0, 1, 0, 1, 0,
                 1, 0, 0, 1, 0, 1, 1, 0,
             ])],
-            tracks: [new Uint8Array([0xD5, 0xAA, 0x96])],
-        });
-        expect(console.log).toHaveBeenCalledWith(expect.objectContaining({
-            info:  {
+            info: {
                 bitTiming: 0,
                 bootSector: 0,
                 cleaned: 0,
@@ -87,6 +85,6 @@ describe('woz', () => {
                 version: 2,
                 writeProtected: 0
             }
-        }));
+        });
     });
 });
diff --git a/test/js/rom.test.ts b/test/js/rom.test.ts
index 59599e8..2f00f31 100644
--- a/test/js/rom.test.ts
+++ b/test/js/rom.test.ts
@@ -18,7 +18,7 @@ const roms: { [name: string]: { new(): ROM } } = {
 for (const rom of Object.keys(roms)) {
     describe(`${rom}`, () => {
         it('is constructable', () => {
-            new roms[rom]();
+            expect(new roms[rom]()).not.toBeNull();
         });
     });
 }
diff --git a/test/js/ui/options_modal.spec.ts b/test/js/ui/options_modal.spec.ts
index 7f18d5c..cddb47f 100644
--- a/test/js/ui/options_modal.spec.ts
+++ b/test/js/ui/options_modal.spec.ts
@@ -1,11 +1,14 @@
 /** @jest-environment jsdom */
 import { screen } from '@testing-library/dom';
 import userEvent from '@testing-library/user-event';
+import { Options } from 'js/options';
 
 import {
     BOOLEAN_OPTION,
     SELECT_OPTION,
     OptionHandler,
+} from 'js/options';
+import {
     OptionsModal
 } from 'js/ui/options_modal';
 
@@ -59,10 +62,12 @@ const mockOptionHandler: OptionHandler = {
 };
 
 describe('OptionsModal', () => {
+    let options: Options;
     let modal: OptionsModal;
     beforeEach(() => {
-        modal = new OptionsModal();
-        modal.addOptions(mockOptionHandler);
+        options = new Options();
+        options.addOptions(mockOptionHandler);
+        modal = new OptionsModal(options);
     });
     afterEach(() => {
         localStorage.clear();
@@ -107,31 +112,32 @@ describe('OptionsModal', () => {
 
     describe('getOption', () => {
         beforeEach(() => {
-            modal = new OptionsModal();
-            modal.addOptions(mockOptionHandler);
+            options = new Options();
+            options.addOptions(mockOptionHandler);
+            modal = new OptionsModal(options);
         });
         it('gets boolean', () => {
-            expect(modal.getOption('option_1'))
+            expect(options.getOption('option_1'))
                 .toEqual(false);
-            expect(modal.getOption('option_3'))
+            expect(options.getOption('option_3'))
                 .toEqual(true);
         });
 
         it('gets selector', () => {
-            expect(modal.getOption('option_2'))
+            expect(options.getOption('option_2'))
                 .toEqual('select_1');
         });
     });
 
     describe('setOption', () => {
         it('sets boolean', () => {
-            modal.setOption('option_1', true);
+            options.setOption('option_1', true);
             expect(mockOptionHandler.setOption)
                 .toHaveBeenCalledWith('option_1', true);
         });
 
         it('sets selector', () => {
-            modal.setOption('option_2', 'select_2');
+            options.setOption('option_2', 'select_2');
             expect(mockOptionHandler.setOption)
                 .toHaveBeenCalledWith('option_2', 'select_2');
         });
diff --git a/test/js/util.test.ts b/test/js/util.test.ts
index c47cd7d..f9b06b1 100644
--- a/test/js/util.test.ts
+++ b/test/js/util.test.ts
@@ -1,6 +1,6 @@
 /** @fileoverview Test for utils.ts. */
 
-import { allocMem, allocMemPages, numToString, testables, toBinary, toHex } from '../../js/util';
+import { allocMem, allocMemPages, testables, toBinary, toHex } from '../../js/util';
 
 describe('garbage', () => {
     it('returns 0 <= x <= 255', () => {
@@ -25,16 +25,17 @@ describe('allocMem', () => {
     });
     it('has garbage in the right places', () => {
         const memory = allocMem(0x800);
+        let passed = false;
         for (let i = 0; i < 0x800; i += 0x200) {
-            const passed = memory[i + 0x28] != 0xff
-                && memory[i + 0x29] != 0xff
-                && memory[i + 0x68] != 0xff
-                && memory[i + 0x69] != 0xff;
+            passed = memory[i + 0x28] !== 0xff
+                && memory[i + 0x29] !== 0xff
+                && memory[i + 0x68] !== 0xff
+                && memory[i + 0x69] !== 0xff;
             if (passed) {
-                return;
+                break;
             }
         }
-        fail('garbage not found');
+        expect(passed).toBe(true);
     });
 });
 
@@ -79,21 +80,3 @@ describe('hup', () => {
     // untestable due to direct reference to window.location
 });
 
-describe('numToString', () => {
-    it('packs a zero byte into a string of all zeros', () => {
-        expect(numToString(0x00)).toEqual('\0\0\0\0');
-    });
-    it('packs a byte in the printable ASCII range into a zero-padded string',
-        () => {
-            expect(numToString(0x41)).toEqual('A\0\0\0');
-        });
-    it('packs a word into a string', () => {
-        expect(numToString(0x4142)).toEqual('BA\0\0');
-    });
-    it('packs a 32-bit value into a string', () => {
-        expect(numToString(0x41424344)).toEqual('DCBA');
-    });
-    it('ignores more than 32 bits', () => {
-        expect(numToString(0x4142434445)).toEqual('EDCB');
-    });
-});
diff --git a/test/roms/6502test.ts b/test/roms/6502test.ts
index bbe99b4..4c7a868 100644
--- a/test/roms/6502test.ts
+++ b/test/roms/6502test.ts
@@ -5,7 +5,7 @@ import path from 'path';
 import { MemoryPages, byte } from '../../js/types';
 
 export default class Test6502 implements MemoryPages {
-    private data: Buffer
+    private data: Buffer;
 
     constructor() {
         this.data = fs.readFileSync(path.join(__dirname, '6502_functional_test.bin'));
@@ -13,17 +13,17 @@ export default class Test6502 implements MemoryPages {
 
     start = () => {
         return 0x00;
-    }
+    };
 
     end = () => {
         return 0xff;
-    }
+    };
 
     read = (page: byte, off: byte) => {
         return this.data[page << 8 | off];
-    }
+    };
 
     write = (page: byte, off: byte, val: byte) => {
         this.data[page << 8 | off] = val;
-    }
+    };
 }
diff --git a/test/roms/65C02test.ts b/test/roms/65C02test.ts
index 9eca9c3..784d0fb 100644
--- a/test/roms/65C02test.ts
+++ b/test/roms/65C02test.ts
@@ -5,7 +5,7 @@ import path from 'path';
 import { MemoryPages, byte } from '../../js/types';
 
 export default class Test65C02 implements MemoryPages {
-    private data: Buffer
+    private data: Buffer;
 
     constructor() {
         this.data = fs.readFileSync(path.join(__dirname, '65C02_extended_opcodes_test.bin'));
@@ -13,17 +13,17 @@ export default class Test65C02 implements MemoryPages {
 
     start = () => {
         return 0x00;
-    }
+    };
 
     end = () => {
         return 0xff;
-    }
+    };
 
     read = (page: byte, off: byte) => {
         return this.data[page << 8 | off];
-    }
+    };
 
     write = (page: byte, off: byte, val: byte) => {
         this.data[page << 8 | off] = val;
-    }
+    };
 }
diff --git a/test/util/bios.ts b/test/util/bios.ts
index de3ad3b..786017a 100644
--- a/test/util/bios.ts
+++ b/test/util/bios.ts
@@ -23,6 +23,7 @@ export class Program implements MemoryPages {
     }
 
     write(_page: byte, _off: byte, _val: byte) {
+        // do nothing
     }
 }
 
diff --git a/test/util/image.ts b/test/util/image.ts
index 761e6c2..b727941 100644
--- a/test/util/image.ts
+++ b/test/util/image.ts
@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-non-null-assertion */
 export const createImageFromImageData = (data: ImageData) => {
     const canvas = document.createElement('canvas');
     canvas.width = data.width;
diff --git a/test/util/memory.ts b/test/util/memory.ts
index f46abd3..040ea81 100644
--- a/test/util/memory.ts
+++ b/test/util/memory.ts
@@ -1,7 +1,7 @@
 import { MemoryPages, byte, word } from 'js/types';
 import { assertByte } from './asserts';
 
-export type Log = [address: word, value: byte, types: 'read'|'write']
+export type Log = [address: word, value: byte, types: 'read'|'write'];
 export class TestMemory implements MemoryPages {
     private data: Buffer;
     private logging: boolean = false;
diff --git a/tsconfig.json b/tsconfig.json
index b21c14f..c394e48 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,36 +1,45 @@
 {
   "compilerOptions": {
-      "module": "esnext",
-      "esModuleInterop": true,
-      "allowSyntheticDefaultImports": true,
-      "target": "es6",
-      "lib": ["DOM", "ES6"],
-      "noImplicitAny": true,
-      "noImplicitThis": true,
-      "noUnusedLocals": true,
-      "noUnusedParameters": true,
-      "moduleResolution": "node",
-      "sourceMap": true,
-      "strictNullChecks": true,
-      "outDir": "dist",
-      "baseUrl": ".",
-      "allowJs": true,
-      "paths": {
-          "*": [
-              "node_modules/*",
-              "types/*"
-          ],
-          "js/*": [
-              "js/*"
-          ],
-          "test/*": [
-            "test/*"
-          ]
-      }
+    "jsx": "react",
+    "jsxFactory": "h",
+    "jsxFragmentFactory": "Fragment",
+    "module": "esnext",
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "target": "es6",
+    "lib": ["DOM", "ES6"],
+    "noImplicitAny": true,
+    "noImplicitThis": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "exactOptionalPropertyTypes": true,
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "sourceMap": true,
+    "strictNullChecks": true,
+    "outDir": "dist",
+    "baseUrl": ".",
+    "allowJs": true,
+    "paths": {
+      "*": [
+        "node_modules/*",
+        "types/*"
+      ],
+      "js/*": [
+          "js/*"
+      ],
+      "json/*": [
+        "json/*"
+      ],
+        "test/*": [
+          "test/*"
+      ]
+    }
   },
   "include": [
       "js/**/*",
       "test/**/*",
+      "types/**/*",
       "*.config.js"
   ]
 }
diff --git a/types/styles.d.ts b/types/styles.d.ts
new file mode 100644
index 0000000..8b00847
--- /dev/null
+++ b/types/styles.d.ts
@@ -0,0 +1,4 @@
+declare module '*.module.css' {
+    const classes: { [key: string]: string };
+    export default classes;
+}
diff --git a/webpack.config.js b/webpack.config.js
index b123c54..7cf6efa 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -7,7 +7,7 @@ const baseConfig = {
     module: {
         rules: [
             {
-                test: /\.ts$/i,
+                test: /\.tsx?$/i,
                 use: [
                     {
                         loader: 'ts-loader'
@@ -15,6 +15,30 @@ const baseConfig = {
                 ],
                 exclude: /node_modules/,
             },
+            {
+                test: /\.css$/,
+                use: [
+                    'style-loader',
+                    {
+                        loader: 'css-loader',
+                        options: {
+                            import: false,
+                            modules: {
+                                localIdentName: '[path][name]__[local]',
+                            }
+                        }
+                    }
+                ],
+                include: /\.module\.css$/
+            },
+            {
+                test: /\.css$/,
+                use: [
+                    'style-loader',
+                    'css-loader'
+                ],
+                exclude: /\.module\.css$/
+            }
         ],
     },
     output: {
@@ -24,15 +48,20 @@ const baseConfig = {
         chunkFilename: '[name].bundle.js',
     },
     resolve: {
-        extensions: ['.ts', '.js'],
+        extensions: ['.ts', '.tsx', '.js'],
+        alias: {
+            js: path.resolve(__dirname, 'js/'),
+            json: path.resolve(__dirname, 'json/'),
+        }
     },
 };
 
 const appConfig = merge(baseConfig,
     {
         entry: {
-            main2: path.resolve('js/entry2.js'),
-            main2e: path.resolve('js/entry2e.js')
+            main2: path.resolve('js/entry2.ts'),
+            main2e: path.resolve('js/entry2e.ts'),
+            preact: path.resolve('js/entry.tsx'),
         },
         output: {
             library: {
diff --git a/workers/format.worker.ts b/workers/format.worker.ts
index bb03cfc..21df0e0 100644
--- a/workers/format.worker.ts
+++ b/workers/format.worker.ts
@@ -1,14 +1,3 @@
-/* Copyright 2021 Will Scullin <scullin@scullinsteel.com>
- *
- * Permission to use, copy, modify, distribute, and sell this software and its
- * documentation for any purpose is hereby granted without fee, provided that
- * the above copyright notice appear in all copies and that both that
- * copyright notice and this permission notice appear in supporting
- * documentation.  No representations are made about the suitability of this
- * software for any purpose.  It is provided "as is" without express or
- * implied warranty.
- */
-
 import { debug } from '../js/util';
 import { jsonDecode } from '../js/formats/format_utils';
 import {
@@ -17,12 +6,12 @@ import {
 } from '../js/formats/create_disk';
 import {
     FormatWorkerMessage,
-    Disk,
     DiskProcessedResponse,
     DISK_PROCESSED,
     PROCESS_BINARY,
     PROCESS_JSON_DISK,
     PROCESS_JSON,
+    FloppyDisk,
 } from '../js/formats/types';
 
 debug('Worker loaded');
@@ -31,7 +20,7 @@ addEventListener('message', (message: MessageEvent<FormatWorkerMessage>) => {
     debug('Worker started', message.type);
     const data = message.data;
     const { drive } = data.payload;
-    let disk: Disk | null = null;
+    let disk: FloppyDisk | null = null;
 
     switch (data.type) {
         case PROCESS_BINARY: {