Close Options flyout when clicking an item

.gitignore

@@ -4,6 +4,7 @@ node_modules
 *.css.d.ts
 build
 *.o
+.DS_Store
 
 # Auto-generated by lib/feature-plugin.js
 src/features-worker/index.ts

cli/.gitignore

@@ -1,2 +1,3 @@
 node_modules
 build
+.DS_Store

generic-tsconfig.json

@@ -17,8 +17,7 @@
       "static-build/*": ["src/static-build/*"],
       "client/*": ["src/client/*"],
       "shared/*": ["src/shared/*"],
-      "features/*": ["src/features/*"],
+      "features/*": ["src/features/*"]
-      "react": ["node_modules/preact/compat"]
     }
   }
 }

package-lock.json

@@ -8,27 +8,22 @@
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz",
       "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==",
+      "dev": true,
       "requires": {
         "@babel/highlight": "^7.10.4"
       }
     },
-    "@babel/helper-module-imports": {
-      "version": "7.12.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.12.5.tgz",
-      "integrity": "sha512-SR713Ogqg6++uexFRORf/+nPXMmWIn80TALu0uaFb+iQIUoR7bOC7zBWyzBs5b3tBBJXuyD0cRu1F15GyzjOWA==",
-      "requires": {
-        "@babel/types": "^7.12.5"
-      }
-    },
     "@babel/helper-validator-identifier": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz",
-      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw=="
+      "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==",
+      "dev": true
     },
     "@babel/highlight": {
       "version": "7.10.4",
       "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz",
       "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==",
+      "dev": true,
       "requires": {
         "@babel/helper-validator-identifier": "^7.10.4",
         "chalk": "^2.0.0",
@@ -39,6 +34,7 @@
           "version": "3.2.1",
           "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz",
           "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==",
+          "dev": true,
           "requires": {
             "color-convert": "^1.9.0"
           }
@@ -47,6 +43,7 @@
           "version": "2.4.2",
           "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz",
           "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==",
+          "dev": true,
           "requires": {
             "ansi-styles": "^3.2.1",
             "escape-string-regexp": "^1.0.5",
@@ -57,6 +54,7 @@
           "version": "1.9.3",
           "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz",
           "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==",
+          "dev": true,
           "requires": {
             "color-name": "1.1.3"
           }
@@ -64,150 +62,26 @@
         "color-name": {
           "version": "1.1.3",
           "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz",
-          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU="
+          "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=",
+          "dev": true
         },
         "has-flag": {
           "version": "3.0.0",
           "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz",
-          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0="
+          "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=",
+          "dev": true
         },
         "supports-color": {
           "version": "5.5.0",
           "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
           "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==",
+          "dev": true,
           "requires": {
             "has-flag": "^3.0.0"
           }
         }
       }
     },
-    "@babel/runtime": {
-      "version": "7.12.5",
-      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.12.5.tgz",
-      "integrity": "sha512-plcc+hbExy3McchJCEQG3knOsuh3HH+Prx1P6cLIkET/0dLuQDEnrT+s27Axgc9bqfsmNUNHfscgMUdBpC9xfg==",
-      "requires": {
-        "regenerator-runtime": "^0.13.4"
-      }
-    },
-    "@babel/types": {
-      "version": "7.12.10",
-      "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.10.tgz",
-      "integrity": "sha512-sf6wboJV5mGyip2hIpDSKsr80RszPinEFjsHTalMxZAZkoQ2/2yQzxlcFN52SJqsyPfLtPmenL4g2KB3KJXPDw==",
-      "requires": {
-        "@babel/helper-validator-identifier": "^7.10.4",
-        "lodash": "^4.17.19",
-        "to-fast-properties": "^2.0.0"
-      }
-    },
-    "@emotion/cache": {
-      "version": "10.0.29",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-      "requires": {
-        "@emotion/sheet": "0.9.4",
-        "@emotion/stylis": "0.8.5",
-        "@emotion/utils": "0.11.3",
-        "@emotion/weak-memoize": "0.2.5"
-      }
-    },
-    "@emotion/core": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
-      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/cache": "^10.0.27",
-        "@emotion/css": "^10.0.27",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/sheet": "0.9.4",
-        "@emotion/utils": "0.11.3"
-      }
-    },
-    "@emotion/css": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-      "requires": {
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3",
-        "babel-plugin-emotion": "^10.0.27"
-      }
-    },
-    "@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
-    "@emotion/is-prop-valid": {
-      "version": "0.8.8",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
-      "integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
-      "requires": {
-        "@emotion/memoize": "0.7.4"
-      }
-    },
-    "@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
-    },
-    "@emotion/serialize": {
-      "version": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
-      "requires": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
-      }
-    },
-    "@emotion/sheet": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
-    },
-    "@emotion/styled": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-10.0.27.tgz",
-      "integrity": "sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q==",
-      "requires": {
-        "@emotion/styled-base": "^10.0.27",
-        "babel-plugin-emotion": "^10.0.27"
-      }
-    },
-    "@emotion/styled-base": {
-      "version": "10.0.31",
-      "resolved": "https://registry.npmjs.org/@emotion/styled-base/-/styled-base-10.0.31.tgz",
-      "integrity": "sha512-wTOE1NcXmqMWlyrtwdkqg87Mu6Rj1MaukEoEmEkHirO5IoHDJ8LgCQL4MjJODgxWxXibGR3opGp1p7YvkNEdXQ==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/is-prop-valid": "0.8.8",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3"
-      }
-    },
-    "@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-    },
-    "@emotion/unitless": {
-      "version": "0.7.5",
-      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
-      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
-    },
-    "@emotion/utils": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
-    },
-    "@emotion/weak-memoize": {
-      "version": "0.2.5",
-      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
-      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
-    },
     "@nodelib/fs.scandir": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.3.tgz",
@@ -345,7 +219,8 @@
     "@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=="
+      "integrity": "sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==",
+      "dev": true
     },
     "@types/q": {
       "version": "1.5.4",
@@ -512,59 +387,6 @@
       "integrity": "sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==",
       "dev": true
     },
-    "babel-plugin-emotion": {
-      "version": "10.0.33",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
-      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/serialize": "^0.11.16",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^1.0.5",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7"
-      },
-      "dependencies": {
-        "source-map": {
-          "version": "0.5.7",
-          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
-          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
-        }
-      }
-    },
-    "babel-plugin-macros": {
-      "version": "2.8.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
-      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
-      "requires": {
-        "@babel/runtime": "^7.7.2",
-        "cosmiconfig": "^6.0.0",
-        "resolve": "^1.12.0"
-      },
-      "dependencies": {
-        "cosmiconfig": {
-          "version": "6.0.0",
-          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
-          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
-          "requires": {
-            "@types/parse-json": "^4.0.0",
-            "import-fresh": "^3.1.0",
-            "parse-json": "^5.0.0",
-            "path-type": "^4.0.0",
-            "yaml": "^1.7.2"
-          }
-        }
-      }
-    },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
-    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.0.tgz",
@@ -759,7 +581,8 @@
     "callsites": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
-      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ=="
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true
     },
     "camelcase": {
       "version": "4.1.0",
@@ -1113,39 +936,12 @@
       "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=",
       "dev": true
     },
-    "console-feed": {
-      "version": "3.1.10",
-      "resolved": "https://registry.npmjs.org/console-feed/-/console-feed-3.1.10.tgz",
-      "integrity": "sha512-C0wthrgryvBELl/zaeFrvu5ivmmsvV/0b3S9L8/7BlaNA74R8VL1rC2aNYBdfKkKTzju7KOl+i8qsqH7H9/2Ow==",
-      "requires": {
-        "@emotion/core": "^10.0.10",
-        "@emotion/styled": "^10.0.12",
-        "emotion-theming": "^10.0.10",
-        "linkifyjs": "^2.1.6",
-        "react-inspector": "^5.1.0"
-      }
-    },
     "content-disposition": {
       "version": "0.5.2",
       "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.2.tgz",
       "integrity": "sha1-DPaLud318r55YcOoUXjLhdunjLQ=",
       "dev": true
     },
-    "convert-source-map": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.7.0.tgz",
-      "integrity": "sha512-4FJkXzKXEDB1snCFZlLP4gpC3JILicCpGbzG9f9G7tGqGCzETQ2hWPrcinA9oU4wtf2biUaEH5065UnMeR33oA==",
-      "requires": {
-        "safe-buffer": "~5.1.1"
-      },
-      "dependencies": {
-        "safe-buffer": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
-          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
-        }
-      }
-    },
     "cosmiconfig": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.0.tgz",
@@ -1664,11 +1460,6 @@
         }
       }
     },
-    "csstype": {
-      "version": "2.6.14",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.14.tgz",
-      "integrity": "sha512-2mSc+VEpGPblzAxyeR+vZhJKgYg0Og0nnRi7pmRXFYYxSfnOnW8A5wwQb4n4cE2nIOzqKOAzLCaEX6aBmNEv8A=="
-    },
     "cuint": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/cuint/-/cuint-0.2.2.tgz",
@@ -1811,16 +1602,6 @@
       "integrity": "sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==",
       "dev": true
     },
-    "emotion-theming": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/emotion-theming/-/emotion-theming-10.0.27.tgz",
-      "integrity": "sha512-MlF1yu/gYh8u+sLUqA0YuA9JX0P4Hb69WlKc/9OLo+WCXuX6sy/KoIa+qJimgmr2dWqnypYKYPX37esjDBbhdw==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/weak-memoize": "0.2.5",
-        "hoist-non-react-statics": "^3.3.0"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -1849,6 +1630,7 @@
       "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": {
         "is-arrayish": "^0.2.1"
       }
@@ -1892,7 +1674,8 @@
     "escape-string-regexp": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-1.0.5.tgz",
-      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ="
+      "integrity": "sha1-G2HAViGQqN/2rjuyzwIAyhMLhtQ=",
+      "dev": true
     },
     "esm": {
       "version": "3.2.25",
@@ -2005,11 +1788,6 @@
         "to-regex-range": "^5.0.1"
       }
     },
-    "find-root": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
-    },
     "find-up": {
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
@@ -2144,14 +1922,6 @@
       "integrity": "sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==",
       "dev": true
     },
-    "hoist-non-react-statics": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
-      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
-      "requires": {
-        "react-is": "^16.7.0"
-      }
-    },
     "hosted-git-info": {
       "version": "2.8.8",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz",
@@ -2305,6 +2075,7 @@
       "version": "3.2.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz",
       "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==",
+      "dev": true,
       "requires": {
         "parent-module": "^1.0.0",
         "resolve-from": "^4.0.0"
@@ -2353,7 +2124,8 @@
     "is-arrayish": {
       "version": "0.2.1",
       "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
-      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0="
+      "integrity": "sha1-d8mYQFJ6qOyxqLppe4BkWnqSap0=",
+      "dev": true
     },
     "is-callable": {
       "version": "1.2.0",
@@ -2387,15 +2159,6 @@
       "integrity": "sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=",
       "dev": true
     },
-    "is-dom": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/is-dom/-/is-dom-1.1.0.tgz",
-      "integrity": "sha512-u82f6mvhYxRPKpw8V1N0W8ce1xXwOrQtgGcxl6UCL5zBmZu3is/18K0rR7uFCnMDuAsS/3W54mGL4vsaFUQlEQ==",
-      "requires": {
-        "is-object": "^1.0.1",
-        "is-window": "^1.0.2"
-      }
-    },
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2435,11 +2198,6 @@
       "integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8=",
       "dev": true
     },
-    "is-object": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-object/-/is-object-1.0.2.tgz",
-      "integrity": "sha512-2rRIahhZr2UWb45fIOuvZGpFtz0TyOZLf32KxBbSoUCeZR495zCKlWUKKUByk3geS2eAs7ZAABt0Y/Rx0GiQGA=="
-    },
     "is-path-cwd": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/is-path-cwd/-/is-path-cwd-2.2.0.tgz",
@@ -2506,11 +2264,6 @@
         "has-symbols": "^1.0.1"
       }
     },
-    "is-window": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz",
-      "integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0="
-    },
     "isexe": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz",
@@ -2531,7 +2284,8 @@
     "js-tokens": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
-      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
+      "dev": true
     },
     "js-yaml": {
       "version": "3.14.0",
@@ -2552,7 +2306,8 @@
     "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=="
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "dev": true
     },
     "json-schema-traverse": {
       "version": "0.4.1",
@@ -2572,12 +2327,8 @@
     "lines-and-columns": {
       "version": "1.1.6",
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=",
-    },
+      "dev": true
-    "linkifyjs": {
-      "version": "2.1.9",
-      "resolved": "https://registry.npmjs.org/linkifyjs/-/linkifyjs-2.1.9.tgz",
-      "integrity": "sha512-74ivurkK6WHvHFozVaGtQWV38FzBwSTGNmJolEgFp7QgR2bl6ArUWlvT4GcHKbPe1z3nWYi+VUdDZk16zDOVug=="
     },
     "linkstate": {
       "version": "2.0.0",
@@ -2682,11 +2433,6 @@
         "p-locate": "^4.1.0"
       }
     },
-    "lodash": {
-      "version": "4.17.20",
-      "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz",
-      "integrity": "sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA=="
-    },
     "lodash.camelcase": {
       "version": "4.3.0",
       "resolved": "https://registry.npmjs.org/lodash.camelcase/-/lodash.camelcase-4.3.0.tgz",
@@ -2739,14 +2485,6 @@
         }
       }
     },
-    "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==",
-      "requires": {
-        "js-tokens": "^3.0.0 || ^4.0.0"
-      }
-    },
     "lru-cache": {
       "version": "4.1.5",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-4.1.5.tgz",
@@ -3029,11 +2767,6 @@
         "boolbase": "~1.0.0"
       }
     },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
     "object-inspect": {
       "version": "1.8.0",
       "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz",
@@ -3153,6 +2886,7 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
       "requires": {
         "callsites": "^3.0.0"
       }
@@ -3161,6 +2895,7 @@
       "version": "5.1.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.1.0.tgz",
       "integrity": "sha512-+mi/lmVVNKFNVyLXV31ERiy2CY5E1/F6QtJFEzoChPRwwngMNXRDQ9GJ5WdE2Z2P4AujsOi0/+2qHID68KwfIQ==",
+      "dev": true,
       "requires": {
         "@babel/code-frame": "^7.0.0",
         "error-ex": "^1.3.1",
@@ -3195,7 +2930,8 @@
     "path-parse": {
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.6.tgz",
-      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw=="
+      "integrity": "sha512-GSmOT2EbHrINBf9SR7CDELwlJ8AENk3Qn7OikK4nFYAu3Ote2+JYNVvkpAEQm3/TLNEJFD/xZJjzyxg3KBWOzw==",
+      "dev": true
     },
     "path-to-regexp": {
       "version": "2.2.1",
@@ -3206,7 +2942,8 @@
     "path-type": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
-      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw=="
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "dev": true
     },
     "picomatch": {
       "version": "2.2.2",
@@ -6299,9 +6036,9 @@
       "dev": true
     },
     "preact": {
-      "version": "10.5.5",
+      "version": "10.5.7",
-      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.5.tgz",
+      "resolved": "https://registry.npmjs.org/preact/-/preact-10.5.7.tgz",
-      "integrity": "sha512-5ONLNH1SXMzzbQoExZX4TELemNt+TEDb622xXFNfZngjjM9qtrzseJt+EfiUu4TZ6EJ95X5sE1ES4yqHFSIdhg==",
+      "integrity": "sha512-4oEpz75t/0UNcwmcsjk+BIcDdk68oao+7kxcpc1hQPNs2Oo3ZL9xFz8UBf350mxk/VEdD41L5b4l2dE3Ug3RYg==",
       "dev": true
     },
     "preact-render-to-string": {
@@ -6325,16 +6062,6 @@
       "integrity": "sha1-v77VbV6ad2ZF9LH/eqGjrE+jw4U=",
       "dev": true
     },
-    "prop-types": {
-      "version": "15.7.2",
-      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
-      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
-      "requires": {
-        "loose-envify": "^1.4.0",
-        "object-assign": "^4.1.1",
-        "react-is": "^16.8.1"
-      }
-    },
     "pseudomap": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/pseudomap/-/pseudomap-1.0.2.tgz",
@@ -6390,21 +6117,6 @@
         "strip-json-comments": "~2.0.1"
       }
     },
-    "react-inspector": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/react-inspector/-/react-inspector-5.1.0.tgz",
-      "integrity": "sha512-JAwswiengIcxi4X/Ssb8nf6suOuQsyit8Fxo04+iPKTnPNY3XIOuagjMZSzpJDDKkYcc/ARlySOYZZv626WUvA==",
-      "requires": {
-        "@babel/runtime": "^7.0.0",
-        "is-dom": "^1.0.0",
-        "prop-types": "^15.0.0"
-      }
-    },
-    "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=="
-    },
     "read-pkg": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
@@ -6427,11 +6139,6 @@
         }
       }
     },
-    "regenerator-runtime": {
-      "version": "0.13.7",
-      "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.7.tgz",
-      "integrity": "sha512-a54FxoJDIr27pgf7IgeQGxmqUNYrcV338lf/6gH456HZ/PhX+5BcwHXG9ajESmwe6WRO0tAzRUrRmNONWgkrew=="
-    },
     "registry-auth-token": {
       "version": "3.3.2",
       "resolved": "https://registry.npmjs.org/registry-auth-token/-/registry-auth-token-3.3.2.tgz",
@@ -6455,6 +6162,7 @@
       "version": "1.17.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
       "integrity": "sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==",
+      "dev": true,
       "requires": {
         "path-parse": "^1.0.6"
       }
@@ -6462,7 +6170,8 @@
     "resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
-      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true
     },
     "restore-cursor": {
       "version": "3.1.0",
@@ -7199,11 +6908,6 @@
       "integrity": "sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=",
       "dev": true
     },
-    "to-fast-properties": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/to-fast-properties/-/to-fast-properties-2.0.0.tgz",
-      "integrity": "sha1-3F5pjL0HkmW8c+A3doGk5Og/YW4="
-    },
     "to-regex-range": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/to-regex-range/-/to-regex-range-5.0.1.tgz",
@@ -7399,7 +7103,8 @@
     "yaml": {
       "version": "1.10.0",
       "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.0.tgz",
-      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg=="
+      "integrity": "sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==",
+      "dev": true
     }
   }
 }

package.json

@@ -35,7 +35,7 @@
     "postcss-nested": "^4.2.3",
     "postcss-simple-vars": "^5.0.2",
     "postcss-url": "^8.0.0",
-    "preact": "^10.5.5",
+    "preact": "^10.5.7",
     "preact-render-to-string": "^5.1.11",
     "prettier": "^2.1.2",
     "rollup": "^2.33.1",
@@ -55,7 +55,6 @@
     "*.rs": "rustfmt"
   },
   "dependencies": {
-    "console-feed": "^3.1.10",
     "wasm-feature-detect": "^1.2.9"
   }
 }

src/client/initial-app/App/index.tsx

@@ -12,8 +12,6 @@ import 'shared/custom-els/snack-bar';
 import Intro from 'shared/prerendered-app/Intro';
 import 'shared/custom-els/loading-spinner';
 
-import { Console } from 'console-feed';
-
 const ROUTE_EDITOR = '/editor';
 
 const compressPromise = import('client/lazy-app/Compress');
@@ -117,7 +115,6 @@ export default class App extends Component<Props, State> {
 
     return (
       <div class={style.app}>
-        <Console logs={[]} />
         <file-drop onfiledrop={this.onFileDrop} class={style.drop}>
           {showSpinner ? (
             <loading-spinner class={style.appLoader} />

src/client/lazy-app/Compress/CanvasImage.tsx

@@ -0,0 +1,37 @@
+import { h, Component, createRef } from 'preact';
+import { drawDataToCanvas } from '../util';
+
+export interface CanvasImageProps
+  extends h.JSX.HTMLAttributes<HTMLCanvasElement> {
+  image?: ImageData;
+}
+
+export default class CanvasImage extends Component<CanvasImageProps> {
+  canvas = createRef<HTMLCanvasElement>();
+  componentDidUpdate(prevProps: CanvasImageProps) {
+    if (this.props.image !== prevProps.image) {
+      this.draw(this.props.image);
+    }
+  }
+  componentDidMount() {
+    if (this.props.image) {
+      this.draw(this.props.image);
+    }
+  }
+  draw(image?: ImageData) {
+    const canvas = this.canvas.current;
+    if (!canvas) return;
+    if (!image) canvas.getContext('2d');
+    else drawDataToCanvas(canvas, image);
+  }
+  render({ image, ...props }: CanvasImageProps) {
+    return (
+      <canvas
+        ref={this.canvas}
+        width={image?.width}
+        height={image?.height}
+        {...props}
+      />
+    );
+  }
+}

src/client/lazy-app/Compress/ClickOutsideDetector.tsx

@@ -0,0 +1,54 @@
+import {
+  Component,
+  cloneElement,
+  createRef,
+  toChildArray,
+  ComponentChildren,
+  RefObject,
+} from 'preact';
+
+interface Props {
+  children: ComponentChildren;
+  onClick?(e: MouseEvent | KeyboardEvent): void;
+}
+
+export class ClickOutsideDetector extends Component<Props> {
+  private _roots: RefObject<Element>[] = [];
+
+  private handleClick = (e: MouseEvent) => {
+    let target = e.target as Node;
+    // check if the click came from within any of our child elements:
+    for (const { current: root } of this._roots) {
+      if (root && (root === target || root.contains(target))) return;
+    }
+    const { onClick } = this.props;
+    if (onClick) onClick(e);
+  };
+
+  private handleKey = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') {
+      const { onClick } = this.props;
+      if (onClick) onClick(e);
+    }
+  };
+
+  componentDidMount() {
+    addEventListener('click', this.handleClick, { passive: true });
+    addEventListener('keydown', this.handleKey, { passive: true });
+  }
+
+  componentWillUnmount() {
+    removeEventListener('click', this.handleClick);
+    removeEventListener('keydown', this.handleKey);
+  }
+
+  render({ children }: Props) {
+    this._roots = [];
+    return toChildArray(children).map((child) => {
+      if (typeof child !== 'object') return child;
+      const ref = createRef();
+      this._roots.push(ref);
+      return cloneElement(child, { ref });
+    });
+  }
+}

src/client/lazy-app/Compress/Flyout/index.tsx

@@ -0,0 +1,210 @@
+import {
+  h,
+  cloneElement,
+  Component,
+  VNode,
+  createRef,
+  ComponentChildren,
+  ComponentProps,
+  Fragment,
+  render,
+} from 'preact';
+import * as style from './style.css';
+import 'add-css:./style.css';
+
+type Anchor = 'left' | 'right' | 'top' | 'bottom';
+type Direction = 'left' | 'right' | 'up' | 'down';
+
+const has = (haystack: string | string[] | undefined, needle: string) =>
+  Array.isArray(haystack) ? haystack.includes(needle) : haystack === needle;
+
+interface Props extends Omit<ComponentProps<'aside'>, 'ref'> {
+  showing?: boolean;
+  direction?: Direction | Direction[];
+  anchor?: Anchor;
+  toggle?: VNode;
+  children?: ComponentChildren;
+}
+
+interface State {
+  showing: boolean;
+  hasShown: boolean;
+}
+
+export default class Flyout extends Component<Props, State> {
+  state = {
+    showing: this.props.showing === true,
+    hasShown: this.props.showing === true,
+  };
+
+  private wrap = createRef<HTMLElement>();
+
+  private menu = createRef<HTMLElement>();
+
+  private resizeObserver?: ResizeObserver;
+
+  private shown?: number;
+
+  private dismiss = (event: Event) => {
+    if (this.menu.current && this.menu.current.contains(event.target as Node))
+      return;
+    // prevent toggle buttons from immediately dismissing:
+    if (this.shown && Date.now() - this.shown < 10) return;
+    this.setShowing(false);
+  };
+
+  hide = () => {
+    this.setShowing(false);
+  };
+
+  show = () => {
+    this.setShowing(true);
+  };
+
+  toggle = () => {
+    this.setShowing(!this.state.showing);
+  };
+
+  private setShowing = (showing?: boolean) => {
+    this.shown = Date.now();
+    if (showing) this.setState({ showing: true, hasShown: true });
+    else this.setState({ showing: false });
+  };
+
+  private reposition = () => {
+    const menu = this.menu.current;
+    const wrap = this.wrap.current;
+    if (!menu || !wrap || !this.state.showing) return;
+    const bbox = wrap.getBoundingClientRect();
+
+    const { direction = 'down', anchor = 'right' } = this.props;
+    const { innerWidth, innerHeight } = window;
+
+    const anchorX = has(anchor, 'left') ? bbox.left : bbox.right;
+
+    menu.style.left = menu.style.right = menu.style.top = menu.style.bottom =
+      '';
+
+    if (has(direction, 'left')) {
+      menu.style.right = innerWidth - anchorX + 'px';
+    } else {
+      menu.style.left = anchorX + 'px';
+    }
+    if (has(direction, 'up')) {
+      const anchorY = has(anchor, 'bottom') ? bbox.bottom : bbox.top;
+      menu.style.bottom = innerHeight - anchorY + 'px';
+    } else {
+      const anchorY = has(anchor, 'top') ? bbox.top : bbox.bottom;
+      menu.style.top = anchorY + 'px';
+    }
+  };
+
+  componentWillReceiveProps({ showing }: Props) {
+    if (showing !== this.props.showing) {
+      this.setShowing(showing);
+    }
+  }
+
+  componentDidMount() {
+    addEventListener('click', this.dismiss, { passive: true });
+    addEventListener('resize', this.reposition, { passive: true });
+    if (typeof ResizeObserver === 'function' && this.wrap.current) {
+      this.resizeObserver = new ResizeObserver(this.reposition);
+      this.resizeObserver.observe(this.wrap.current);
+    }
+    if (this.props.showing) this.setShowing(true);
+  }
+
+  componentWillUnmount() {
+    removeEventListener('click', this.dismiss);
+    removeEventListener('resize', this.reposition);
+    if (this.resizeObserver) this.resizeObserver.disconnect();
+  }
+
+  componentDidUpdate(prevProps: Props, prevState: State) {
+    if (this.state.showing && !prevState.showing) {
+      const menu = this.menu.current;
+      if (menu) {
+        this.reposition();
+
+        let toFocus = menu.firstElementChild;
+        for (let child of menu.children) {
+          if (child.hasAttribute('autofocus')) {
+            toFocus = child;
+            break;
+          }
+        }
+        // @ts-ignore-next
+        if (toFocus) toFocus.focus();
+      }
+    }
+  }
+
+  render(
+    { direction, anchor, toggle, children, ...props }: Props,
+    { showing }: State,
+  ) {
+    const toggleProps = {
+      flyoutOpen: showing,
+      onClick: this.toggle,
+    };
+
+    const directionText = Array.isArray(direction)
+      ? direction.join(' ')
+      : direction;
+    const anchorText = Array.isArray(anchor) ? anchor.join(' ') : anchor;
+
+    return (
+      <span
+        class={style.wrap}
+        ref={this.wrap}
+        data-flyout-open={showing ? '' : undefined}
+      >
+        {toggle && cloneElement(toggle, toggleProps)}
+
+        {showing &&
+          createPortal(
+            <aside
+              {...props}
+              class={`${style.flyout} ${props.class || props.className || ''}`}
+              ref={this.menu}
+              data-anchor={anchorText}
+              data-direction={directionText}
+            >
+              {children}
+            </aside>,
+            document.body,
+          )}
+      </span>
+    );
+  }
+}
+
+// not worth pulling in compat
+function createPortal(children: ComponentChildren, parent: Element) {
+  return <Portal parent={parent}>{children}</Portal>;
+}
+// this is probably overly careful, since it works directly rendering into parent
+function createPersistentFragment(parent: Element) {
+  const frag = {
+    nodeType: 11,
+    childNodes: [],
+    appendChild: parent.appendChild.bind(parent),
+    insertBefore: parent.insertBefore.bind(parent),
+    removeChild: parent.removeChild.bind(parent),
+  };
+  return (frag as unknown) as Element;
+}
+class Portal extends Component<{
+  children: ComponentChildren;
+  parent: Element;
+}> {
+  root = createPersistentFragment(this.props.parent);
+  componentWillUnmount() {
+    render(null, this.root);
+  }
+  render() {
+    render(<Fragment>{this.props.children}</Fragment>, this.root);
+    return null;
+  }
+}

src/client/lazy-app/Compress/Flyout/style.css

@@ -0,0 +1,41 @@
+.wrap {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-items: center;
+}
+
+.flyout {
+  display: inline-block;
+  position: fixed;
+  z-index: 100;
+  display: flex;
+  flex-wrap: nowrap;
+  flex-direction: column;
+  align-items: flex-start;
+  overflow: visible;
+  outline: none;
+  will-change: transform, opacity;
+  animation: menuOpen 350ms ease forwards 1;
+  --flyout-offset-y: -20px;
+
+  &[hidden] {
+    display: none;
+  }
+
+  &[data-direction*='left'] {
+    align-items: flex-end;
+  }
+
+  &[data-direction*='up'] {
+    --flyout-offset-y: 20px;
+    flex-direction: column-reverse;
+  }
+}
+
+@keyframes menuOpen {
+  0% {
+    transform: translateY(var(--flyout-offset-y, 0));
+    opacity: 0;
+  }
+}

src/client/lazy-app/Compress/Options/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component } from 'preact';
+import { h, Component, createRef } from 'preact';
 
 import * as style from './style.css';
 import 'add-css:./style.css';
@@ -15,9 +15,10 @@ import {
 import Expander from './Expander';
 import Toggle from './Toggle';
 import Select from './Select';
+import Flyout from '../Flyout';
 import { Options as QuantOptionsComponent } from 'features/processors/quantize/client';
 import { Options as ResizeOptionsComponent } from 'features/processors/resize/client';
-import { CLIIcon, SwapIcon } from 'client/lazy-app/icons';
+import { CLIIcon, MoreIcon, SwapIcon } from 'client/lazy-app/icons';
 
 interface Props {
   index: 0 | 1;
@@ -64,6 +65,8 @@ export default class Options extends Component<Props, State> {
     supportedEncoderMap: undefined,
   };
 
+  menu = createRef<Flyout>();
+
   constructor() {
     super();
     supportedEncoderMapP.then((supportedEncoderMap) =>
@@ -110,10 +113,12 @@ export default class Options extends Component<Props, State> {
 
   private onCopyCliClick = () => {
     this.props.onCopyCliClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   private onCopyToOtherSideClick = () => {
     this.props.onCopyToOtherSideClick(this.props.index);
+    if (this.menu.current) this.menu.current.hide();
   };
 
   render(
@@ -136,23 +141,33 @@ export default class Options extends Component<Props, State> {
           {!encoderState ? null : (
             <div>
               <h3 class={style.optionsTitle}>
-                <div class={style.titleAndButtons}>
+                Edit
-                  Edit
+                <Flyout
+                  ref={this.menu}
+                  class={style.menu}
+                  direction={['up', 'left']}
+                  anchor="right"
+                  toggle={
+                    <button class={style.titleButton}>
+                      <MoreIcon />
+                    </button>
+                  }
+                >
                   <button
-                    class={style.cliButton}
+                    class={style.menuButton}
-                    title="Copy npx command"
                     onClick={this.onCopyCliClick}
                   >
                     <CLIIcon />
+                    Copy npx command
                   </button>
                   <button
-                    class={style.copyOverButton}
+                    class={style.menuButton}
-                    title="Copy settings to other side"
                     onClick={this.onCopyToOtherSideClick}
                   >
                     <SwapIcon />
+                    Copy settings to other side
                   </button>
-                </div>
+                </Flyout>
               </h3>
               <label class={style.sectionEnabler}>
                 Resize

src/client/lazy-app/Compress/Options/style.css

@@ -14,13 +14,21 @@
   background-color: var(--main-theme-color);
   color: var(--header-text-color);
   margin: 0;
-  padding: 10px var(--horizontal-padding);
+  height: 38px;
+  padding: 0 var(--horizontal-padding);
   font-weight: bold;
   font-size: 1.4rem;
   border-bottom: 1px solid var(--off-black);
   transition: all 300ms ease-in-out;
   transition-property: background-color, color;
 
+  display: grid;
+  align-items: center;
+  grid-template-columns: 1fr;
+  grid-auto-columns: max-content;
+  grid-auto-flow: column;
+  gap: 0.8rem 0;
+
   position: sticky;
   top: 0;
   z-index: 1;
@@ -82,36 +90,63 @@
   border-radius: 4px;
 }
 
-.title-and-buttons {
+.menu {
-  grid-template-columns: 1fr;
+  transform: translateY(-10px);
-  grid-auto-columns: max-content;
-  grid-auto-flow: column;
-  display: grid;
-  gap: 0.8rem;
 }
 
 .title-button {
+  position: relative;
+  left: 10px;
   composes: unbutton from global;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0);
+
+  &:hover,
+  &:active {
+    background: rgba(255, 255, 255, 0.3);
+  }
+
   svg {
-    --size: 20px;
+    --size: 24px;
+    fill: var(--header-text-color);
     display: block;
     width: var(--size);
     height: var(--size);
+    padding: 5px;
   }
 }
 
-.cli-button {
+.menu-button {
-  composes: title-button;
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 8px 0;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-radius: 2rem;
+  line-height: 1.1;
+  white-space: nowrap;
+  height: 39px;
+  padding: 0 16px;
+  font-size: 1.2rem;
+  cursor: pointer;
+  color: #fff;
 
-  svg {
+  &:hover {
-    stroke: var(--header-text-color);
+    background: rgba(50, 50, 50, 0.92);
-  }
+  }
-}
+
-
+  &:focus {
-.copy-over-button {
+    box-shadow: 0 0 0 2px #fff;
-  composes: title-button;
+    outline: none;
-
+    z-index: 1;
-  svg {
+  }
-    fill: var(--header-text-color);
+
+  & > svg {
+    position: relative;
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    color: var(--main-theme-color);
   }
 }

src/client/lazy-app/Compress/Output/index.tsx

@@ -1,4 +1,4 @@
-import { h, Component, Fragment } from 'preact';
+import { h, createRef, Component, Fragment } from 'preact';
 import type PinchZoom from './custom-els/PinchZoom';
 import type { ScaleToOpts } from './custom-els/PinchZoom';
 import './custom-els/PinchZoom';
@@ -10,30 +10,37 @@ import {
   ToggleBackgroundIcon,
   AddIcon,
   RemoveIcon,
-  ToggleBackgroundActiveIcon,
   RotateIcon,
+  MoreIcon,
 } from '../../icons';
 import { twoUpHandle } from './custom-els/TwoUp/styles.css';
 import type { PreprocessorState } from '../../feature-meta';
 import { cleanSet } from '../../util/clean-modify';
 import type { SourceImage } from '../../Compress';
 import { linkRef } from 'shared/prerendered-app/util';
+import Flyout from '../Flyout';
 
 interface Props {
   source?: SourceImage;
   preprocessorState?: PreprocessorState;
+  hidden?: boolean;
   mobileView: boolean;
   leftCompressed?: ImageData;
   rightCompressed?: ImageData;
   leftImgContain: boolean;
   rightImgContain: boolean;
-  onPreprocessorChange: (newState: PreprocessorState) => void;
+  onPreprocessorChange?: (newState: PreprocessorState) => void;
+  onShowPreprocessorTransforms?: () => void;
+  onToggleBackground?: () => void;
 }
 
 interface State {
   scale: number;
   editingScale: boolean;
   altBackground: boolean;
+  transform: boolean;
+  menuOpen: boolean;
+  smallControls: boolean;
 }
 
 const scaleToOpts: ScaleToOpts = {
@@ -48,12 +55,18 @@ export default class Output extends Component<Props, State> {
     scale: 1,
     editingScale: false,
     altBackground: false,
+    transform: false,
+    menuOpen: false,
+    smallControls:
+      typeof matchMedia === 'function' &&
+      matchMedia('(max-width: 859px)').matches,
   };
   canvasLeft?: HTMLCanvasElement;
   canvasRight?: HTMLCanvasElement;
   pinchZoomLeft?: PinchZoom;
   pinchZoomRight?: PinchZoom;
   scaleInput?: HTMLInputElement;
+  flyout = createRef<Flyout>();
   retargetedEvents = new WeakSet<Event>();
 
   componentDidMount() {
@@ -75,6 +88,12 @@ export default class Output extends Component<Props, State> {
     if (this.canvasRight && rightDraw) {
       drawDataToCanvas(this.canvasRight, rightDraw);
     }
+
+    if (typeof matchMedia === 'function') {
+      matchMedia('(max-width: 859px)').addEventListener('change', (e) =>
+        this.setState({ smallControls: e.matches }),
+      );
+    }
   }
 
   componentDidUpdate(prevProps: Props, prevState: State) {
@@ -144,12 +163,6 @@ export default class Output extends Component<Props, State> {
     return props.rightCompressed || (props.source && props.source.preprocessed);
   }
 
-  private toggleBackground = () => {
-    this.setState({
-      altBackground: !this.state.altBackground,
-    });
-  };
-
   private zoomIn = () => {
     if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
     this.pinchZoomLeft.scaleTo(this.state.scale * 1.25, scaleToOpts);
@@ -160,17 +173,30 @@ export default class Output extends Component<Props, State> {
     this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
   };
 
-  private onRotateClick = () => {
+  private fitToViewport = () => {
-    const { preprocessorState: inputProcessorState } = this.props;
+    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
-    if (!inputProcessorState) return;
+    const img = this.props.source?.preprocessed;
-
+    if (!img) return;
-    const newState = cleanSet(
+    const scale = Number(
-      inputProcessorState,
+      Math.min(
-      'rotate.rotate',
+        (window.innerWidth - 20) / img.width,
-      (inputProcessorState.rotate.rotate + 90) % 360,
+        (window.innerHeight - 20) / img.height,
+      ).toFixed(2),
     );
+    this.pinchZoomLeft.scaleTo(Number(scale.toFixed(2)), scaleToOpts);
+    this.recenter();
+    // this.hideMenu();
+  };
 
-    this.props.onPreprocessorChange(newState);
+  private recenter = () => {
+    const img = this.props.source?.preprocessed;
+    if (!img || !this.pinchZoomLeft) return;
+    let scale = this.pinchZoomLeft.scale;
+    this.pinchZoomLeft.setTransform({
+      x: (img.width - img.width * scale) / 2,
+      y: (img.height - img.height * scale) / 2,
+      allowChangeEvent: true,
+    });
   };
 
   private onScaleValueFocus = () => {
@@ -253,8 +279,16 @@ export default class Output extends Component<Props, State> {
   };
 
   render(
-    { mobileView, leftImgContain, rightImgContain, source }: Props,
+    {
-    { scale, editingScale, altBackground }: State,
+      source,
+      mobileView,
+      hidden,
+      leftImgContain,
+      rightImgContain,
+      onShowPreprocessorTransforms,
+      onToggleBackground,
+    }: Props,
+    { scale, editingScale, smallControls }: State,
   ) {
     const leftDraw = this.leftDrawable();
     const rightDraw = this.rightDrawable();
@@ -263,9 +297,7 @@ export default class Output extends Component<Props, State> {
 
     return (
       <Fragment>
-        <div
+        <div class={style.output} hidden={hidden}>
-          class={`${style.output} ${altBackground ? style.altBackground : ''}`}
-        >
           <two-up
             legacy-clip-compat
             class={style.twoUp}
@@ -291,7 +323,7 @@ export default class Output extends Component<Props, State> {
                 style={{
                   width: originalImage ? originalImage.width : '',
                   height: originalImage ? originalImage.height : '',
-                  objectFit: leftImgContain ? 'contain' : '',
+                  objectFit: leftImgContain ? 'contain' : undefined,
                 }}
               />
             </pinch-zoom>
@@ -307,15 +339,16 @@ export default class Output extends Component<Props, State> {
                 style={{
                   width: originalImage ? originalImage.width : '',
                   height: originalImage ? originalImage.height : '',
-                  objectFit: rightImgContain ? 'contain' : '',
+                  objectFit: rightImgContain ? 'contain' : undefined,
                 }}
               />
             </pinch-zoom>
           </two-up>
         </div>
-        <div class={style.controls}>
+
+        <div class={style.controls} hidden={hidden}>
           <div class={style.buttonGroup}>
-            <button class={style.firstButton} onClick={this.zoomOut}>
+            <button class={style.button} onClick={this.zoomOut}>
               <RemoveIcon />
             </button>
             {editingScale ? (
@@ -342,18 +375,34 @@ export default class Output extends Component<Props, State> {
             <button class={style.lastButton} onClick={this.zoomIn}>
               <AddIcon />
             </button>
-          </div>
+
-          <div class={style.buttonGroup}>
+            <Flyout
-            <button class={style.firstButton} onClick={this.onRotateClick}>
+              class={style.menu}
-              <RotateIcon />
+              showing={hidden ? false : undefined}
-            </button>
+              anchor="right"
-            <button class={style.lastButton} onClick={this.toggleBackground}>
+              direction={smallControls ? ['down', 'left'] : 'up'}
-              {altBackground ? (
+              toggle={
-                <ToggleBackgroundActiveIcon />
+                <button class={`${style.button} ${style.moreButton}`}>
-              ) : (
+                  <MoreIcon />
-                <ToggleBackgroundIcon />
+                </button>
-              )}
+              }
-            </button>
+            >
+              <button
+                class={style.button}
+                onClick={onShowPreprocessorTransforms}
+              >
+                <RotateIcon /> Rotate & Transform
+              </button>
+              <button class={style.button} onClick={this.fitToViewport}>
+                Fit to viewport
+              </button>
+              <button class={style.button} onClick={this.recenter}>
+                Re-center
+              </button>
+              <button class={style.button} onClick={onToggleBackground}>
+                <ToggleBackgroundIcon /> Change canvas color
+              </button>
+            </Flyout>
           </div>
         </div>
       </Fragment>

src/client/lazy-app/Compress/Output/style.css

@@ -1,20 +1,8 @@
 .output {
   display: contents;
 
-  &::before {
+  &[hidden] {
-    content: '';
+    display: none;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #000;
-    opacity: 0.8;
-    transition: opacity 500ms ease;
-  }
-
-  &.alt-background::before {
-    opacity: 0;
   }
 }
 
@@ -42,16 +30,21 @@
 .controls {
   display: flex;
   justify-content: center;
-  overflow: hidden;
   flex-wrap: wrap;
-  contain: content;
   grid-area: header;
   align-self: center;
   padding: 9px 66px;
   position: relative;
+  /* Had to disable containment because of the overflow menu. */
+  /*
+  contain: content;
+  overflow: hidden;
+  */
+  transition: transform 500ms ease;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
+
   & > * {
     pointer-events: auto;
   }
@@ -62,13 +55,34 @@
     grid-area: viewportOpts;
     align-self: end;
   }
+
+  &[hidden] {
+    visibility: visible;
+    transform: translateY(-200%);
+
+    @media (min-width: 860px) {
+      transform: translateY(200%);
+    }
+  }
 }
 
 .button-group {
   display: flex;
   position: relative;
   z-index: 100;
-  margin: 0 3px;
+
+  & > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 0;
+  }
+
+  & > :not(:nth-last-child(2)) {
+    margin-right: 0;
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
 }
 
 .button,
@@ -76,9 +90,10 @@
   display: flex;
   align-items: center;
   box-sizing: border-box;
+  margin: 4px;
   background-color: rgba(29, 29, 29, 0.92);
   border: 1px solid rgba(0, 0, 0, 0.67);
-  border-width: 1px 0 1px 1px;
+  border-radius: 6px;
   line-height: 1.1;
   white-space: nowrap;
   height: 39px;
@@ -161,3 +176,64 @@ input.zoom {
     pointer-events: auto;
   }
 }
+
+/** Three-dot menu */
+.moreButton {
+  padding: 0 4px;
+
+  & > svg {
+    transform-origin: center;
+    transition: transform 200ms ease;
+  }
+}
+
+.controls [data-flyout-open] {
+  .moreButton {
+    background: rgba(82, 82, 82, 0.92);
+
+    & > svg {
+      transform: rotate(180deg);
+    }
+  }
+
+  &:before {
+    content: '';
+    position: fixed;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(50, 50, 50, 0.4);
+    backdrop-filter: blur(2px) contrast(70%);
+    animation: menuShimFadeIn 350ms ease forwards 1;
+    will-change: opacity;
+    z-index: -1;
+  }
+}
+
+@keyframes menuShimFadeIn {
+  0% {
+    opacity: 0;
+  }
+}
+
+.menu {
+  button {
+    margin: 8px 0;
+    border-radius: 2rem;
+    padding: 0 16px;
+
+    & > svg {
+      position: relative;
+      left: -6px;
+    }
+  }
+
+  h5 {
+    text-transform: uppercase;
+    font-size: 0.8rem;
+    color: #fff;
+    margin: 8px 4px;
+    padding: 10px 0 0;
+  }
+}

src/client/lazy-app/Compress/Transform/Cropper/index.tsx

@@ -0,0 +1,330 @@
+import { h, Component, ComponentChildren } from 'preact';
+import * as style from './style.css';
+import 'add-css:./style.css';
+import { shallowEqual } from 'client/lazy-app/util';
+
+export interface CropBox {
+  left: number;
+  top: number;
+  right: number;
+  bottom: number;
+}
+
+// Minimum CropBox size
+const MIN_SIZE = 2;
+
+export interface Props {
+  size: { width: number; height: number };
+  scale?: number;
+  lockAspect?: boolean;
+  crop: CropBox;
+  onChange?(crop: CropBox): void;
+}
+
+type Edge = keyof CropBox;
+
+interface PointerTrack {
+  x: number;
+  y: number;
+  edges: { edge: Edge; value: number }[];
+  aspect: number | undefined;
+}
+
+interface State {
+  crop: CropBox;
+  pan: boolean;
+}
+
+export default class Cropper extends Component<Props, State> {
+  private pointers = new Map<number, PointerTrack>();
+
+  state = {
+    crop: this.normalizeCrop({ ...this.props.crop }),
+    pan: false,
+  };
+
+  shouldComponentUpdate(nextProps: Props, nextState: State) {
+    if (!shallowEqual(nextState, this.state)) return true;
+    const { size, scale, lockAspect, crop } = this.props;
+    return (
+      size.width !== nextProps.size.width ||
+      size.height !== nextProps.size.height ||
+      scale !== nextProps.scale ||
+      lockAspect !== nextProps.lockAspect ||
+      !shallowEqual(crop, nextProps.crop)
+    );
+  }
+
+  componentWillReceiveProps({ crop }: Props, nextState: State) {
+    const current = nextState.crop || this.state.crop;
+    if (crop !== this.props.crop && !shallowEqual(crop, current)) {
+      // this.setState({ crop: nextProps.crop });
+      this.setCrop(crop);
+    }
+  }
+
+  private normalizeCrop(crop: CropBox) {
+    crop.left = Math.round(Math.max(0, crop.left));
+    crop.top = Math.round(Math.max(0, crop.top));
+    crop.right = Math.round(Math.max(0, crop.right));
+    crop.bottom = Math.round(Math.max(0, crop.bottom));
+    return crop;
+  }
+
+  private setCrop(cropUpdate: Partial<CropBox>) {
+    const crop = this.normalizeCrop({ ...this.state.crop, ...cropUpdate });
+    // ignore crop updates that normalize to the same values
+    const old = this.state.crop;
+    if (
+      crop.left === old.left &&
+      crop.right === old.right &&
+      crop.top === old.top &&
+      crop.bottom === old.bottom
+    ) {
+      return;
+    }
+    this.setState({ crop });
+    if (this.props.onChange) {
+      this.props.onChange(crop);
+    }
+  }
+
+  private onPointerDown = (event: PointerEvent) => {
+    if (event.button !== 0 || this.state.pan) return;
+
+    const target = event.target as SVGElement;
+    const edgeAttr = target.getAttribute('data-edge');
+    if (edgeAttr) {
+      event.stopPropagation();
+      event.preventDefault();
+
+      let aspect;
+      const edges = edgeAttr.split(/ *, */) as Edge[];
+      if (this.props.lockAspect) {
+        if (edges.length === 1) return;
+        const { size } = this.props;
+        const oldCrop = this.state.crop;
+        aspect =
+          (size.width - oldCrop.left - oldCrop.right) /
+          (size.height - oldCrop.top - oldCrop.bottom);
+      }
+
+      this.pointers.set(event.pointerId, {
+        x: event.x,
+        y: event.y,
+        edges: edges.map((edge) => ({ edge, value: this.state.crop[edge] })),
+        aspect,
+      });
+      target.setPointerCapture(event.pointerId);
+    }
+  };
+
+  private onPointerMove = (event: PointerEvent) => {
+    const target = event.target as SVGElement;
+    const down = this.pointers.get(event.pointerId);
+    if (down && target.hasPointerCapture(event.pointerId)) {
+      const { size } = this.props;
+      const oldCrop = this.state.crop;
+      const scale = this.props.scale || 1;
+      let dx = (event.x - down.x) / scale;
+      let dy = (event.y - down.y) / scale;
+
+      if (down.aspect && down.edges.length === 2) {
+        const dir = (dx + dy) / 2;
+        dx = dir * down.aspect;
+        dy = dir / down.aspect;
+      }
+      const crop: Partial<CropBox> = {};
+      for (const { edge, value } of down.edges) {
+        let edgeValue = value;
+        switch (edge) {
+          case 'left':
+            edgeValue += dx;
+            break;
+          case 'right':
+            edgeValue -= dx;
+            break;
+          case 'top':
+            edgeValue += dy;
+            break;
+          case 'bottom':
+            edgeValue -= dy;
+            break;
+        }
+        crop[edge] = edgeValue;
+      }
+
+      // Prevent MOVE from resizing the cropbox:
+      if (crop.left && crop.right) {
+        if (crop.left < 0) crop.right += crop.left;
+        if (crop.right < 0) crop.left += crop.right;
+      } else {
+        // enforce minimum 1px cropbox width
+        if (crop.left) {
+          if (down.aspect) crop.left = Math.max(0, crop.left);
+          else
+            crop.left = Math.min(
+              crop.left,
+              size.width - oldCrop.right - MIN_SIZE,
+            );
+        }
+        if (crop.right) {
+          if (down.aspect) crop.right = Math.max(0, crop.right);
+          crop.right = Math.min(
+            crop.right,
+            size.width - oldCrop.left - MIN_SIZE,
+          );
+        }
+
+        if (
+          down.aspect &&
+          (crop.left ?? oldCrop.left) + (crop.right ?? oldCrop.right) >
+            size.width
+        )
+          return;
+      }
+      if (crop.top && crop.bottom) {
+        if (crop.top < 0) crop.bottom += crop.top;
+        if (crop.bottom < 0) crop.top += crop.bottom;
+      } else {
+        // enforce minimum 1px cropbox height
+        if (crop.top) {
+          if (down.aspect) crop.top = Math.max(0, crop.top);
+          crop.top = Math.min(
+            crop.top,
+            size.height - oldCrop.bottom - MIN_SIZE,
+          );
+        }
+        if (crop.bottom) {
+          if (down.aspect) crop.bottom = Math.max(0, crop.bottom);
+          crop.bottom = Math.min(
+            crop.bottom,
+            size.height - oldCrop.top - MIN_SIZE,
+          );
+        }
+
+        if (
+          down.aspect &&
+          (crop.top ?? oldCrop.top) + (crop.bottom ?? oldCrop.bottom) >
+            size.height
+        )
+          return;
+      }
+
+      this.setCrop(crop);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  };
+
+  private onPointerUp = (event: PointerEvent) => {
+    const target = event.target as SVGElement;
+    const down = this.pointers.get(event.pointerId);
+    if (down && target.hasPointerCapture(event.pointerId)) {
+      this.onPointerMove(event);
+      target.releasePointerCapture(event.pointerId);
+      event.stopPropagation();
+      event.preventDefault();
+      this.pointers.delete(event.pointerId);
+    }
+  };
+
+  private onKeyDown = (event: KeyboardEvent) => {
+    if (event.key === ' ') {
+      if (!this.state.pan) {
+        this.setState({ pan: true });
+      }
+      event.preventDefault();
+    }
+  };
+
+  private onKeyUp = (event: KeyboardEvent) => {
+    if (event.key === ' ') this.setState({ pan: false });
+  };
+
+  componentDidMount() {
+    addEventListener('keydown', this.onKeyDown);
+    addEventListener('keyup', this.onKeyUp);
+  }
+
+  componentWillUnmount() {
+    addEventListener('keydown', this.onKeyDown);
+    addEventListener('keyup', this.onKeyUp);
+  }
+
+  render({ size, scale }: Props, { crop, pan }: State) {
+    const x = crop.left;
+    const y = crop.top;
+    const width = size.width - crop.left - crop.right;
+    const height = size.height - crop.top - crop.bottom;
+
+    const s = (x: number) => x / (scale || 1);
+
+    const clip = `polygon(0 0, 0 100%, 100% 100%, 100% 0, 0 0, ${s(x)}px ${s(
+      y,
+    )}px, ${s(x + width)}px ${s(y)}px, ${s(x + width)}px ${s(
+      y + height,
+    )}px, ${s(x)}px ${s(y + height)}px, ${s(x)}px ${s(y)}px)`;
+
+    return (
+      <svg
+        class={`${style.cropper} ${pan ? style.pan : ''}`}
+        width={size.width + 20}
+        height={size.height + 20}
+        viewBox={`-10 -10 ${size.width + 20} ${size.height + 20}`}
+        style={{
+          // this is hack to force style invalidation in Chrome
+          zoom: (scale || 1).toFixed(3),
+        }}
+        onPointerDown={this.onPointerDown}
+        onPointerMove={this.onPointerMove}
+        onPointerUp={this.onPointerUp}
+      >
+        <rect
+          class={style.background}
+          width={size.width}
+          height={size.height}
+          clip-path={clip}
+        />
+        <svg x={x} y={y} width={width} height={height}>
+          <Freezer>
+            <rect
+              id="box"
+              class={style.cropbox}
+              data-edge="left,right,top,bottom"
+              width="100%"
+              height="100%"
+            />
+
+            <rect class={style.edge} data-edge="top" width="100%" />
+            <rect class={style.edge} data-edge="bottom" width="100%" y="100%" />
+            <rect class={style.edge} data-edge="left" height="100%" />
+            <rect class={style.edge} data-edge="right" height="100%" x="100%" />
+
+            <circle class={style.corner} data-edge="left,top" />
+            <circle class={style.corner} data-edge="right,top" cx="100%" />
+            <circle
+              class={style.corner}
+              data-edge="right,bottom"
+              cx="100%"
+              cy="100%"
+            />
+            <circle class={style.corner} data-edge="left,bottom" cy="100%" />
+          </Freezer>
+        </svg>
+      </svg>
+    );
+  }
+}
+
+interface FreezerProps {
+  children: ComponentChildren;
+}
+class Freezer extends Component<FreezerProps> {
+  shouldComponentUpdate() {
+    return false;
+  }
+  render({ children }: FreezerProps) {
+    return children;
+  }
+}

src/client/lazy-app/Compress/Transform/Cropper/style.css

@@ -0,0 +1,119 @@
+.cropper {
+  position: absolute;
+  left: calc(-10px / var(--scale, 1));
+  top: calc(-10px / var(--scale, 1));
+  right: calc(-10px / var(--scale, 1));
+  bottom: calc(-10px / var(--scale, 1));
+  shape-rendering: crispedges;
+  overflow: hidden;
+  contain: strict;
+  transform-origin: 0 0;
+  transform: scale(calc(1 / var(--scale))) !important;
+  zoom: var(--scale, 1);
+
+  &.pan {
+    cursor: grabbing;
+    & * {
+      pointer-events: none;
+    }
+  }
+
+  & > svg {
+    margin: -10px;
+    padding: 10px;
+    overflow: visible;
+    contain: strict;
+    /* overflow: visible; */
+  }
+}
+
+.background {
+  pointer-events: none;
+  fill: rgba(0, 0, 0, 0.25);
+}
+
+.cropbox {
+  fill: none;
+  stroke: white;
+  stroke-width: calc(1.5px / var(--scale, 1));
+  stroke-dasharray: calc(5px / var(--scale, 1)), calc(5px / var(--scale, 1));
+  stroke-dashoffset: 50%;
+  /* Accept pointer input even though this is unpainted transparent */
+  pointer-events: all;
+  cursor: move;
+
+  /* animation: ants 1s linear forwards infinite; */
+}
+/*
+@keyframes ants {
+  0% { stroke-dashoffset: 0; }
+  100% { stroke-dashoffset: -12; }
+}
+*/
+
+.edge {
+  fill: #aaa;
+  opacity: 0;
+  transition: opacity 250ms ease;
+  z-index: 2;
+  pointer-events: all;
+  --edge-width: calc(10px / var(--scale, 1));
+
+  @media (max-width: 779px) {
+    --edge-width: calc(20px / var(--scale, 1));
+    fill: rgba(0, 0, 0, 0.01);
+  }
+
+  &[data-edge='left'],
+  &[data-edge='right'] {
+    cursor: ew-resize;
+    transform: translate(calc(var(--edge-width, 10px) / -2), 0);
+    width: var(--edge-width, 10px);
+  }
+  &[data-edge='top'],
+  &[data-edge='bottom'] {
+    cursor: ns-resize;
+    transform: translate(0, calc(var(--edge-width, 10px) / -2));
+    height: var(--edge-width, 10px);
+  }
+
+  &:hover,
+  &:active {
+    opacity: 0.1;
+    transition: none;
+  }
+}
+
+.corner {
+  r: calc(4px / var(--scale, 1));
+  stroke-width: calc(4px / var(--scale, 1));
+  stroke: rgba(225, 225, 225, 0.01);
+  fill: white;
+  shape-rendering: geometricprecision;
+  pointer-events: all;
+  transition: fill 250ms ease, stroke 250ms ease;
+
+  &:hover,
+  &:active {
+    stroke: rgba(225, 225, 225, 0.5);
+    transition: none;
+  }
+
+  @media (max-width: 779px) {
+    r: calc(10 / var(--scale, 1));
+    stroke-width: calc(2 / var(--scale, 1));
+  }
+
+  &[data-edge='left,top'] {
+    cursor: nw-resize;
+  }
+  &[data-edge='right,top'] {
+    cursor: ne-resize;
+  }
+  &[data-edge='right,bottom'] {
+    cursor: se-resize;
+  }
+  &[data-edge='left,bottom'] {
+    cursor: sw-resize;
+  }
+}

src/client/lazy-app/Compress/Transform/index.tsx

@@ -0,0 +1,587 @@
+import {
+  h,
+  Component,
+  Fragment,
+  createRef,
+  FunctionComponent,
+  ComponentChildren,
+} from 'preact';
+import type {
+  default as PinchZoom,
+  ScaleToOpts,
+} from '../Output/custom-els/PinchZoom';
+import '../Output/custom-els/PinchZoom';
+import * as style from './style.css';
+import 'add-css:./style.css';
+import {
+  AddIcon,
+  CheckmarkIcon,
+  CompareIcon,
+  FlipHorizontallyIcon,
+  FlipVerticallyIcon,
+  RemoveIcon,
+  RotateClockwiseIcon,
+  RotateCounterClockwiseIcon,
+  SwapIcon,
+} from '../../icons';
+import { cleanSet } from '../../util/clean-modify';
+import type { SourceImage } from '../../Compress';
+import { PreprocessorState } from 'client/lazy-app/feature-meta';
+import Cropper, { CropBox } from './Cropper';
+import CanvasImage from '../CanvasImage';
+import Expander from '../Options/Expander';
+import Select from '../Options/Select';
+import Checkbox from '../Options/Checkbox';
+
+const ROTATE_ORIENTATIONS = [0, 90, 180, 270] as const;
+
+const cropPresets = {
+  square: {
+    name: 'Square',
+    ratio: 1,
+  },
+  '4:3': {
+    name: '4:3',
+    ratio: 4 / 3,
+  },
+  '16:9': {
+    name: '16:9',
+    ratio: 16 / 9,
+  },
+  '16:10': {
+    name: '16:10',
+    ratio: 16 / 10,
+  },
+};
+
+type CropPresetId = keyof typeof cropPresets;
+
+interface Props {
+  source: SourceImage;
+  preprocessorState: PreprocessorState;
+  mobileView: boolean;
+  onCancel?(): void;
+  onSave?(e: { preprocessorState: PreprocessorState }): void;
+}
+
+interface State {
+  scale: number;
+  editingScale: boolean;
+  rotate: typeof ROTATE_ORIENTATIONS[number];
+  // crop: false | CropBox;
+  crop: CropBox;
+  cropPreset: keyof typeof cropPresets | undefined;
+  lockAspect: boolean;
+  flip: PreprocessorState['flip'];
+}
+
+const scaleToOpts: ScaleToOpts = {
+  originX: '50%',
+  originY: '50%',
+  relativeTo: 'container',
+  allowChangeEvent: true,
+};
+
+export default class Transform extends Component<Props, State> {
+  state: State = {
+    scale: 1,
+    editingScale: false,
+    cropPreset: undefined,
+    lockAspect: false,
+    ...this.fromPreprocessorState(this.props.preprocessorState),
+  };
+  pinchZoom = createRef<PinchZoom>();
+  scaleInput = createRef<HTMLInputElement>();
+
+  // static getDerivedStateFromProps({ source, preprocessorState }: Props) {
+  //   return {
+  //     rotate: preprocessorState.rotate.rotate || 0,
+  //     crop: preprocessorState.crop || false,
+  //     flip: preprocessorState.flip || { horizontal: false, vertical: false },
+  //   };
+  // }
+
+  componentWillReceiveProps(
+    { source, preprocessorState }: Props,
+    { crop, cropPreset }: State,
+  ) {
+    if (preprocessorState !== this.props.preprocessorState) {
+      this.setState(this.fromPreprocessorState(preprocessorState));
+    }
+    const { width, height } = source.decoded;
+    const cropWidth = width - crop.left - crop.right;
+    const cropHeight = height - crop.top - crop.bottom;
+    for (const [id, preset] of Object.entries(cropPresets)) {
+      if (cropHeight * preset.ratio === cropWidth) {
+        if (cropPreset !== id) {
+          this.setState({ cropPreset: id as CropPresetId });
+        }
+        break;
+      }
+    }
+  }
+
+  private fromPreprocessorState(preprocessorState?: PreprocessorState) {
+    const state: Pick<State, 'rotate' | 'crop' | 'flip'> = {
+      rotate: preprocessorState ? preprocessorState.rotate.rotate : 0,
+      crop: Object.assign(
+        {
+          left: 0,
+          right: 0,
+          top: 0,
+          bottom: 0,
+        },
+        (preprocessorState && preprocessorState.crop) || {},
+      ),
+      flip: Object.assign(
+        {
+          horizontal: false,
+          vertical: false,
+        },
+        (preprocessorState && preprocessorState.flip) || {},
+      ),
+    };
+    return state;
+  }
+
+  private save = () => {
+    const { preprocessorState, onSave } = this.props;
+    const { rotate, crop, flip } = this.state;
+
+    let newState = cleanSet(preprocessorState, 'rotate.rotate', rotate);
+    newState = cleanSet(newState, 'crop', crop);
+    newState = cleanSet(newState, 'flip', flip);
+
+    if (onSave) onSave({ preprocessorState: newState });
+  };
+
+  private cancel = () => {
+    const { onCancel, onSave } = this.props;
+    if (onCancel) onCancel();
+    else if (onSave)
+      onSave({ preprocessorState: this.props.preprocessorState });
+  };
+
+  private zoomIn = () => {
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+    this.pinchZoom.current.scaleTo(this.state.scale * 1.25, scaleToOpts);
+  };
+
+  private zoomOut = () => {
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+    this.pinchZoom.current.scaleTo(this.state.scale / 1.25, scaleToOpts);
+  };
+
+  private onScaleValueFocus = () => {
+    this.setState({ editingScale: true }, () => {
+      if (this.scaleInput.current) {
+        // Firefox unfocuses the input straight away unless I force a style
+        // calculation here. I have no idea why, but it's late and I'm quite
+        // tired.
+        getComputedStyle(this.scaleInput.current).transform;
+        this.scaleInput.current.focus();
+      }
+    });
+  };
+
+  private onScaleInputBlur = () => {
+    this.setState({ editingScale: false });
+  };
+
+  private onScaleInputChanged = (event: Event) => {
+    const target = event.target as HTMLInputElement;
+    const percent = parseFloat(target.value);
+    if (isNaN(percent)) return;
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+
+    this.pinchZoom.current.scaleTo(percent / 100, scaleToOpts);
+  };
+
+  private onPinchZoomChange = () => {
+    if (!this.pinchZoom.current) throw Error('Missing pinch-zoom element');
+    this.setState({
+      scale: this.pinchZoom.current.scale,
+    });
+  };
+
+  private onCropChange = (crop: CropBox) => {
+    this.setState({ crop });
+  };
+
+  private onCropPresetChange = (event: Event) => {
+    const { value } = event.target as HTMLSelectElement;
+    const cropPreset = value ? (value as keyof typeof cropPresets) : undefined;
+    const crop = { ...this.state.crop };
+    if (cropPreset) {
+      const preset = cropPresets[cropPreset];
+      const { width, height } = this.props.source.decoded;
+      const w = width - crop.left - crop.right;
+      const h = w / preset.ratio;
+      crop.bottom = height - crop.top - h;
+      if (crop.bottom < 0) {
+        crop.top += crop.bottom;
+        crop.bottom = 0;
+      }
+    }
+    this.setState({
+      crop,
+      cropPreset,
+      lockAspect: !!cropPreset,
+    });
+  };
+
+  private swapCropDimensions = () => {
+    const { width, height } = this.props.source.decoded;
+    let { left, right, top, bottom } = this.state.crop;
+    const cropWidth = width - left - right;
+    const cropHeight = height - top - bottom;
+    const centerX = left - right;
+    const centerY = top - bottom;
+    const crop = {
+      top: (width - cropWidth) / 2 + centerY / 2,
+      bottom: (width - cropWidth) / 2 - centerY / 2,
+      left: (height - cropHeight) / 2 + centerX / 2,
+      right: (height - cropHeight) / 2 - centerX / 2,
+    };
+    this.setCrop(crop);
+  };
+
+  private setCrop(crop: CropBox) {
+    if (crop.top < 0) {
+      crop.bottom += crop.top;
+      crop.top = 0;
+    }
+    if (crop.bottom < 0) {
+      crop.top += crop.bottom;
+      crop.bottom = 0;
+    }
+    if (crop.left < 0) {
+      crop.right += crop.left;
+      crop.left = 0;
+    }
+    if (crop.right < 0) {
+      crop.left += crop.right;
+      crop.right = 0;
+    }
+    this.setState({ crop });
+  }
+
+  // yeah these could just += 90
+  private rotateClockwise = () => {
+    let { rotate, crop } = this.state;
+    this.setState({
+      rotate: ((rotate + 90) % 360) as typeof ROTATE_ORIENTATIONS[number],
+      crop: {
+        top: crop.left,
+        left: crop.bottom,
+        bottom: crop.right,
+        right: crop.top,
+      },
+    });
+  };
+
+  private rotateCounterClockwise = () => {
+    let { rotate, crop } = this.state;
+    this.setState({
+      rotate: (rotate
+        ? rotate - 90
+        : 270) as typeof ROTATE_ORIENTATIONS[number],
+      crop: {
+        top: crop.right,
+        right: crop.bottom,
+        bottom: crop.left,
+        left: crop.top,
+      },
+    });
+  };
+
+  private flipHorizontally = () => {
+    const { horizontal, vertical } = this.state.flip;
+    this.setState({ flip: { horizontal: !horizontal, vertical } });
+  };
+
+  private flipVertically = () => {
+    const { horizontal, vertical } = this.state.flip;
+    this.setState({ flip: { horizontal, vertical: !vertical } });
+  };
+
+  private toggleLockAspect = () => {
+    this.setState({ lockAspect: !this.state.lockAspect });
+  };
+
+  private setCropWidth = (
+    event: preact.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
+    const { width, height } = this.props.source.decoded;
+    const newWidth = Math.min(width, parseInt(event.currentTarget.value, 10));
+    let { top, right, bottom, left } = this.state.crop;
+    const aspect = (width - left - right) / (height - top - bottom);
+    right = width - newWidth - left;
+    if (this.state.lockAspect) {
+      const newHeight = newWidth / aspect;
+      if (newHeight > height) return;
+      bottom = height - newHeight - top;
+    }
+    this.setCrop({ top, right, bottom, left });
+  };
+
+  private setCropHeight = (
+    event: preact.JSX.TargetedEvent<HTMLInputElement, Event>,
+  ) => {
+    const { width, height } = this.props.source.decoded;
+    const newHeight = Math.min(height, parseInt(event.currentTarget.value, 10));
+    let { top, right, bottom, left } = this.state.crop;
+    const aspect = (width - left - right) / (height - top - bottom);
+    bottom = height - newHeight - top;
+    if (this.state.lockAspect) {
+      const newWidth = newHeight * aspect;
+      if (newWidth > width) return;
+      right = width - newWidth - left;
+    }
+    this.setCrop({ top, right, bottom, left });
+  };
+
+  render(
+    { mobileView, source }: Props,
+    { scale, editingScale, rotate, flip, crop, cropPreset, lockAspect }: State,
+  ) {
+    const image = source.decoded;
+
+    const width = source.decoded.width - crop.left - crop.right;
+    const height = source.decoded.height - crop.top - crop.bottom;
+
+    let transform =
+      `rotate(${rotate}deg) ` +
+      `scale(${flip.horizontal ? -1 : 1}, ${flip.vertical ? -1 : 1})`;
+
+    return (
+      <Fragment>
+        <CancelButton onClick={this.cancel} />
+        <SaveButton onClick={this.save} />
+
+        <div class={style.transform}>
+          <pinch-zoom
+            class={style.pinchZoom}
+            onChange={this.onPinchZoomChange}
+            ref={this.pinchZoom}
+          >
+            {/* <Backdrop width={image.width} height={image.height} /> */}
+            <div
+              class={style.wrap}
+              style={{
+                width: image.width,
+                height: image.height,
+              }}
+            >
+              <CanvasImage
+                class={style.pinchTarget}
+                image={image}
+                style={{ transform }}
+              />
+              {crop && (
+                <Cropper
+                  size={{ width: image.width, height: image.height }}
+                  scale={scale}
+                  lockAspect={lockAspect}
+                  crop={crop}
+                  onChange={this.onCropChange}
+                />
+              )}
+            </div>
+          </pinch-zoom>
+        </div>
+
+        <div class={style.controls}>
+          <div class={style.zoomControls}>
+            <button class={style.button} onClick={this.zoomOut}>
+              <RemoveIcon />
+            </button>
+            {editingScale ? (
+              <input
+                type="number"
+                step="1"
+                min="1"
+                max="1000000"
+                ref={this.scaleInput}
+                class={style.zoom}
+                value={Math.round(scale * 100)}
+                onInput={this.onScaleInputChanged}
+                onBlur={this.onScaleInputBlur}
+              />
+            ) : (
+              <span
+                class={style.zoom}
+                tabIndex={0}
+                onFocus={this.onScaleValueFocus}
+              >
+                <span class={style.zoomValue}>{Math.round(scale * 100)}</span>%
+              </span>
+            )}
+            <button class={style.button} onClick={this.zoomIn}>
+              <AddIcon />
+            </button>
+          </div>
+        </div>
+
+        <div class={style.options}>
+          <h3 class={style.optionsTitle}>Modify Source</h3>
+
+          <div class={style.optionsSection}>
+            <h4 class={style.optionsSectionTitle}>Crop</h4>
+            <div class={style.optionOneCell}>
+              <Select
+                large
+                value={cropPreset}
+                onChange={this.onCropPresetChange}
+              >
+                <option value="">Custom</option>
+                {Object.entries(cropPresets).map(([type, preset]) => (
+                  <option value={type}>{preset.name}</option>
+                ))}
+              </Select>
+            </div>
+            <label class={style.optionCheckbox}>
+              <Checkbox checked={lockAspect} onClick={this.toggleLockAspect} />
+              Lock aspect-ratio
+            </label>
+            <div class={style.optionsDimensions}>
+              <input
+                type="number"
+                name="width"
+                value={width}
+                title="Crop width"
+                onInput={this.setCropWidth}
+              />
+              <button
+                class={style.optionsButton}
+                title="swap"
+                onClick={this.swapCropDimensions}
+              >
+                <SwapIcon />
+              </button>
+              <input
+                type="number"
+                name="height"
+                value={height}
+                title="Crop height"
+                onInput={this.setCropHeight}
+              />
+            </div>
+
+            <div class={style.optionButtonRow}>
+              Flip
+              <button
+                class={style.optionsButton}
+                data-active={flip.vertical}
+                title="Flip vertically"
+                onClick={this.flipVertically}
+              >
+                <FlipVerticallyIcon />
+              </button>
+              <button
+                class={style.optionsButton}
+                data-active={flip.horizontal}
+                title="Flip horizontally"
+                onClick={this.flipHorizontally}
+              >
+                <FlipHorizontallyIcon />
+              </button>
+            </div>
+
+            <div class={style.optionButtonRow}>
+              Rotate
+              <button
+                class={style.optionsButton}
+                title="Rotate clockwise"
+                onClick={this.rotateClockwise}
+              >
+                <RotateClockwiseIcon />
+              </button>
+              <button
+                class={style.optionsButton}
+                title="Rotate counter-clockwise"
+                onClick={this.rotateCounterClockwise}
+              >
+                <RotateCounterClockwiseIcon />
+              </button>
+            </div>
+          </div>
+        </div>
+      </Fragment>
+    );
+  }
+}
+
+const CancelButton = ({ onClick }: { onClick: () => void }) => (
+  <button class={style.cancel} onClick={onClick}>
+    <svg viewBox="0 0 80 80" width="80" height="80">
+      <path d="M8.06 40.98c-.53-7.1 4.05-14.52 9.98-19.1s13.32-6.35 22.13-6.43c8.84-.12 19.12 1.51 24.4 7.97s5.6 17.74 1.68 26.97c-3.89 9.26-11.97 16.45-20.46 18-8.43 1.55-17.28-2.62-24.5-8.08S8.54 48.08 8.07 40.98z" />
+    </svg>
+    <CompareIcon class={style.icon} />
+    <span>Cancel</span>
+  </button>
+);
+
+const SaveButton = ({ onClick }: { onClick: () => void }) => (
+  <button class={style.save} onClick={onClick}>
+    <svg viewBox="0 0 89 87" width="89" height="87">
+      <path
+        fill="#0c99ff"
+        opacity=".7"
+        d="M27.3 71.9c-8-4-15.6-12.3-16.9-21-1.2-8.7 4-17.8 10.5-26s14.4-15.6 24-16 21.2 6 28.6 16.5c7.4 10.5 10.8 25 6.6 34S64.1 71.7 54 73.5c-10.2 2-18.7 2.3-26.7-1.6z"
+      />
+      <path
+        fill="#0c99ff"
+        opacity=".7"
+        d="M14.6 24.8c4.3-7.8 13-15 21.8-15.7 8.7-.8 17.5 4.8 25.4 11.8 7.8 6.9 14.8 15.2 14.8 24.9s-7.2 20.7-18 27.6c-10.9 6.8-25.6 9.5-34.3 4.8S13 61.6 11.6 51.4c-1.3-10.3-1.3-18.8 3-26.6z"
+      />
+    </svg>
+    <CheckmarkIcon class={style.icon} />
+  </button>
+);
+
+interface BackdropProps {
+  width: number;
+  height: number;
+}
+
+/** @TODO this could at least use clip-path. It's too expensive this way. */
+class Backdrop extends Component<BackdropProps> {
+  shouldComponentUpdate({ width, height }: BackdropProps) {
+    return width !== this.props.width || height !== this.props.height;
+  }
+
+  render({ width, height }: BackdropProps) {
+    const transform =
+      `transform-origin: 50% 50%; transform: translate(var(--x), var(--y)) ` +
+      `translate(-${width / 2}px, -${height / 2}px) ` +
+      `scale(calc(var(--scale, 1) * 0.99999));`;
+    return (
+      <svg
+        class={style.backdrop}
+        preserveAspectRatio="xMidYMid meet"
+        width="100%"
+        height="100%"
+        shape-rendering="optimizeSpeed"
+      >
+        <mask id="bgmask">
+          <rect width="100%" height="100%" fill="white" />
+          <rect
+            style={transform}
+            width={width}
+            height={height}
+            x="50%"
+            y="50%"
+            fill="black"
+          />
+        </mask>
+        <rect
+          class={style.backdropArea}
+          width="100%"
+          height="100%"
+          mask="url(#bgmask)"
+        />
+      </svg>
+    );
+  }
+}

src/client/lazy-app/Compress/Transform/style.css

@@ -0,0 +1,356 @@
+.transform {
+  display: block;
+}
+
+.wrap {
+  overflow: visible;
+
+  /*
+  & > canvas {
+    transition: transform 150ms ease;
+  }
+  */
+}
+
+.backdrop {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  transform: none !important;
+  will-change: initial !important;
+  contain: strict;
+
+  & * {
+    contain: strict;
+  }
+  /* background: rgba(255, 0, 0, 0.5); */
+}
+
+.backdropArea {
+  fill: rgba(0, 0, 0, 0.25);
+}
+
+.pinch-zoom {
+  composes: abs-fill from global;
+  outline: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.pinch-target {
+  /* This fixes a severe painting bug in Chrome.
+   * We should try to remove this once the issue is fixed.
+   * https://bugs.chromium.org/p/chromium/issues/detail?id=870222#c10 */
+  will-change: auto;
+  /* Prevent the image becoming misshapen due to default flexbox layout. */
+  flex-shrink: 0;
+}
+
+.cancel,
+.save {
+  composes: unbutton from global;
+  position: absolute;
+  padding: 0;
+  z-index: 2;
+}
+
+.save {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  display: grid;
+  align-items: center;
+  justify-items: center;
+
+  & > * {
+    grid-area: 1/1/1/1;
+    fill: #fff;
+  }
+}
+
+/* @TODO use grid */
+.cancel {
+  fill: rgba(0, 0, 0, 0.7);
+
+  & > svg:not(.icon) {
+    display: block;
+    margin: -8px 0;
+    width: 80px;
+    height: 80px;
+  }
+
+  & > .icon {
+    position: absolute;
+    left: 28px;
+    top: 22px;
+    fill: #fff;
+  }
+
+  & > span {
+    display: inline-block;
+    padding: 4px 10px;
+    border-radius: 1rem;
+    background: rgba(0, 0, 0, 0.7);
+    font-size: 80%;
+    color: #fff;
+  }
+
+  &:hover,
+  &:focus {
+    fill: rgba(0, 0, 0, 0.9);
+
+    & > span {
+      background: rgba(0, 0, 0, 0.9);
+    }
+  }
+}
+
+.options {
+  position: fixed;
+  right: 0;
+  bottom: 78px;
+  color: #fff;
+  font-size: 1.2rem;
+  display: flex;
+  flex-flow: column;
+  max-width: 250px;
+  margin: 0;
+  width: calc(100% - 60px);
+  max-height: 100%;
+  overflow: hidden;
+  align-self: end;
+  border-radius: var(--options-radius) 0 0 var(--options-radius);
+  animation: slideInFromRight 500ms ease-out forwards 1;
+  --horizontal-padding: 15px;
+  --main-theme-color: var(--blue);
+
+  /* Hide on mobile (for now) */
+  @media (max-width: 599px) {
+    display: none;
+  }
+}
+@keyframes slideInFromRight {
+  0% {
+    transform: translateX(100%);
+  }
+}
+
+.options-title {
+  background-color: var(--main-theme-color);
+  color: var(--dark-text);
+  margin: 0;
+  padding: 10px var(--horizontal-padding);
+  font-weight: bold;
+  font-size: 1.4rem;
+  border-bottom: 1px solid var(--off-black);
+}
+
+.options-section {
+  padding: 5px 0;
+  background: var(--off-black);
+}
+
+.options-section-title {
+  font: inherit;
+  margin: 0;
+  padding: 5px var(--horizontal-padding);
+}
+
+.option-base {
+  display: grid;
+  gap: 0.7em;
+  align-items: center;
+  padding: 5px var(--horizontal-padding);
+}
+
+.options-button {
+  composes: unbutton from global;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid var(--dark-gray);
+  color: var(--white);
+
+  &:hover,
+  &:focus {
+    background-color: var(--off-black);
+    border-color: var(--med-gray);
+  }
+
+  &[data-active] {
+    background-color: var(--dark-gray);
+    border-color: var(--med-gray);
+  }
+}
+
+.options-dimensions {
+  composes: option-base;
+  grid-template-columns: 1fr 0fr 1fr;
+
+  input {
+    background: var(--white);
+    color: var(--black);
+    font: inherit;
+    border: none;
+    width: 100%;
+    padding: 4px;
+    box-sizing: border-box;
+    border-radius: 4px;
+  }
+}
+
+.option-one-cell {
+  composes: option-base;
+  grid-template-columns: 1fr;
+}
+
+.option-button-row {
+  composes: option-base;
+  grid-template-columns: 1fr auto auto;
+}
+
+.option-checkbox {
+  composes: option-base;
+  grid-template-columns: auto 1fr;
+}
+
+/** Zoom controls */
+.controls {
+  position: absolute;
+  display: flex;
+  justify-content: center;
+  top: 0;
+  left: 0;
+  right: 0;
+  padding: 9px 84px;
+  flex-wrap: wrap;
+
+  /* Allow clicks to fall through to the pinch zoom area */
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+
+  @media (min-width: 860px) {
+    padding: 9px;
+    top: auto;
+    left: 320px;
+    right: 320px;
+    bottom: 0;
+    flex-wrap: wrap-reverse;
+  }
+}
+
+.zoom-controls {
+  display: flex;
+  position: relative;
+  z-index: 100;
+
+  & > :not(:first-child) {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    margin-left: 0;
+  }
+
+  & > :not(:last-child) {
+    margin-right: 0;
+    border-right-width: 0;
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+}
+
+.button,
+.zoom {
+  display: flex;
+  align-items: center;
+  box-sizing: border-box;
+  margin: 4px;
+  background-color: rgba(29, 29, 29, 0.92);
+  border: 1px solid rgba(0, 0, 0, 0.67);
+  border-radius: 6px;
+  line-height: 1.1;
+  white-space: nowrap;
+  height: 39px;
+  padding: 0 8px;
+  font-size: 1.2rem;
+  cursor: pointer;
+
+  /*
+  @media (min-width: 600px) {
+    height: 39px;
+    padding: 0 16px;
+  }
+  */
+
+  &:focus {
+    /* box-shadow: 0 0 0 2px var(--hot-pink); */
+    box-shadow: 0 0 0 2px #fff;
+    outline: none;
+    z-index: 1;
+  }
+}
+
+.button {
+  color: #fff;
+
+  &:hover {
+    background: rgba(50, 50, 50, 0.92);
+  }
+
+  &.active {
+    background: rgba(72, 72, 72, 0.92);
+    color: #fff;
+  }
+}
+
+.zoom {
+  cursor: text;
+  width: 7rem;
+  font: inherit;
+  text-align: center;
+  justify-content: center;
+
+  &:focus {
+    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.2), 0 0 0 2px #fff;
+  }
+}
+span.zoom {
+  color: #939393;
+  font-size: 0.8rem;
+  line-height: 1.2;
+  font-weight: 100;
+}
+input.zoom {
+  font-size: 1.2rem;
+  letter-spacing: 0.05rem;
+  font-weight: 700;
+  text-indent: 3px;
+  color: #fff;
+}
+
+.zoom-value {
+  margin: 0 3px 0 0;
+  padding: 0 2px;
+  font-size: 1.2rem;
+  letter-spacing: 0.05rem;
+  font-weight: 700;
+  color: #fff;
+  border-bottom: 1px dashed #999;
+}
+
+.buttons-no-wrap {
+  display: flex;
+  pointer-events: none;
+
+  & > * {
+    pointer-events: auto;
+  }
+}

src/client/lazy-app/Compress/index.tsx

@@ -11,6 +11,7 @@ import {
   canDecodeImageType,
   abortable,
   assertSignal,
+  shallowEqual,
 } from '../util';
 import {
   PreprocessorState,
@@ -31,7 +32,7 @@ import Results from './Results';
 import WorkerBridge from '../worker-bridge';
 import { resize } from 'features/processors/resize/client';
 import type SnackBarElement from 'shared/custom-els/snack-bar';
-import { Arrow, ExpandIcon } from '../icons';
+import Transform from './Transform';
 import { generateCliInvocation } from '../util/cli';
 
 export type OutputType = EncoderType | 'identity';
@@ -69,8 +70,11 @@ interface State {
   sides: [Side, Side];
   /** Source image load */
   loading: boolean;
+  /** Showing preprocessor transformations modal */
+  transform: boolean;
   error?: string;
   mobileView: boolean;
+  altBackground: boolean;
   preprocessorState: PreprocessorState;
   encodedPreprocessorState?: PreprocessorState;
 }
@@ -126,13 +130,18 @@ async function preprocessImage(
 ): Promise<ImageData> {
   assertSignal(signal);
   let processedData = data;
+  const { rotate, flip, crop } = preprocessorState;
 
-  if (preprocessorState.rotate.rotate !== 0) {
+  if (flip && (flip.horizontal || flip.vertical)) {
-    processedData = await workerBridge.rotate(
+    processedData = await workerBridge.flip(signal, processedData, flip);
-      signal,
+  }
-      processedData,
+
-      preprocessorState.rotate,
+  if (rotate.rotate !== 0) {
-    );
+    processedData = await workerBridge.rotate(signal, processedData, rotate);
+  }
+
+  if (crop && (crop.left || crop.top || crop.right || crop.bottom)) {
+    processedData = await workerBridge.crop(signal, processedData, crop);
   }
 
   return processedData;
@@ -274,6 +283,9 @@ export default class Compress extends Component<Props, State> {
   state: State = {
     source: undefined,
     loading: false,
+    /** @TODO remove this */
+    // transform: true,
+    transform: false,
     preprocessorState: defaultPreprocessorState,
     sides: [
       {
@@ -295,6 +307,7 @@ export default class Compress extends Component<Props, State> {
       },
     ],
     mobileView: this.widthQuery.matches,
+    altBackground: false,
   };
 
   private readonly encodeCache = new ResultCache();
@@ -320,6 +333,12 @@ export default class Compress extends Component<Props, State> {
     this.setState({ mobileView: this.widthQuery.matches });
   };
 
+  private toggleBackground = () => {
+    this.setState({
+      altBackground: !this.state.altBackground,
+    });
+  };
+
   private onEncoderTypeChange = (index: 0 | 1, newType: OutputType): void => {
     this.setState({
       sides: cleanSet(
@@ -361,6 +380,19 @@ export default class Compress extends Component<Props, State> {
     });
   };
 
+  private showPreprocessorTransforms = () => {
+    this.setState({ transform: true });
+  };
+
+  private onTransformUpdated = ({
+    preprocessorState,
+  }: { preprocessorState?: PreprocessorState } = {}) => {
+    if (preprocessorState) {
+      this.onPreprocessorChange(preprocessorState);
+    }
+    this.setState({ transform: false });
+  };
+
   componentWillReceiveProps(nextProps: Props): void {
     if (nextProps.file !== this.props.file) {
       this.sourceFile = nextProps.file;
@@ -417,25 +449,38 @@ export default class Compress extends Component<Props, State> {
     const newRotate = preprocessorState.rotate.rotate;
     const orientationChanged = oldRotate % 180 !== newRotate % 180;
 
+    const { crop } = preprocessorState;
+    const cropChanged = !shallowEqual(crop, this.state.preprocessorState.crop);
+
     this.setState((state) => ({
       loading: true,
       preprocessorState,
       // Flip resize values if orientation has changed
-      sides: !orientationChanged
+      sides:
-        ? state.sides
+        !orientationChanged && !cropChanged
-        : (state.sides.map((side) => {
+          ? state.sides
-            const currentResizeSettings =
+          : (state.sides.map((side) => {
-              side.latestSettings.processorState.resize;
+              const currentResizeSettings =
-            const resizeSettings: Partial<ProcessorState['resize']> = {
+                side.latestSettings.processorState.resize;
-              width: currentResizeSettings.height,
+              let resizeSettings: Partial<ProcessorState['resize']>;
-              height: currentResizeSettings.width,
+              if (cropChanged) {
-            };
+                const img = state.source?.decoded;
-            return cleanMerge(
+                resizeSettings = {
-              side,
+                  width: img ? img.width - crop.left - crop.right : undefined,
-              'latestSettings.processorState.resize',
+                  height: img ? img.height - crop.top - crop.bottom : undefined,
-              resizeSettings,
+                };
-            );
+              } else {
-          }) as [Side, Side]),
+                resizeSettings = {
+                  width: currentResizeSettings.height,
+                  height: currentResizeSettings.width,
+                };
+              }
+              return cleanMerge(
+                side,
+                'latestSettings.processorState.resize',
+                resizeSettings,
+              );
+            }) as [Side, Side]),
     }));
   };
 
@@ -813,12 +858,22 @@ export default class Compress extends Component<Props, State> {
   }
 
   render(
-    { onBack }: Props,
+    { onBack, showSnack }: Props,
-    { loading, sides, source, mobileView, preprocessorState }: State,
+    {
+      loading,
+      sides,
+      source,
+      mobileView,
+      altBackground,
+      transform,
+      preprocessorState,
+    }: State,
   ) {
     const [leftSide, rightSide] = sides;
     const [leftImageData, rightImageData] = sides.map((i) => i.data);
 
+    transform = (source && source.decoded && transform) || false;
+
     const options = sides.map((side, index) => (
       <Options
         index={index as 0 | 1}
@@ -863,8 +918,13 @@ export default class Compress extends Component<Props, State> {
       rightDisplaySettings.processorState.resize.fitMethod === 'contain';
 
     return (
-      <div class={style.compress}>
+      <div
+        class={`${style.compress} ${transform ? style.transforming : ''} ${
+          altBackground ? style.altBackground : ''
+        }`}
+      >
         <Output
+          hidden={transform}
           source={source}
           mobileView={mobileView}
           leftCompressed={leftImageData}
@@ -873,6 +933,8 @@ export default class Compress extends Component<Props, State> {
           rightImgContain={rightImgContain}
           preprocessorState={preprocessorState}
           onPreprocessorChange={this.onPreprocessorChange}
+          onShowPreprocessorTransforms={this.showPreprocessorTransforms}
+          onToggleBackground={this.toggleBackground}
         />
         <button class={style.back} onClick={onBack}>
           <svg viewBox="0 0 61 53.3">
@@ -908,6 +970,16 @@ export default class Compress extends Component<Props, State> {
             </div>,
           ]
         )}
+
+        {transform && (
+          <Transform
+            mobileView={mobileView}
+            source={source!}
+            preprocessorState={preprocessorState!}
+            onSave={this.onTransformUpdated}
+            onCancel={this.onTransformUpdated}
+          />
+        )}
       </div>
     );
   }

src/client/lazy-app/Compress/style.css

@@ -17,6 +17,47 @@
       'header header header'
       'optsLeft viewportOpts optsRight';
   }
+
+  /* darker squares background */
+  &::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: #000;
+    opacity: 0.8;
+    transition: opacity 500ms ease;
+  }
+
+  &.alt-background::before {
+    opacity: 0;
+  }
+
+  /* transformation is modal and we sweep away the comparison UI */
+  &.transforming {
+    & > .options {
+      transform: translateX(-100%);
+    }
+    & > .options + .options {
+      transform: translateX(100%);
+    }
+
+    @media (max-width: 599px) {
+      & > .options {
+        display: none;
+      }
+    }
+
+    & > .back {
+      display: none;
+    }
+
+    & > :first-child {
+      display: none;
+    }
+  }
 }
 
 .options {
@@ -33,6 +74,7 @@
   grid-template-rows: 1fr max-content;
   align-content: end;
   align-self: end;
+  transition: transform 500ms ease;
 
   @media (min-width: 600px) {
     width: 300px;

src/client/lazy-app/icons/index.tsx

@@ -1,6 +1,6 @@
 import { h } from 'preact';
 
-const Icon = (props: preact.JSX.HTMLAttributes) => (
+const Icon = (props: preact.JSX.HTMLAttributes | preact.JSX.SVGAttributes) => (
   // @ts-ignore - TS bug https://github.com/microsoft/TypeScript/issues/16019
   <svg
     width="24"
@@ -11,6 +11,56 @@ const Icon = (props: preact.JSX.HTMLAttributes) => (
   />
 );
 
+export const CLIIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M1 2.7H23v18.5H1zm5.5 13l3.7-3.7-3.7-3.7m5.5 7.4h5.6" />
+  </Icon>
+);
+
+export const SwapIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M8.5 8.6v6.8L5.1 12l3.4-3.4M10 5l-7 7 7 7V5zm4 0v14l7-7-7-7z" />
+  </Icon>
+);
+
+export const FlipVerticallyIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M21 9V7h-2v2zM9 5V3H7v2zM5 21h14a2 2 0 002-2v-4h-2v4H5v-4H3v4a2 2 0 002 2zM3 5h2V3a2 2 0 00-2 2zm20 8v-2H1v2zm-6-8V3h-2v2zM5 9V7H3v2zm8-4V3h-2v2zm8 0a2 2 0 00-2-2v2z" />
+  </Icon>
+);
+
+export const FlipHorizontallyIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M15 21h2v-2h-2zm4-12h2V7h-2zM3 5v14a2 2 0 002 2h4v-2H5V5h4V3H5a2 2 0 00-2 2zm16-2v2h2a2 2 0 00-2-2zm-8 20h2V1h-2zm8-6h2v-2h-2zM15 5h2V3h-2zm4 8h2v-2h-2zm0 8a2 2 0 002-2h-2z" />
+  </Icon>
+);
+
+export const RotateClockwiseIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M16.05 5.34l-5.2-5.2v3.5a9.12 9.12 0 000 18.1v-2.3a6.84 6.84 0 010-13.5v4.47zm5 6.22a9.03 9.03 0 00-1.85-4.44l-1.62 1.62a6.63 6.63 0 011.16 2.82zm-7.91 7.87v2.31a9.05 9.05 0 004.45-1.84l-1.64-1.64a6.6 6.6 0 01-2.81 1.18zm4.44-2.76l1.62 1.61a9.03 9.03 0 001.85-4.44h-2.3a6.73 6.73 0 01-1.17 2.83z" />
+  </Icon>
+);
+
+export const RotateCounterClockwiseIcon = (
+  props: preact.JSX.HTMLAttributes,
+) => (
+  <Icon {...props}>
+    <path d="M7.95 5.34l5.19-5.2v3.5a9.12 9.12 0 010 18.1v-2.3a6.84 6.84 0 000-13.5v4.47zm-5 6.22A9.03 9.03 0 014.8 7.12l1.62 1.62a6.63 6.63 0 00-1.17 2.82zm7.9 7.87v2.31A9.05 9.05 0 016.4 19.9l1.65-1.64a6.6 6.6 0 002.8 1.17zm-4.43-2.76L4.8 18.28a9.03 9.03 0 01-1.85-4.44h2.3a6.73 6.73 0 001.17 2.83z" />
+  </Icon>
+);
+
+export const CheckmarkIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M9.76 17.56l-4.55-4.55-1.52 1.52 6.07 6.08 13-13.02-1.51-1.52z" />
+  </Icon>
+);
+
+export const CompareIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <path d="M9.77 1.94h-5.6a2.24 2.24 0 00-2.22 2.25v15.65a2.24 2.24 0 002.24 2.23h5.59v2.24h2.23V-.31H9.78zm0 16.77h-5.6l5.6-6.7zM19.83 1.94h-5.6v2.25h5.6v14.53l-5.6-6.7v10.05h5.6a2.24 2.24 0 002.23-2.23V4.18a2.24 2.24 0 00-2.23-2.24z" />
+  </Icon>
+);
+
 export const ToggleBackgroundIcon = (props: preact.JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M3 13h2v-2H3v2zm0 4h2v-2H3v2zm2 4v-2H3c0 1.1.9 2 2 2zM3 9h2V7H3v2zm12 12h2v-2h-2v2zm4-18H9a2 2 0 0 0-2 2v10c0 1.1.9 2 2 2h10a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm0 12H9V5h10v10zm-8 6h2v-2h-2v2zm-4 0h2v-2H7v2z" />
@@ -31,6 +81,14 @@ export const RotateIcon = (props: preact.JSX.HTMLAttributes) => (
   </Icon>
 );
 
+export const MoreIcon = (props: preact.JSX.HTMLAttributes) => (
+  <Icon {...props}>
+    <circle cx="12" cy="6" r="2" />
+    <circle cx="12" cy="12" r="2" />
+    <circle cx="12" cy="18" r="2" />
+  </Icon>
+);
+
 export const AddIcon = (props: preact.JSX.HTMLAttributes) => (
   <Icon {...props}>
     <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
@@ -72,20 +130,3 @@ export const DownloadIcon = () => (
     <path d="M6.6 2.7h-4v13.2h2.7A2.7 2.7 0 018 18.6a2.7 2.7 0 002.6 2.6h2.7a2.7 2.7 0 002.6-2.6 2.7 2.7 0 012.7-2.7h2.6V2.7h-4a1.3 1.3 0 110-2.7h4A2.7 2.7 0 0124 2.7v18.5a2.7 2.7 0 01-2.7 2.7H2.7A2.7 2.7 0 010 21.2V2.7A2.7 2.7 0 012.7 0h4a1.3 1.3 0 010 2.7zm4 7.4V1.3a1.3 1.3 0 112.7 0v8.8L15 8.4a1.3 1.3 0 011.9 1.8l-4 4a1.3 1.3 0 01-1.9 0l-4-4A1.3 1.3 0 019 8.4z" />
   </svg>
 );
-
-export const CLIIcon = () => (
-  <svg viewBox="0 0 81.3 68.8">
-    <path
-      fill="none"
-      stroke-miterlimit="15.6"
-      stroke-width="6.3"
-      d="M3.1 3.1h75v62.5h-75zm18.8 43.8l12.5-12.5-12.5-12.5m18.7 25h18.8"
-    />
-  </svg>
-);
-
-export const SwapIcon = () => (
-  <svg viewBox="0 0 18 14">
-    <path d="M5.5 3.6v6.8L2.1 7l3.4-3.4M7 0L0 7l7 7V0zm4 0v14l7-7-7-7z" />
-  </svg>
-);

src/features/preprocessors/crop/shared/meta.ts

@@ -0,0 +1,25 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface Options {
+  left: number;
+  right: number;
+  top: number;
+  bottom: number;
+}
+
+export const defaultOptions: Options = {
+  left: 0,
+  right: 0,
+  top: 0,
+  bottom: 0,
+};

src/features/preprocessors/crop/shared/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

src/features/preprocessors/crop/worker/crop.ts

@@ -0,0 +1,37 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Options } from '../shared/meta';
+
+export default async function crop(
+  { data, width, height }: ImageData,
+  { top, right, bottom, left }: Options,
+): Promise<ImageData> {
+  const newWidth = width - left - right;
+  const newHeight = height - top - bottom;
+
+  const cols = width * 4;
+  const newCols = newWidth * 4;
+
+  const pixels = new Uint8ClampedArray(data.buffer, 0, newHeight * newCols);
+  for (let y = 0; y < newHeight; y++) {
+    const x = left * 4;
+    const row = new Uint8ClampedArray(
+      data.buffer,
+      (top + y) * cols + x,
+      newCols,
+    );
+    pixels.set(row, y * newCols);
+  }
+
+  return new ImageData(pixels.slice(), newWidth, newHeight);
+}

src/features/preprocessors/crop/worker/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

src/features/preprocessors/flip/shared/meta.ts

@@ -0,0 +1,21 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+export interface Options {
+  horizontal: boolean;
+  vertical: boolean;
+}
+
+export const defaultOptions: Options = {
+  horizontal: false,
+  vertical: false,
+};

src/features/preprocessors/flip/shared/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

src/features/preprocessors/flip/worker/flip.ts

@@ -0,0 +1,68 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import { Options } from '../shared/meta';
+
+export default async function flip(
+  data: ImageData,
+  opts: Options,
+): Promise<ImageData> {
+  const { vertical, horizontal } = opts;
+  const source = data.data;
+  const len = source.length;
+  const pixels = new Uint8ClampedArray(len);
+  const { width, height } = data;
+
+  let i = 0;
+  let x = 0;
+  let y = 0;
+  const cols = width * 4;
+  while (i < len) {
+    let from = vertical ? (height - y) * cols + x * 4 : i;
+    if (horizontal) from = from - x * 4 + cols - x * 4; // todo: reduce
+
+    pixels[i++] = source[from++];
+    pixels[i++] = source[from++];
+    pixels[i++] = source[from++];
+    pixels[i++] = source[from];
+
+    if (++x === width) {
+      x = 0;
+      y++;
+    }
+  }
+
+  /*
+  function swap(a: number, b: number) {
+    let tmp = pixels[a];
+    pixels[a] = pixels[b];
+    pixels[b] = tmp;
+  }
+  function swapRgba(a: number, b: number) {
+    swap(a, b);
+    swap(a+1, b+1);
+    swap(a+2, b+2);
+    swap(a+3, b+3);
+  }
+  const COLS = data.width * 4;
+  // for (let y = 0, y2 = (data.height - 1); y < y2; y+=4, y2-=4) {
+  for (let y = 0; y < data.height; y++) {
+    for (let x = 0, x2 = COLS - 4; x < x2; x+=4, x2-=4) {
+      const offsetX = y * COLS;
+      const offsetY = (opts.vertical ? (data.height - y) : y) * COLS;
+      const flippedX = opts.horizontal ? x2 : x;
+      swapRgba(offsetX + x, offsetY + x2);
+    }
+  }
+  */
+  return new ImageData(pixels, data.width, data.height);
+}

src/features/preprocessors/flip/worker/missing-types.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/// <reference path="../../../../../missing-types.d.ts" />

src/shared/prerendered-app/Intro/index.tsx

@@ -273,7 +273,7 @@ export default class Intro extends Component<Props, State> {
             )}
             <div
               class={style.loadImgContent}
-              style={{ visibility: __PRERENDER__ ? 'hidden' : '' }}
+              style={{ visibility: __PRERENDER__ ? 'hidden' : undefined }}
             >
               <button class={style.loadBtn} onClick={this.onOpenClick}>
                 <svg viewBox="0 0 24 24" class={style.loadIcon}>

src/shared/prerendered-app/colors.css

@@ -11,6 +11,7 @@ html {
   --less-light-gray: #bcbcbc;
   --medium-light-gray: #d1d1d1;
   --light-gray: #eaeaea;
+  --med-gray: #555;
   --dark-gray: #333;
   --dim-text: #343a3e;
   --dark-text: #142630;