diff --git a/src/client/lazy-app/Compress/Options/Expander/index.tsx b/src/client/lazy-app/Compress/Options/Expander/index.tsx
index 3790bf82..e0e013db 100644
--- a/src/client/lazy-app/Compress/Options/Expander/index.tsx
+++ b/src/client/lazy-app/Compress/Options/Expander/index.tsx
@@ -7,71 +7,59 @@ interface Props {
   children: ComponentChildren;
 }
 interface State {
-  outgoingChildren: ComponentChild[];
+  children: ComponentChildren;
+  outgoingChildren: ComponentChildren;
 }
 
 export default class Expander extends Component<Props, State> {
-  state: State = {
-    outgoingChildren: [],
-  };
-  private lastElHeight: number = 0;
-
-  componentWillReceiveProps(nextProps: Props) {
-    const children = this.props.children as ComponentChild[] | undefined;
-    const nextChildren = nextProps.children as ComponentChild[] | undefined;
-
-    if (!nextChildren && children && children[0]) {
-      // Cache the current children for the shrink animation.
-      this.setState({ outgoingChildren: children });
+  static getDerivedStateFromProps(
+    props: Props,
+    state: State,
+  ): Partial<State> | null {
+    if (!props.children && state.children) {
+      return { children: props.children, outgoingChildren: state.children };
     }
+
+    if (props.children !== state.children) {
+      return { children: props.children, outgoingChildren: undefined };
+    }
+
+    return null;
   }
 
-  componentWillUpdate(nextProps: Props) {
-    const children = this.props.children as ComponentChild[] | undefined;
-    const nextChildren = nextProps.children as ComponentChild[] | undefined;
+  async componentDidUpdate(_: Props, previousState: State) {
+    let heightFrom: number;
+    let heightTo: number;
 
-    // Only interested if going from empty to not-empty, or not-empty to empty.
-    if ((children && nextChildren) || (!children && !nextChildren)) return;
-    this.lastElHeight = (this
-      .base as HTMLElement).getBoundingClientRect().height;
-  }
-
-  async componentDidUpdate(previousProps: Props) {
-    const children = this.props.children as ComponentChild[] | undefined;
-    const previousChildren = previousProps.children as
-      | ComponentChild[]
-      | undefined;
-
-    // Only interested if going from empty to not-empty, or not-empty to empty.
-    if ((children && previousChildren) || (!children && !previousChildren))
+    if (previousState.children && !this.state.children) {
+      heightFrom = (this.base as HTMLElement).getBoundingClientRect().height;
+      heightTo = 0;
+    } else if (!previousState.children && this.state.children) {
+      heightFrom = 0;
+      heightTo = (this.base as HTMLElement).getBoundingClientRect().height;
+    } else {
       return;
+    }
 
-    // What height do we need to transition to?
-    (this.base as HTMLElement).style.height = '';
     (this.base as HTMLElement).style.overflow = 'hidden';
-    const newHeight = children
-      ? (this.base as HTMLElement).getBoundingClientRect().height
-      : 0;
 
     await transitionHeight(this.base as HTMLElement, {
       duration: 300,
-      from: this.lastElHeight,
-      to: newHeight,
+      from: heightFrom,
+      to: heightTo,
     });
 
     // Unset the height & overflow, so element changes do the right thing.
     (this.base as HTMLElement).style.height = '';
     (this.base as HTMLElement).style.overflow = '';
-    if (this.state.outgoingChildren[0]) this.setState({ outgoingChildren: [] });
+
+    this.setState({ outgoingChildren: undefined });
   }
 
-  render(props: Props, { outgoingChildren }: State) {
-    const children = props.children as ComponentChild[] | undefined;
-    const childrenExiting = (!children || !children[0]) && outgoingChildren[0];
-
+  render({}: Props, { children, outgoingChildren }: State) {
     return (
-      <div class={childrenExiting ? style.childrenExiting : ''}>
-        {children && children[0] ? children : outgoingChildren}
+      <div class={outgoingChildren ? style.childrenExiting : ''}>
+        {outgoingChildren || children}
       </div>
     );
   }
diff --git a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts
index 3681decd..49b8c58b 100644
--- a/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts
+++ b/src/client/lazy-app/Compress/Options/Range/custom-els/RangeInput/index.ts
@@ -107,6 +107,8 @@ class RangeInputElement extends HTMLElement {
   };
 
   private _update = () => {
+    // Not connected?
+    if (!this._valueDisplay) return;
     const value = Number(this.value) || 0;
     const min = Number(this.min) || 0;
     const max = Number(this.max) || 100;
diff --git a/src/client/lazy-app/Compress/Options/index.tsx b/src/client/lazy-app/Compress/Options/index.tsx
index cccb46bc..9ffa16ae 100644
--- a/src/client/lazy-app/Compress/Options/index.tsx
+++ b/src/client/lazy-app/Compress/Options/index.tsx
@@ -133,7 +133,7 @@ export default class Options extends Component<Props, State> {
 
               <label class={style.sectionEnabler}>
                 <Checkbox
-                  name="quantizer.enable"
+                  name="quantize.enable"
                   checked={!!processorState.quantize.enabled}
                   onChange={this.onProcessorEnabledChange}
                 />
@@ -173,12 +173,12 @@ export default class Options extends Component<Props, State> {
         </section>
 
         <Expander>
-          {EncoderOptionComponent && encoderState && (
+          {EncoderOptionComponent && (
             <EncoderOptionComponent
               options={
                 // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
                 // the correct type, but typescript isn't smart enough.
-                encoderState.options as any
+                encoderState!.options as any
               }
               onChange={onEncoderOptionsChange}
             />
diff --git a/src_old/assets/favicon.ico b/src_old/assets/favicon.ico
deleted file mode 100644
index a3a6c2d7..00000000
Binary files a/src_old/assets/favicon.ico and /dev/null differ
diff --git a/src_old/assets/icon-large-maskable.png b/src_old/assets/icon-large-maskable.png
deleted file mode 100644
index e35b3a3e..00000000
Binary files a/src_old/assets/icon-large-maskable.png and /dev/null differ
diff --git a/src_old/assets/icon-large.png b/src_old/assets/icon-large.png
deleted file mode 100644
index e394516e..00000000
Binary files a/src_old/assets/icon-large.png and /dev/null differ
diff --git a/src_old/assets/icon-small.png b/src_old/assets/icon-small.png
deleted file mode 100644
index 709b1829..00000000
Binary files a/src_old/assets/icon-small.png and /dev/null differ
diff --git a/src_old/codecs/avif/decoder-meta.ts b/src_old/codecs/avif/decoder-meta.ts
deleted file mode 100644
index 55987d27..00000000
--- a/src_old/codecs/avif/decoder-meta.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const name = 'WASM AVIF Decoder';
-
-const supportedMimeTypes = ['image/avif'];
-
-export function canHandleMimeType(mimeType: string): boolean {
-  return supportedMimeTypes.includes(mimeType);
-}
diff --git a/src_old/codecs/avif/decoder.ts b/src_old/codecs/avif/decoder.ts
deleted file mode 100644
index 234d5268..00000000
--- a/src_old/codecs/avif/decoder.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import avif_dec, { AVIFModule } from '../../../codecs/avif/dec/avif_dec';
-import wasmUrl from '../../../codecs/avif/dec/avif_dec.wasm';
-import { initEmscriptenModule } from '../util';
-
-let emscriptenModule: Promise<AVIFModule>;
-
-export async function decode(data: ArrayBuffer): Promise<ImageData> {
-  if (!emscriptenModule)
-    emscriptenModule = initEmscriptenModule(avif_dec, wasmUrl);
-
-  const module = await emscriptenModule;
-  const result = module.decode(data);
-  if (!result) {
-    throw new Error('Decoding error');
-  }
-  return result;
-}
diff --git a/src_old/codecs/avif/encoder-meta.ts b/src_old/codecs/avif/encoder-meta.ts
deleted file mode 100644
index 7df64b40..00000000
--- a/src_old/codecs/avif/encoder-meta.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-export interface EncodeOptions {
-  minQuantizer: number;
-  maxQuantizer: number;
-  minQuantizerAlpha: number;
-  maxQuantizerAlpha: number;
-  tileRowsLog2: number;
-  tileColsLog2: number;
-  speed: number;
-  subsample: number;
-}
-
-export const type = 'avif';
-export const label = 'AVIF';
-export const mimeType = 'image/avif';
-export const extension = 'avif';
-export const defaultOptions: EncodeOptions = {
-  minQuantizer: 33,
-  maxQuantizer: 63,
-  minQuantizerAlpha: 33,
-  maxQuantizerAlpha: 63,
-  tileColsLog2: 0,
-  tileRowsLog2: 0,
-  speed: 8,
-  subsample: 1,
-};
-
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
diff --git a/src_old/codecs/avif/encoder.ts b/src_old/codecs/avif/encoder.ts
deleted file mode 100644
index 8c4088d5..00000000
--- a/src_old/codecs/avif/encoder.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import avif_enc, { AVIFModule } from '../../../codecs/avif/enc/avif_enc';
-import wasmUrl from '../../../codecs/avif/enc/avif_enc.wasm';
-import { EncodeOptions } from './encoder-meta';
-import { initEmscriptenModule } from '../util';
-
-let emscriptenModule: Promise<AVIFModule>;
-
-export async function encode(
-  data: ImageData,
-  options: EncodeOptions,
-): Promise<ArrayBuffer> {
-  if (!emscriptenModule)
-    emscriptenModule = initEmscriptenModule(avif_enc, wasmUrl);
-
-  const module = await emscriptenModule;
-  const result = module.encode(data.data, data.width, data.height, options);
-
-  if (!result) {
-    throw new Error('Encoding error');
-  }
-
-  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
-  return result.buffer as ArrayBuffer;
-}
diff --git a/src_old/codecs/avif/options.tsx b/src_old/codecs/avif/options.tsx
deleted file mode 100644
index dd85f60c..00000000
--- a/src_old/codecs/avif/options.tsx
+++ /dev/null
@@ -1,350 +0,0 @@
-import { h, Component } from 'preact';
-import { preventDefault, shallowEqual } from '../../lib/util';
-import { EncodeOptions, defaultOptions } from './encoder-meta';
-import * as style from '../../components/Options/style.scss';
-import Checkbox from '../../components/checkbox';
-import Expander from '../../components/expander';
-import Select from '../../components/select';
-import Range from '../../components/range';
-import linkState from 'linkstate';
-
-interface Props {
-  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void;
-}
-
-interface State {
-  options: EncodeOptions;
-  lossless: boolean;
-  maxQuality: number;
-  minQuality: number;
-  separateAlpha: boolean;
-  losslessAlpha: boolean;
-  maxAlphaQuality: number;
-  minAlphaQuality: number;
-  showAdvanced: boolean;
-  grayscale: boolean;
-  subsample: number;
-  tileRows: number;
-  tileCols: number;
-  effort: number;
-}
-
-const maxQuant = 63;
-const maxSpeed = 10;
-
-export default class AVIFEncoderOptions extends Component<Props, State> {
-  static getDerivedStateFromProps(
-    props: Props,
-    state: State,
-  ): Partial<State> | undefined {
-    if (state.options && shallowEqual(state.options, props.options)) return;
-    const { options } = props;
-
-    const lossless = options.maxQuantizer === 0 && options.minQuantizer === 0;
-    const minQuantizerValue = lossless
-      ? defaultOptions.minQuantizer
-      : options.minQuantizer;
-    const maxQuantizerValue = lossless
-      ? defaultOptions.maxQuantizer
-      : options.maxQuantizer;
-    const losslessAlpha =
-      options.maxQuantizerAlpha === 0 && options.minQuantizerAlpha === 0;
-    const minQuantizerAlphaValue = losslessAlpha
-      ? defaultOptions.minQuantizerAlpha
-      : options.minQuantizerAlpha;
-    const maxQuantizerAlphaValue = losslessAlpha
-      ? defaultOptions.maxQuantizerAlpha
-      : options.maxQuantizerAlpha;
-
-    // Create default form state from options
-    return {
-      options,
-      lossless,
-      losslessAlpha,
-      maxQuality: maxQuant - minQuantizerValue,
-      minQuality: maxQuant - maxQuantizerValue,
-      separateAlpha:
-        options.maxQuantizer !== options.maxQuantizerAlpha ||
-        options.minQuantizer !== options.minQuantizerAlpha,
-      maxAlphaQuality: maxQuant - minQuantizerAlphaValue,
-      minAlphaQuality: maxQuant - maxQuantizerAlphaValue,
-      grayscale: options.subsample === 0,
-      subsample:
-        options.subsample === 0 || lossless
-          ? defaultOptions.subsample
-          : options.subsample,
-      tileRows: options.tileRowsLog2,
-      tileCols: options.tileColsLog2,
-      effort: maxSpeed - options.speed,
-    };
-  }
-
-  // The rest of the defaults are set in getDerivedStateFromProps
-  state: State = {
-    showAdvanced: false,
-  } as State;
-
-  private _inputChangeCallbacks = new Map<string, (event: Event) => void>();
-
-  private _inputChange = (prop: keyof State, type: 'number' | 'boolean') => {
-    // Cache the callback for performance
-    if (!this._inputChangeCallbacks.has(prop)) {
-      this._inputChangeCallbacks.set(prop, (event: Event) => {
-        const formEl = event.target as HTMLInputElement | HTMLSelectElement;
-        const newVal =
-          type === 'boolean'
-            ? 'checked' in formEl
-              ? formEl.checked
-              : !!formEl.value
-            : Number(formEl.value);
-
-        const newState: Partial<State> = {
-          [prop]: newVal,
-        };
-
-        // Ensure that min cannot be greater than max
-        switch (prop) {
-          case 'maxQuality':
-            if (newVal < this.state.minQuality) {
-              newState.minQuality = newVal as number;
-            }
-            break;
-          case 'minQuality':
-            if (newVal > this.state.maxQuality) {
-              newState.maxQuality = newVal as number;
-            }
-            break;
-          case 'maxAlphaQuality':
-            if (newVal < this.state.minAlphaQuality) {
-              newState.minAlphaQuality = newVal as number;
-            }
-            break;
-          case 'minAlphaQuality':
-            if (newVal > this.state.maxAlphaQuality) {
-              newState.maxAlphaQuality = newVal as number;
-            }
-            break;
-        }
-
-        const optionState = {
-          ...this.state,
-          ...newState,
-        };
-
-        const maxQuantizer = optionState.lossless
-          ? 0
-          : maxQuant - optionState.minQuality;
-        const minQuantizer = optionState.lossless
-          ? 0
-          : maxQuant - optionState.maxQuality;
-
-        const newOptions: EncodeOptions = {
-          maxQuantizer,
-          minQuantizer,
-          maxQuantizerAlpha: optionState.separateAlpha
-            ? optionState.losslessAlpha
-              ? 0
-              : maxQuant - optionState.minAlphaQuality
-            : maxQuantizer,
-          minQuantizerAlpha: optionState.separateAlpha
-            ? optionState.losslessAlpha
-              ? 0
-              : maxQuant - optionState.maxAlphaQuality
-            : minQuantizer,
-          // Always set to 4:4:4 if lossless
-          subsample: optionState.grayscale
-            ? 0
-            : optionState.lossless
-            ? 3
-            : optionState.subsample,
-          tileColsLog2: optionState.tileCols,
-          tileRowsLog2: optionState.tileRows,
-          speed: maxSpeed - optionState.effort,
-        };
-
-        // Updating options, so we don't recalculate in getDerivedStateFromProps.
-        newState.options = newOptions;
-
-        this.setState(
-          // It isn't clear to me why I have to cast this :)
-          newState as State,
-        );
-
-        this.props.onChange(newOptions);
-      });
-    }
-
-    return this._inputChangeCallbacks.get(prop)!;
-  };
-
-  render(
-    _: Props,
-    {
-      effort,
-      grayscale,
-      lossless,
-      losslessAlpha,
-      maxAlphaQuality,
-      maxQuality,
-      minAlphaQuality,
-      minQuality,
-      separateAlpha,
-      showAdvanced,
-      subsample,
-      tileCols,
-      tileRows,
-    }: State,
-  ) {
-    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            checked={lossless}
-            onChange={this._inputChange('lossless', 'boolean')}
-          />
-          Lossless
-        </label>
-        <Expander>
-          {!lossless && (
-            <div>
-              <div class={style.optionOneCell}>
-                <Range
-                  min="0"
-                  max="62"
-                  value={maxQuality}
-                  onInput={this._inputChange('maxQuality', 'number')}
-                >
-                  Max quality:
-                </Range>
-              </div>
-              <div class={style.optionOneCell}>
-                <Range
-                  min="0"
-                  max="62"
-                  value={minQuality}
-                  onInput={this._inputChange('minQuality', 'number')}
-                >
-                  Min quality:
-                </Range>
-              </div>
-            </div>
-          )}
-        </Expander>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            checked={separateAlpha}
-            onChange={this._inputChange('separateAlpha', 'boolean')}
-          />
-          Separate alpha quality
-        </label>
-        <Expander>
-          {separateAlpha && (
-            <div>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  checked={losslessAlpha}
-                  onChange={this._inputChange('losslessAlpha', 'boolean')}
-                />
-                Lossless alpha
-              </label>
-              <Expander>
-                {!losslessAlpha && (
-                  <div>
-                    <div class={style.optionOneCell}>
-                      <Range
-                        min="0"
-                        max="62"
-                        value={maxAlphaQuality}
-                        onInput={this._inputChange('maxAlphaQuality', 'number')}
-                      >
-                        Max alpha quality:
-                      </Range>
-                    </div>
-                    <div class={style.optionOneCell}>
-                      <Range
-                        min="0"
-                        max="62"
-                        value={minAlphaQuality}
-                        onInput={this._inputChange('minAlphaQuality', 'number')}
-                      >
-                        Min alpha quality:
-                      </Range>
-                    </div>
-                  </div>
-                )}
-              </Expander>
-            </div>
-          )}
-        </Expander>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            checked={showAdvanced}
-            onChange={linkState(this, 'showAdvanced')}
-          />
-          Show advanced settings
-        </label>
-        <Expander>
-          {showAdvanced && (
-            <div>
-              {/*<label class={style.optionInputFirst}>
-                <Checkbox
-                  data-set-state="grayscale"
-                  checked={grayscale}
-                  onChange={this._inputChange('grayscale', 'boolean')}
-                />
-                Grayscale
-              </label>*/}
-              <Expander>
-                {!grayscale && !lossless && (
-                  <label class={style.optionTextFirst}>
-                    Subsample chroma:
-                    <Select
-                      data-set-state="subsample"
-                      value={subsample}
-                      onChange={this._inputChange('subsample', 'number')}
-                    >
-                      <option value="1">4:2:0</option>
-                      {/*<option value="2">4:2:2</option>*/}
-                      <option value="3">4:4:4</option>
-                    </Select>
-                  </label>
-                )}
-              </Expander>
-              <div class={style.optionOneCell}>
-                <Range
-                  min="0"
-                  max="6"
-                  value={tileRows}
-                  onInput={this._inputChange('tileRows', 'number')}
-                >
-                  Log2 of tile rows:
-                </Range>
-              </div>
-              <div class={style.optionOneCell}>
-                <Range
-                  min="0"
-                  max="6"
-                  value={tileCols}
-                  onInput={this._inputChange('tileCols', 'number')}
-                >
-                  Log2 of tile cols:
-                </Range>
-              </div>
-            </div>
-          )}
-        </Expander>
-        <div class={style.optionOneCell}>
-          <Range
-            min="0"
-            max="10"
-            value={effort}
-            onInput={this._inputChange('effort', 'number')}
-          >
-            Effort:
-          </Range>
-        </div>
-      </form>
-    );
-  }
-}
diff --git a/src_old/codecs/browser-bmp/encoder-meta.ts b/src_old/codecs/browser-bmp/encoder-meta.ts
deleted file mode 100644
index 988b08f5..00000000
--- a/src_old/codecs/browser-bmp/encoder-meta.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { canvasEncodeTest } from '../generic/util';
-
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-bmp';
-export const label = 'Browser BMP';
-export const mimeType = 'image/bmp';
-export const extension = 'bmp';
-export const defaultOptions: EncodeOptions = {};
-export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src_old/codecs/browser-bmp/encoder.ts b/src_old/codecs/browser-bmp/encoder.ts
deleted file mode 100644
index 7c879d97..00000000
--- a/src_old/codecs/browser-bmp/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData) {
-  return canvasEncode(data, mimeType);
-}
diff --git a/src_old/codecs/browser-gif/encoder-meta.ts b/src_old/codecs/browser-gif/encoder-meta.ts
deleted file mode 100644
index 0d6accf4..00000000
--- a/src_old/codecs/browser-gif/encoder-meta.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { canvasEncodeTest } from '../generic/util';
-
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-gif';
-export const label = 'Browser GIF';
-export const mimeType = 'image/gif';
-export const extension = 'gif';
-export const defaultOptions: EncodeOptions = {};
-export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src_old/codecs/browser-gif/encoder.ts b/src_old/codecs/browser-gif/encoder.ts
deleted file mode 100644
index 7c879d97..00000000
--- a/src_old/codecs/browser-gif/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData) {
-  return canvasEncode(data, mimeType);
-}
diff --git a/src_old/codecs/browser-jp2/encoder-meta.ts b/src_old/codecs/browser-jp2/encoder-meta.ts
deleted file mode 100644
index 0e6f6f87..00000000
--- a/src_old/codecs/browser-jp2/encoder-meta.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { canvasEncodeTest } from '../generic/util';
-
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-jp2';
-export const label = 'Browser JPEG 2000';
-export const mimeType = 'image/jp2';
-export const extension = 'jp2';
-export const defaultOptions: EncodeOptions = {};
-export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src_old/codecs/browser-jp2/encoder.ts b/src_old/codecs/browser-jp2/encoder.ts
deleted file mode 100644
index 7c879d97..00000000
--- a/src_old/codecs/browser-jp2/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData) {
-  return canvasEncode(data, mimeType);
-}
diff --git a/src_old/codecs/browser-jpeg/encoder-meta.ts b/src_old/codecs/browser-jpeg/encoder-meta.ts
deleted file mode 100644
index b3d389b7..00000000
--- a/src_old/codecs/browser-jpeg/encoder-meta.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export interface EncodeOptions {
-  quality: number;
-}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-jpeg';
-export const label = 'Browser JPEG';
-export const mimeType = 'image/jpeg';
-export const extension = 'jpg';
-export const defaultOptions: EncodeOptions = { quality: 0.75 };
diff --git a/src_old/codecs/browser-jpeg/encoder.ts b/src_old/codecs/browser-jpeg/encoder.ts
deleted file mode 100644
index 9e40156f..00000000
--- a/src_old/codecs/browser-jpeg/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { EncodeOptions, mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData, { quality }: EncodeOptions) {
-  return canvasEncode(data, mimeType, quality);
-}
diff --git a/src_old/codecs/browser-jpeg/options.ts b/src_old/codecs/browser-jpeg/options.ts
deleted file mode 100644
index 61a7817c..00000000
--- a/src_old/codecs/browser-jpeg/options.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import qualityOption from '../generic/quality-option';
-
-export default qualityOption({ min: 0, max: 1, step: 0.01 });
diff --git a/src_old/codecs/browser-pdf/encoder-meta.ts b/src_old/codecs/browser-pdf/encoder-meta.ts
deleted file mode 100644
index 7ffcce8f..00000000
--- a/src_old/codecs/browser-pdf/encoder-meta.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { canvasEncodeTest } from '../generic/util';
-
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-pdf';
-export const label = 'Browser PDF';
-export const mimeType = 'application/pdf';
-export const extension = 'pdf';
-export const defaultOptions: EncodeOptions = {};
-export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src_old/codecs/browser-pdf/encoder.ts b/src_old/codecs/browser-pdf/encoder.ts
deleted file mode 100644
index 7c879d97..00000000
--- a/src_old/codecs/browser-pdf/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData) {
-  return canvasEncode(data, mimeType);
-}
diff --git a/src_old/codecs/browser-png/encoder-meta.ts b/src_old/codecs/browser-png/encoder-meta.ts
deleted file mode 100644
index ef90a063..00000000
--- a/src_old/codecs/browser-png/encoder-meta.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-png';
-export const label = 'Browser PNG';
-export const mimeType = 'image/png';
-export const extension = 'png';
-export const defaultOptions: EncodeOptions = {};
diff --git a/src_old/codecs/browser-png/encoder.tsx b/src_old/codecs/browser-png/encoder.tsx
deleted file mode 100644
index 7c879d97..00000000
--- a/src_old/codecs/browser-png/encoder.tsx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData) {
-  return canvasEncode(data, mimeType);
-}
diff --git a/src_old/codecs/browser-tiff/encoder-meta.ts b/src_old/codecs/browser-tiff/encoder-meta.ts
deleted file mode 100644
index f7c3d950..00000000
--- a/src_old/codecs/browser-tiff/encoder-meta.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-import { canvasEncodeTest } from '../generic/util';
-
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-tiff';
-export const label = 'Browser TIFF';
-export const mimeType = 'image/tiff';
-export const extension = 'tiff';
-export const defaultOptions: EncodeOptions = {};
-export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src_old/codecs/browser-tiff/encoder.ts b/src_old/codecs/browser-tiff/encoder.ts
deleted file mode 100644
index 7c879d97..00000000
--- a/src_old/codecs/browser-tiff/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData) {
-  return canvasEncode(data, mimeType);
-}
diff --git a/src_old/codecs/browser-webp/encoder-meta.ts b/src_old/codecs/browser-webp/encoder-meta.ts
deleted file mode 100644
index 851136d4..00000000
--- a/src_old/codecs/browser-webp/encoder-meta.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-import { canvasEncodeTest } from '../generic/util';
-
-export interface EncodeOptions {
-  quality: number;
-}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'browser-webp';
-export const label = 'Browser WebP';
-export const mimeType = 'image/webp';
-export const extension = 'webp';
-export const defaultOptions: EncodeOptions = { quality: 0.75 };
-export const featureTest = () => canvasEncodeTest(mimeType);
diff --git a/src_old/codecs/browser-webp/encoder.ts b/src_old/codecs/browser-webp/encoder.ts
deleted file mode 100644
index 9e40156f..00000000
--- a/src_old/codecs/browser-webp/encoder.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { EncodeOptions, mimeType } from './encoder-meta';
-import { canvasEncode } from '../../lib/util';
-
-export function encode(data: ImageData, { quality }: EncodeOptions) {
-  return canvasEncode(data, mimeType, quality);
-}
diff --git a/src_old/codecs/browser-webp/options.ts b/src_old/codecs/browser-webp/options.ts
deleted file mode 100644
index 61a7817c..00000000
--- a/src_old/codecs/browser-webp/options.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import qualityOption from '../generic/quality-option';
-
-export default qualityOption({ min: 0, max: 1, step: 0.01 });
diff --git a/src_old/codecs/decoders.ts b/src_old/codecs/decoders.ts
deleted file mode 100644
index e27eaec9..00000000
--- a/src_old/codecs/decoders.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import { builtinDecode, sniffMimeType, canDecodeImageType } from '../lib/util';
-import Processor from './processor';
-
-export async function decodeImage(
-  blob: Blob,
-  processor: Processor,
-): Promise<ImageData> {
-  const mimeType = await sniffMimeType(blob);
-  const canDecode = await canDecodeImageType(mimeType);
-
-  try {
-    if (!canDecode) {
-      if (mimeType === 'image/avif') return await processor.avifDecode(blob);
-      if (mimeType === 'image/webp') return await processor.webpDecode(blob);
-      // If it's not one of those types, fall through and try built-in decoding for a laugh.
-    }
-    return await builtinDecode(blob);
-  } catch (err) {
-    throw Error("Couldn't decode image");
-  }
-}
diff --git a/src_old/codecs/encoders.ts b/src_old/codecs/encoders.ts
deleted file mode 100644
index 09d8b5f3..00000000
--- a/src_old/codecs/encoders.ts
+++ /dev/null
@@ -1,85 +0,0 @@
-import * as identity from './identity/encoder-meta';
-import * as oxiPNG from './oxipng/encoder-meta';
-import * as mozJPEG from './mozjpeg/encoder-meta';
-import * as webP from './webp/encoder-meta';
-import * as avif from './avif/encoder-meta';
-import * as browserPNG from './browser-png/encoder-meta';
-import * as browserJPEG from './browser-jpeg/encoder-meta';
-import * as browserWebP from './browser-webp/encoder-meta';
-import * as browserGIF from './browser-gif/encoder-meta';
-import * as browserTIFF from './browser-tiff/encoder-meta';
-import * as browserJP2 from './browser-jp2/encoder-meta';
-import * as browserBMP from './browser-bmp/encoder-meta';
-import * as browserPDF from './browser-pdf/encoder-meta';
-
-export interface EncoderSupportMap {
-  [key: string]: boolean;
-}
-
-export type EncoderState =
-  | identity.EncoderState
-  | oxiPNG.EncoderState
-  | mozJPEG.EncoderState
-  | webP.EncoderState
-  | avif.EncoderState
-  | browserPNG.EncoderState
-  | browserJPEG.EncoderState
-  | browserWebP.EncoderState
-  | browserGIF.EncoderState
-  | browserTIFF.EncoderState
-  | browserJP2.EncoderState
-  | browserBMP.EncoderState
-  | browserPDF.EncoderState;
-
-export type EncoderOptions =
-  | identity.EncodeOptions
-  | oxiPNG.EncodeOptions
-  | mozJPEG.EncodeOptions
-  | webP.EncodeOptions
-  | avif.EncodeOptions
-  | browserPNG.EncodeOptions
-  | browserJPEG.EncodeOptions
-  | browserWebP.EncodeOptions
-  | browserGIF.EncodeOptions
-  | browserTIFF.EncodeOptions
-  | browserJP2.EncodeOptions
-  | browserBMP.EncodeOptions
-  | browserPDF.EncodeOptions;
-
-export type EncoderType = keyof typeof encoderMap;
-
-export const encoderMap = {
-  [identity.type]: identity,
-  [oxiPNG.type]: oxiPNG,
-  [mozJPEG.type]: mozJPEG,
-  [webP.type]: webP,
-  [avif.type]: avif,
-  [browserPNG.type]: browserPNG,
-  [browserJPEG.type]: browserJPEG,
-  [browserWebP.type]: browserWebP,
-  // Safari & Firefox only:
-  [browserBMP.type]: browserBMP,
-  // Safari only:
-  [browserGIF.type]: browserGIF,
-  [browserTIFF.type]: browserTIFF,
-  [browserJP2.type]: browserJP2,
-  [browserPDF.type]: browserPDF,
-};
-
-export const encoders = Array.from(Object.values(encoderMap));
-
-/** Does this browser support a given encoder? Indexed by label */
-export const encodersSupported = Promise.resolve().then(async () => {
-  const encodersSupported: EncoderSupportMap = {};
-
-  await Promise.all(
-    encoders.map(async (encoder) => {
-      // If the encoder provides a featureTest, call it, otherwise assume supported.
-      const isSupported =
-        !('featureTest' in encoder) || (await encoder.featureTest());
-      encodersSupported[encoder.type] = isSupported;
-    }),
-  );
-
-  return encodersSupported;
-});
diff --git a/src_old/codecs/generic/quality-option.tsx b/src_old/codecs/generic/quality-option.tsx
deleted file mode 100644
index e02300e5..00000000
--- a/src_old/codecs/generic/quality-option.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { h, Component } from 'preact';
-import { bind } from '../../lib/initial-util';
-import * as style from '../../components/Options/style.scss';
-import Range from '../../components/range';
-
-interface EncodeOptions {
-  quality: number;
-}
-
-type Props = {
-  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void;
-};
-
-interface QualityOptionArg {
-  min?: number;
-  max?: number;
-  step?: number;
-}
-
-export default function qualityOption(opts: QualityOptionArg = {}) {
-  const { min = 0, max = 100, step = 1 } = opts;
-
-  class QualityOptions extends Component<Props, {}> {
-    @bind
-    onChange(event: Event) {
-      const el = event.currentTarget as HTMLInputElement;
-      this.props.onChange({ quality: Number(el.value) });
-    }
-
-    render({ options }: Props) {
-      return (
-        <div class={style.optionsSection}>
-          <div class={style.optionOneCell}>
-            <Range
-              name="quality"
-              min={min}
-              max={max}
-              step={step || 'any'}
-              value={options.quality}
-              onInput={this.onChange}
-            >
-              Quality:
-            </Range>
-          </div>
-        </div>
-      );
-    }
-  }
-
-  return QualityOptions;
-}
diff --git a/src_old/codecs/generic/util.ts b/src_old/codecs/generic/util.ts
deleted file mode 100644
index 5b704693..00000000
--- a/src_old/codecs/generic/util.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { canvasEncode } from '../../lib/util';
-
-export async function canvasEncodeTest(mimeType: string) {
-  try {
-    const blob = await canvasEncode(new ImageData(1, 1), mimeType);
-    // According to the spec, the blob should be null if the format isn't supported…
-    if (!blob) return false;
-    // …but Safari & Firefox fall back to PNG, so we need to check the mime type.
-    return blob.type === mimeType;
-  } catch (err) {
-    return false;
-  }
-}
diff --git a/src_old/codecs/hqx/processor-meta.ts b/src_old/codecs/hqx/processor-meta.ts
deleted file mode 100644
index 29417d71..00000000
--- a/src_old/codecs/hqx/processor-meta.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-export interface HqxOptions {
-  factor: 2 | 3 | 4;
-}
diff --git a/src_old/codecs/hqx/processor.ts b/src_old/codecs/hqx/processor.ts
deleted file mode 100644
index be67a917..00000000
--- a/src_old/codecs/hqx/processor.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-import { resize } from '../../../codecs/hqx/pkg';
-import { HqxOptions } from './processor-meta';
-
-export async function hqx(
-  data: ImageData,
-  opts: HqxOptions,
-): Promise<ImageData> {
-  const input = data;
-  const result = resize(
-    new Uint32Array(input.data.buffer),
-    input.width,
-    input.height,
-    opts.factor,
-  );
-  return new ImageData(
-    new Uint8ClampedArray(result.buffer),
-    data.width * opts.factor,
-    data.height * opts.factor,
-  );
-}
diff --git a/src_old/codecs/identity/encoder-meta.ts b/src_old/codecs/identity/encoder-meta.ts
deleted file mode 100644
index 75bd348b..00000000
--- a/src_old/codecs/identity/encoder-meta.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export interface EncodeOptions {}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'identity';
-export const label = 'Original image';
-export const defaultOptions: EncodeOptions = {};
diff --git a/src_old/codecs/imagequant/options.tsx b/src_old/codecs/imagequant/options.tsx
deleted file mode 100644
index 26f9d7d7..00000000
--- a/src_old/codecs/imagequant/options.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { h, Component } from 'preact';
-import { bind } from '../../lib/initial-util';
-import {
-  inputFieldValueAsNumber,
-  konami,
-  preventDefault,
-} from '../../lib/util';
-import { QuantizeOptions } from './processor-meta';
-import * as style from '../../components/Options/style.scss';
-import Expander from '../../components/expander';
-import Select from '../../components/select';
-import Range from '../../components/range';
-
-const konamiPromise = konami();
-
-interface Props {
-  options: QuantizeOptions;
-  onChange(newOptions: QuantizeOptions): void;
-}
-
-interface State {
-  extendedSettings: boolean;
-}
-
-export default class QuantizerOptions extends Component<Props, State> {
-  state: State = { extendedSettings: false };
-
-  componentDidMount() {
-    konamiPromise.then(() => {
-      this.setState({ extendedSettings: true });
-    });
-  }
-
-  @bind
-  onChange(event: Event) {
-    const form = (event.currentTarget as HTMLInputElement).closest(
-      'form',
-    ) as HTMLFormElement;
-    const { options } = this.props;
-
-    const newOptions: QuantizeOptions = {
-      zx: inputFieldValueAsNumber(form.zx, options.zx),
-      maxNumColors: inputFieldValueAsNumber(
-        form.maxNumColors,
-        options.maxNumColors,
-      ),
-      dither: inputFieldValueAsNumber(form.dither),
-    };
-    this.props.onChange(newOptions);
-  }
-
-  render({ options }: Props, { extendedSettings }: State) {
-    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
-        <Expander>
-          {extendedSettings ? (
-            <label class={style.optionTextFirst}>
-              Type:
-              <Select
-                name="zx"
-                value={'' + options.zx}
-                onChange={this.onChange}
-              >
-                <option value="0">Standard</option>
-                <option value="1">ZX</option>
-              </Select>
-            </label>
-          ) : null}
-        </Expander>
-        <Expander>
-          {options.zx ? null : (
-            <div class={style.optionOneCell}>
-              <Range
-                name="maxNumColors"
-                min="2"
-                max="256"
-                value={options.maxNumColors}
-                onInput={this.onChange}
-              >
-                Colors:
-              </Range>
-            </div>
-          )}
-        </Expander>
-        <div class={style.optionOneCell}>
-          <Range
-            name="dither"
-            min="0"
-            max="1"
-            step="0.01"
-            value={options.dither}
-            onInput={this.onChange}
-          >
-            Dithering:
-          </Range>
-        </div>
-      </form>
-    );
-  }
-}
diff --git a/src_old/codecs/imagequant/processor-meta.ts b/src_old/codecs/imagequant/processor-meta.ts
deleted file mode 100644
index 960cf7e1..00000000
--- a/src_old/codecs/imagequant/processor-meta.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export interface QuantizeOptions {
-  zx: number;
-  maxNumColors: number;
-  dither: number;
-}
-
-export const defaultOptions: QuantizeOptions = {
-  zx: 0,
-  maxNumColors: 256,
-  dither: 1.0,
-};
diff --git a/src_old/codecs/imagequant/processor.ts b/src_old/codecs/imagequant/processor.ts
deleted file mode 100644
index b92106f7..00000000
--- a/src_old/codecs/imagequant/processor.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import imagequant, {
-  QuantizerModule,
-} from '../../../codecs/imagequant/imagequant';
-import wasmUrl from '../../../codecs/imagequant/imagequant.wasm';
-import { QuantizeOptions } from './processor-meta';
-import { initEmscriptenModule } from '../util';
-
-let emscriptenModule: Promise<QuantizerModule>;
-
-export async function process(
-  data: ImageData,
-  opts: QuantizeOptions,
-): Promise<ImageData> {
-  if (!emscriptenModule)
-    emscriptenModule = initEmscriptenModule(imagequant, wasmUrl);
-
-  const module = await emscriptenModule;
-
-  const result = opts.zx
-    ? module.zx_quantize(data.data, data.width, data.height, opts.dither)
-    : module.quantize(
-        data.data,
-        data.width,
-        data.height,
-        opts.maxNumColors,
-        opts.dither,
-      );
-
-  return new ImageData(result, data.width, data.height);
-}
diff --git a/src_old/codecs/input-processors.ts b/src_old/codecs/input-processors.ts
deleted file mode 100644
index ff3a654b..00000000
--- a/src_old/codecs/input-processors.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { defaultOptions as rotateDefaultOptions } from './rotate/processor-meta';
-
-export interface InputProcessorState {
-  rotate: import('./rotate/processor-meta').RotateOptions;
-}
-
-export const defaultInputProcessorState: InputProcessorState = {
-  rotate: rotateDefaultOptions,
-};
diff --git a/src_old/codecs/mozjpeg/encoder-meta.ts b/src_old/codecs/mozjpeg/encoder-meta.ts
deleted file mode 100644
index 936875d6..00000000
--- a/src_old/codecs/mozjpeg/encoder-meta.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-export enum MozJpegColorSpace {
-  GRAYSCALE = 1,
-  RGB,
-  YCbCr,
-}
-
-export interface EncodeOptions {
-  quality: number;
-  baseline: boolean;
-  arithmetic: boolean;
-  progressive: boolean;
-  optimize_coding: boolean;
-  smoothing: number;
-  color_space: MozJpegColorSpace;
-  quant_table: number;
-  trellis_multipass: boolean;
-  trellis_opt_zero: boolean;
-  trellis_opt_table: boolean;
-  trellis_loops: number;
-  auto_subsample: boolean;
-  chroma_subsample: number;
-  separate_chroma_quality: boolean;
-  chroma_quality: number;
-}
-
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'mozjpeg';
-export const label = 'MozJPEG';
-export const mimeType = 'image/jpeg';
-export const extension = 'jpg';
-export const defaultOptions: EncodeOptions = {
-  quality: 75,
-  baseline: false,
-  arithmetic: false,
-  progressive: true,
-  optimize_coding: true,
-  smoothing: 0,
-  color_space: MozJpegColorSpace.YCbCr,
-  quant_table: 3,
-  trellis_multipass: false,
-  trellis_opt_zero: false,
-  trellis_opt_table: false,
-  trellis_loops: 1,
-  auto_subsample: true,
-  chroma_subsample: 2,
-  separate_chroma_quality: false,
-  chroma_quality: 75,
-};
diff --git a/src_old/codecs/mozjpeg/encoder.ts b/src_old/codecs/mozjpeg/encoder.ts
deleted file mode 100644
index 8c7064c7..00000000
--- a/src_old/codecs/mozjpeg/encoder.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-import mozjpeg_enc, {
-  MozJPEGModule,
-} from '../../../codecs/mozjpeg_enc/mozjpeg_enc';
-import wasmUrl from '../../../codecs/mozjpeg_enc/mozjpeg_enc.wasm';
-import { EncodeOptions } from './encoder-meta';
-import { initEmscriptenModule } from '../util';
-
-let emscriptenModule: Promise<MozJPEGModule>;
-
-export async function encode(
-  data: ImageData,
-  options: EncodeOptions,
-): Promise<ArrayBuffer> {
-  if (!emscriptenModule)
-    emscriptenModule = initEmscriptenModule(mozjpeg_enc, wasmUrl);
-
-  const module = await emscriptenModule;
-  const resultView = module.encode(data.data, data.width, data.height, options);
-  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
-  return resultView.buffer as ArrayBuffer;
-}
diff --git a/src_old/codecs/mozjpeg/options.tsx b/src_old/codecs/mozjpeg/options.tsx
deleted file mode 100644
index 858e4493..00000000
--- a/src_old/codecs/mozjpeg/options.tsx
+++ /dev/null
@@ -1,291 +0,0 @@
-import { h, Component } from 'preact';
-import { bind } from '../../lib/initial-util';
-import {
-  inputFieldChecked,
-  inputFieldValueAsNumber,
-  preventDefault,
-} from '../../lib/util';
-import { EncodeOptions, MozJpegColorSpace } from './encoder-meta';
-import * as style from '../../components/Options/style.scss';
-import Checkbox from '../../components/checkbox';
-import Expander from '../../components/expander';
-import Select from '../../components/select';
-import Range from '../../components/range';
-import linkState from 'linkstate';
-
-interface Props {
-  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void;
-}
-
-interface State {
-  showAdvanced: boolean;
-}
-
-export default class MozJPEGEncoderOptions extends Component<Props, State> {
-  state: State = {
-    showAdvanced: false,
-  };
-
-  @bind
-  onChange(event: Event) {
-    const form = (event.currentTarget as HTMLInputElement).closest(
-      'form',
-    ) as HTMLFormElement;
-    const { options } = this.props;
-
-    const newOptions: EncodeOptions = {
-      // Copy over options the form doesn't currently care about, eg arithmetic
-      ...this.props.options,
-      // And now stuff from the form:
-      // .checked
-      baseline: inputFieldChecked(form.baseline, options.baseline),
-      progressive: inputFieldChecked(form.progressive, options.progressive),
-      optimize_coding: inputFieldChecked(
-        form.optimize_coding,
-        options.optimize_coding,
-      ),
-      trellis_multipass: inputFieldChecked(
-        form.trellis_multipass,
-        options.trellis_multipass,
-      ),
-      trellis_opt_zero: inputFieldChecked(
-        form.trellis_opt_zero,
-        options.trellis_opt_zero,
-      ),
-      trellis_opt_table: inputFieldChecked(
-        form.trellis_opt_table,
-        options.trellis_opt_table,
-      ),
-      auto_subsample: inputFieldChecked(
-        form.auto_subsample,
-        options.auto_subsample,
-      ),
-      separate_chroma_quality: inputFieldChecked(
-        form.separate_chroma_quality,
-        options.separate_chroma_quality,
-      ),
-      // .value
-      quality: inputFieldValueAsNumber(form.quality, options.quality),
-      chroma_quality: inputFieldValueAsNumber(
-        form.chroma_quality,
-        options.chroma_quality,
-      ),
-      chroma_subsample: inputFieldValueAsNumber(
-        form.chroma_subsample,
-        options.chroma_subsample,
-      ),
-      smoothing: inputFieldValueAsNumber(form.smoothing, options.smoothing),
-      color_space: inputFieldValueAsNumber(
-        form.color_space,
-        options.color_space,
-      ),
-      quant_table: inputFieldValueAsNumber(
-        form.quant_table,
-        options.quant_table,
-      ),
-      trellis_loops: inputFieldValueAsNumber(
-        form.trellis_loops,
-        options.trellis_loops,
-      ),
-    };
-    this.props.onChange(newOptions);
-  }
-
-  render({ options }: Props, { showAdvanced }: State) {
-    // I'm rendering both lossy and lossless forms, as it becomes much easier when
-    // gathering the data.
-    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
-        <div class={style.optionOneCell}>
-          <Range
-            name="quality"
-            min="0"
-            max="100"
-            value={options.quality}
-            onInput={this.onChange}
-          >
-            Quality:
-          </Range>
-        </div>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            checked={showAdvanced}
-            onChange={linkState(this, 'showAdvanced')}
-          />
-          Show advanced settings
-        </label>
-        <Expander>
-          {showAdvanced ? (
-            <div>
-              <label class={style.optionTextFirst}>
-                Channels:
-                <Select
-                  name="color_space"
-                  value={options.color_space}
-                  onChange={this.onChange}
-                >
-                  <option value={MozJpegColorSpace.GRAYSCALE}>Grayscale</option>
-                  <option value={MozJpegColorSpace.RGB}>RGB</option>
-                  <option value={MozJpegColorSpace.YCbCr}>YCbCr</option>
-                </Select>
-              </label>
-              <Expander>
-                {options.color_space === MozJpegColorSpace.YCbCr ? (
-                  <div>
-                    <label class={style.optionInputFirst}>
-                      <Checkbox
-                        name="auto_subsample"
-                        checked={options.auto_subsample}
-                        onChange={this.onChange}
-                      />
-                      Auto subsample chroma
-                    </label>
-                    <Expander>
-                      {options.auto_subsample ? null : (
-                        <div class={style.optionOneCell}>
-                          <Range
-                            name="chroma_subsample"
-                            min="1"
-                            max="4"
-                            value={options.chroma_subsample}
-                            onInput={this.onChange}
-                          >
-                            Subsample chroma by:
-                          </Range>
-                        </div>
-                      )}
-                    </Expander>
-                    <label class={style.optionInputFirst}>
-                      <Checkbox
-                        name="separate_chroma_quality"
-                        checked={options.separate_chroma_quality}
-                        onChange={this.onChange}
-                      />
-                      Separate chroma quality
-                    </label>
-                    <Expander>
-                      {options.separate_chroma_quality ? (
-                        <div class={style.optionOneCell}>
-                          <Range
-                            name="chroma_quality"
-                            min="0"
-                            max="100"
-                            value={options.chroma_quality}
-                            onInput={this.onChange}
-                          >
-                            Chroma quality:
-                          </Range>
-                        </div>
-                      ) : null}
-                    </Expander>
-                  </div>
-                ) : null}
-              </Expander>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="baseline"
-                  checked={options.baseline}
-                  onChange={this.onChange}
-                />
-                Pointless spec compliance
-              </label>
-              <Expander>
-                {options.baseline ? null : (
-                  <label class={style.optionInputFirst}>
-                    <Checkbox
-                      name="progressive"
-                      checked={options.progressive}
-                      onChange={this.onChange}
-                    />
-                    Progressive rendering
-                  </label>
-                )}
-              </Expander>
-              <Expander>
-                {options.baseline ? (
-                  <label class={style.optionInputFirst}>
-                    <Checkbox
-                      name="optimize_coding"
-                      checked={options.optimize_coding}
-                      onChange={this.onChange}
-                    />
-                    Optimize Huffman table
-                  </label>
-                ) : null}
-              </Expander>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="smoothing"
-                  min="0"
-                  max="100"
-                  value={options.smoothing}
-                  onInput={this.onChange}
-                >
-                  Smoothing:
-                </Range>
-              </div>
-              <label class={style.optionTextFirst}>
-                Quantization:
-                <Select
-                  name="quant_table"
-                  value={options.quant_table}
-                  onChange={this.onChange}
-                >
-                  <option value="0">JPEG Annex K</option>
-                  <option value="1">Flat</option>
-                  <option value="2">MSSIM-tuned Kodak</option>
-                  <option value="3">ImageMagick</option>
-                  <option value="4">PSNR-HVS-M-tuned Kodak</option>
-                  <option value="5">Klein et al</option>
-                  <option value="6">Watson et al</option>
-                  <option value="7">Ahumada et al</option>
-                  <option value="8">Peterson et al</option>
-                </Select>
-              </label>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="trellis_multipass"
-                  checked={options.trellis_multipass}
-                  onChange={this.onChange}
-                />
-                Trellis multipass
-              </label>
-              <Expander>
-                {options.trellis_multipass ? (
-                  <label class={style.optionInputFirst}>
-                    <Checkbox
-                      name="trellis_opt_zero"
-                      checked={options.trellis_opt_zero}
-                      onChange={this.onChange}
-                    />
-                    Optimize zero block runs
-                  </label>
-                ) : null}
-              </Expander>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="trellis_opt_table"
-                  checked={options.trellis_opt_table}
-                  onChange={this.onChange}
-                />
-                Optimize after trellis quantization
-              </label>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="trellis_loops"
-                  min="1"
-                  max="50"
-                  value={options.trellis_loops}
-                  onInput={this.onChange}
-                >
-                  Trellis quantization passes:
-                </Range>
-              </div>
-            </div>
-          ) : null}
-        </Expander>
-      </form>
-    );
-  }
-}
diff --git a/src_old/codecs/oxipng/encoder-meta.ts b/src_old/codecs/oxipng/encoder-meta.ts
deleted file mode 100644
index c853c5bd..00000000
--- a/src_old/codecs/oxipng/encoder-meta.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-export interface EncodeOptions {
-  level: number;
-}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'png';
-export const label = 'OxiPNG';
-export const mimeType = 'image/png';
-export const extension = 'png';
-
-export const defaultOptions: EncodeOptions = {
-  level: 2,
-};
diff --git a/src_old/codecs/oxipng/encoder.ts b/src_old/codecs/oxipng/encoder.ts
deleted file mode 100644
index e576b1e1..00000000
--- a/src_old/codecs/oxipng/encoder.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-import { optimise } from '../../../codecs/oxipng/pkg';
-import { EncodeOptions } from './encoder-meta';
-
-export async function compress(
-  data: ArrayBuffer,
-  options: EncodeOptions,
-): Promise<ArrayBuffer> {
-  return optimise(new Uint8Array(data), options.level).buffer;
-}
diff --git a/src_old/codecs/oxipng/options.tsx b/src_old/codecs/oxipng/options.tsx
deleted file mode 100644
index e5e5c841..00000000
--- a/src_old/codecs/oxipng/options.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import { h, Component } from 'preact';
-import { bind } from '../../lib/initial-util';
-import { inputFieldValueAsNumber, preventDefault } from '../../lib/util';
-import { EncodeOptions } from './encoder-meta';
-import Range from '../../components/range';
-import * as style from '../../components/Options/style.scss';
-
-type Props = {
-  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void;
-};
-
-export default class OxiPNGEncoderOptions extends Component<Props, {}> {
-  @bind
-  onChange(event: Event) {
-    const form = (event.currentTarget as HTMLInputElement).closest(
-      'form',
-    ) as HTMLFormElement;
-
-    const options: EncodeOptions = {
-      level: inputFieldValueAsNumber(form.level),
-    };
-    this.props.onChange(options);
-  }
-
-  render({ options }: Props) {
-    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
-        <div class={style.optionOneCell}>
-          <Range
-            name="level"
-            min="0"
-            max="3"
-            step="1"
-            value={options.level}
-            onInput={this.onChange}
-          >
-            Effort:
-          </Range>
-        </div>
-      </form>
-    );
-  }
-}
diff --git a/src_old/codecs/preprocessors.ts b/src_old/codecs/preprocessors.ts
deleted file mode 100644
index 653f0f5c..00000000
--- a/src_old/codecs/preprocessors.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-import {
-  QuantizeOptions,
-  defaultOptions as quantizerDefaultOptions,
-} from './imagequant/processor-meta';
-import {
-  ResizeOptions,
-  defaultOptions as resizeDefaultOptions,
-} from './resize/processor-meta';
-
-interface Enableable {
-  enabled: boolean;
-}
-export interface PreprocessorState {
-  quantizer: Enableable & QuantizeOptions;
-  resize: Enableable & ResizeOptions;
-}
-
-export const defaultPreprocessorState: PreprocessorState = {
-  quantizer: {
-    enabled: false,
-    ...quantizerDefaultOptions,
-  },
-  resize: {
-    enabled: false,
-    ...resizeDefaultOptions,
-  },
-};
diff --git a/src_old/codecs/processor-worker/index.ts b/src_old/codecs/processor-worker/index.ts
deleted file mode 100644
index 6de2f93e..00000000
--- a/src_old/codecs/processor-worker/index.ts
+++ /dev/null
@@ -1,131 +0,0 @@
-import { expose } from 'comlink';
-import { isHqx } from '../resize/processor-meta';
-import { clamp } from '../util';
-
-function timed<T>(name: string, func: () => Promise<T>) {
-  console.time(name);
-  return func().finally(() => console.timeEnd(name));
-}
-
-async function mozjpegEncode(
-  data: ImageData,
-  options: import('../mozjpeg/encoder-meta').EncodeOptions,
-): Promise<ArrayBuffer> {
-  const { encode } = await import(
-    /* webpackChunkName: "process-mozjpeg-enc" */
-    '../mozjpeg/encoder'
-  );
-  return timed('mozjpegEncode', () => encode(data, options));
-}
-
-async function quantize(
-  data: ImageData,
-  opts: import('../imagequant/processor-meta').QuantizeOptions,
-): Promise<ImageData> {
-  const { process } = await import(
-    /* webpackChunkName: "process-imagequant" */
-    '../imagequant/processor'
-  );
-  return timed('quantize', () => process(data, opts));
-}
-
-async function rotate(
-  data: ImageData,
-  opts: import('../rotate/processor-meta').RotateOptions,
-): Promise<ImageData> {
-  const { rotate } = await import(
-    /* webpackChunkName: "process-rotate" */
-    '../rotate/processor'
-  );
-
-  return timed('rotate', () => rotate(data, opts));
-}
-
-async function resize(
-  data: ImageData,
-  opts: import('../resize/processor-meta').WorkerResizeOptions,
-): Promise<ImageData> {
-  if (isHqx(opts)) {
-    const { hqx } = await import(
-      /* webpackChunkName: "process-hqx" */
-      '../hqx/processor'
-    );
-
-    const widthRatio = opts.width / data.width;
-    const heightRatio = opts.height / data.height;
-    const ratio = Math.max(widthRatio, heightRatio);
-    if (ratio <= 1) return data;
-    const factor = clamp(Math.ceil(ratio), { min: 2, max: 4 }) as 2 | 3 | 4;
-    return timed('hqx', () => hqx(data, { factor }));
-  }
-  const { resize } = await import(
-    /* webpackChunkName: "process-resize" */
-    '../resize/processor'
-  );
-
-  return timed('resize', () => resize(data, opts));
-}
-
-async function oxiPngEncode(
-  data: ArrayBuffer,
-  options: import('../oxipng/encoder-meta').EncodeOptions,
-): Promise<ArrayBuffer> {
-  const { compress } = await import(
-    /* webpackChunkName: "process-oxipng" */
-    '../oxipng/encoder'
-  );
-  return timed('oxiPngEncode', () => compress(data, options));
-}
-
-async function webpEncode(
-  data: ImageData,
-  options: import('../webp/encoder-meta').EncodeOptions,
-): Promise<ArrayBuffer> {
-  const { encode } = await import(
-    /* webpackChunkName: "process-webp-enc" */
-    '../webp/encoder'
-  );
-  return timed('webpEncode', () => encode(data, options));
-}
-
-async function webpDecode(data: ArrayBuffer): Promise<ImageData> {
-  const { decode } = await import(
-    /* webpackChunkName: "process-webp-dec" */
-    '../webp/decoder'
-  );
-  return timed('webpDecode', () => decode(data));
-}
-
-async function avifEncode(
-  data: ImageData,
-  options: import('../avif/encoder-meta').EncodeOptions,
-): Promise<ArrayBuffer> {
-  const { encode } = await import(
-    /* webpackChunkName: "process-avif-enc" */
-    '../avif/encoder'
-  );
-  return timed('avifEncode', () => encode(data, options));
-}
-
-async function avifDecode(data: ArrayBuffer): Promise<ImageData> {
-  const { decode } = await import(
-    /* webpackChunkName: "process-avif-dec" */
-    '../avif/decoder'
-  );
-  return timed('avifDencode', () => decode(data));
-}
-
-const exports = {
-  mozjpegEncode,
-  quantize,
-  rotate,
-  resize,
-  oxiPngEncode,
-  webpEncode,
-  webpDecode,
-  avifEncode,
-  avifDecode,
-};
-export type ProcessorWorkerApi = typeof exports;
-
-expose(exports, self);
diff --git a/src_old/codecs/processor-worker/tiny.avif b/src_old/codecs/processor-worker/tiny.avif
deleted file mode 100644
index bea7e3da..00000000
Binary files a/src_old/codecs/processor-worker/tiny.avif and /dev/null differ
diff --git a/src_old/codecs/processor-worker/tiny.webp b/src_old/codecs/processor-worker/tiny.webp
deleted file mode 100644
index 9652d275..00000000
Binary files a/src_old/codecs/processor-worker/tiny.webp and /dev/null differ
diff --git a/src_old/codecs/processor-worker/tsconfig.json b/src_old/codecs/processor-worker/tsconfig.json
deleted file mode 100644
index a56d982f..00000000
--- a/src_old/codecs/processor-worker/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "strict": true,
-    "target": "esnext",
-    "module": "esnext",
-    "lib": ["webworker", "esnext"],
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "noUnusedLocals": true,
-    "sourceMap": true,
-    "allowJs": false,
-    "baseUrl": "."
-  }
-}
diff --git a/src_old/codecs/processor.ts b/src_old/codecs/processor.ts
deleted file mode 100644
index 4bed5f01..00000000
--- a/src_old/codecs/processor.ts
+++ /dev/null
@@ -1,251 +0,0 @@
-import { proxy } from 'comlink';
-import { QuantizeOptions } from './imagequant/processor-meta';
-import { canvasEncode, blobToArrayBuffer } from '../lib/util';
-import { EncodeOptions as MozJPEGEncoderOptions } from './mozjpeg/encoder-meta';
-import { EncodeOptions as OxiPNGEncoderOptions } from './oxipng/encoder-meta';
-import { EncodeOptions as WebPEncoderOptions } from './webp/encoder-meta';
-import { EncodeOptions as AvifEncoderOptions } from './avif/encoder-meta';
-import { EncodeOptions as BrowserJPEGOptions } from './browser-jpeg/encoder-meta';
-import { EncodeOptions as BrowserWebpEncodeOptions } from './browser-webp/encoder-meta';
-import {
-  BrowserResizeOptions,
-  VectorResizeOptions,
-} from './resize/processor-meta';
-import { browserResize, vectorResize } from './resize/processor-sync';
-import * as browserBMP from './browser-bmp/encoder';
-import * as browserPNG from './browser-png/encoder';
-import * as browserJPEG from './browser-jpeg/encoder';
-import * as browserWebP from './browser-webp/encoder';
-import * as browserGIF from './browser-gif/encoder';
-import * as browserTIFF from './browser-tiff/encoder';
-import * as browserJP2 from './browser-jp2/encoder';
-import * as browserPDF from './browser-pdf/encoder';
-import { bind } from '../lib/initial-util';
-
-type ProcessorWorkerApi = import('./processor-worker').ProcessorWorkerApi;
-
-/** How long the worker should be idle before terminating. */
-const workerTimeout = 10000;
-
-interface ProcessingJobOptions {
-  needsWorker?: boolean;
-}
-
-export default class Processor {
-  /** Worker instance associated with this processor. */
-  private _worker?: Worker;
-  /** Comlinked worker API. */
-  private _workerApi?: ProcessorWorkerApi;
-  /** Rejector for a pending promise. */
-  private _abortRejector?: (err: Error) => void;
-  /** Is work currently happening? */
-  private _busy = false;
-  /** Incementing ID so we can tell if a job has been superseded. */
-  private _latestJobId: number = 0;
-  /** setTimeout ID for killing the worker when idle. */
-  private _workerTimeoutId: number = 0;
-
-  /**
-   * Decorator that manages the (re)starting of the worker and aborting existing jobs. Not all
-   * processing jobs require a worker (e.g. the main thread canvas encodes), use the needsWorker
-   * option to control this.
-   */
-  private static _processingJob(options: ProcessingJobOptions = {}) {
-    const { needsWorker = false } = options;
-
-    return (
-      target: Processor,
-      propertyKey: string,
-      descriptor: PropertyDescriptor,
-    ): void => {
-      const processingFunc = descriptor.value;
-
-      descriptor.value = async function (this: Processor, ...args: any[]) {
-        this._latestJobId += 1;
-        const jobId = this._latestJobId;
-        this.abortCurrent();
-
-        if (needsWorker) self.clearTimeout(this._workerTimeoutId);
-
-        if (!this._worker && needsWorker) {
-          // worker-loader does magic here.
-          // @ts-ignore - Typescript doesn't know about the 2nd param to new Worker, and the
-          // definition can't be overwritten.
-          this._worker = new Worker('./processor-worker', {
-            name: 'processor-worker',
-            type: 'module',
-          }) as Worker;
-          // Need to do some TypeScript trickery to make the type match.
-          this._workerApi = (proxy(this._worker) as any) as ProcessorWorkerApi;
-        }
-
-        this._busy = true;
-
-        const returnVal = Promise.race([
-          processingFunc.call(this, ...args),
-          new Promise((_, reject) => {
-            this._abortRejector = reject;
-          }),
-        ]);
-
-        // Wait for the operation to settle.
-        await returnVal.catch(() => {});
-
-        // If no other jobs are happening, cleanup.
-        if (jobId === this._latestJobId) this._jobCleanup();
-
-        return returnVal;
-      };
-    };
-  }
-
-  private _jobCleanup(): void {
-    this._busy = false;
-
-    if (!this._worker) return;
-
-    // If the worker is unused for 10 seconds, remove it to save memory.
-    this._workerTimeoutId = self.setTimeout(
-      this.terminateWorker,
-      workerTimeout,
-    );
-  }
-
-  /** Abort the current job, if any */
-  abortCurrent() {
-    if (!this._busy) return;
-    if (!this._abortRejector)
-      throw Error("There must be a rejector if it's busy");
-    this._abortRejector(new DOMException('Aborted', 'AbortError'));
-    this._abortRejector = undefined;
-    this._busy = false;
-    this.terminateWorker();
-  }
-
-  @bind
-  terminateWorker() {
-    if (!this._worker) return;
-    this._worker.terminate();
-    this._worker = undefined;
-  }
-
-  // Off main thread jobs:
-  @Processor._processingJob({ needsWorker: true })
-  imageQuant(data: ImageData, opts: QuantizeOptions): Promise<ImageData> {
-    return this._workerApi!.quantize(data, opts);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  rotate(
-    data: ImageData,
-    opts: import('./rotate/processor-meta').RotateOptions,
-  ): Promise<ImageData> {
-    return this._workerApi!.rotate(data, opts);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  workerResize(
-    data: ImageData,
-    opts: import('./resize/processor-meta').WorkerResizeOptions,
-  ): Promise<ImageData> {
-    return this._workerApi!.resize(data, opts);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  mozjpegEncode(
-    data: ImageData,
-    opts: MozJPEGEncoderOptions,
-  ): Promise<ArrayBuffer> {
-    return this._workerApi!.mozjpegEncode(data, opts);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  async oxiPngEncode(
-    data: ImageData,
-    opts: OxiPNGEncoderOptions,
-  ): Promise<ArrayBuffer> {
-    // OxiPNG expects PNG input.
-    const pngBlob = await canvasEncode(data, 'image/png');
-    const pngBuffer = await blobToArrayBuffer(pngBlob);
-    return this._workerApi!.oxiPngEncode(pngBuffer, opts);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  webpEncode(data: ImageData, opts: WebPEncoderOptions): Promise<ArrayBuffer> {
-    return this._workerApi!.webpEncode(data, opts);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  async webpDecode(blob: Blob): Promise<ImageData> {
-    const data = await blobToArrayBuffer(blob);
-    return this._workerApi!.webpDecode(data);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  async avifDecode(blob: Blob): Promise<ImageData> {
-    const data = await blobToArrayBuffer(blob);
-    return this._workerApi!.avifDecode(data);
-  }
-
-  @Processor._processingJob({ needsWorker: true })
-  avifEncode(data: ImageData, opts: AvifEncoderOptions): Promise<ArrayBuffer> {
-    return this._workerApi!.avifEncode(data, opts);
-  }
-
-  // Not-worker jobs:
-
-  @Processor._processingJob()
-  browserBmpEncode(data: ImageData): Promise<Blob> {
-    return browserBMP.encode(data);
-  }
-
-  @Processor._processingJob()
-  browserPngEncode(data: ImageData): Promise<Blob> {
-    return browserPNG.encode(data);
-  }
-
-  @Processor._processingJob()
-  browserJpegEncode(data: ImageData, opts: BrowserJPEGOptions): Promise<Blob> {
-    return browserJPEG.encode(data, opts);
-  }
-
-  @Processor._processingJob()
-  browserWebpEncode(
-    data: ImageData,
-    opts: BrowserWebpEncodeOptions,
-  ): Promise<Blob> {
-    return browserWebP.encode(data, opts);
-  }
-
-  @Processor._processingJob()
-  browserGifEncode(data: ImageData): Promise<Blob> {
-    return browserGIF.encode(data);
-  }
-
-  @Processor._processingJob()
-  browserTiffEncode(data: ImageData): Promise<Blob> {
-    return browserTIFF.encode(data);
-  }
-
-  @Processor._processingJob()
-  browserJp2Encode(data: ImageData): Promise<Blob> {
-    return browserJP2.encode(data);
-  }
-
-  @Processor._processingJob()
-  browserPdfEncode(data: ImageData): Promise<Blob> {
-    return browserPDF.encode(data);
-  }
-
-  // Synchronous jobs
-
-  resize(data: ImageData, opts: BrowserResizeOptions) {
-    this.abortCurrent();
-    return browserResize(data, opts);
-  }
-
-  vectorResize(data: HTMLImageElement, opts: VectorResizeOptions) {
-    this.abortCurrent();
-    return vectorResize(data, opts);
-  }
-}
diff --git a/src_old/codecs/resize/options.tsx b/src_old/codecs/resize/options.tsx
deleted file mode 100644
index e55a2060..00000000
--- a/src_old/codecs/resize/options.tsx
+++ /dev/null
@@ -1,254 +0,0 @@
-import { h, Component } from 'preact';
-import linkState from 'linkstate';
-import { bind, linkRef } from '../../lib/initial-util';
-import {
-  inputFieldValueAsNumber,
-  inputFieldValue,
-  preventDefault,
-  inputFieldChecked,
-} from '../../lib/util';
-import { ResizeOptions, isWorkerOptions } from './processor-meta';
-import * as style from '../../components/Options/style.scss';
-import Checkbox from '../../components/checkbox';
-import Expander from '../../components/expander';
-import Select from '../../components/select';
-
-interface Props {
-  isVector: Boolean;
-  inputWidth: number;
-  inputHeight: number;
-  options: ResizeOptions;
-  onChange(newOptions: ResizeOptions): void;
-}
-
-interface State {
-  maintainAspect: boolean;
-}
-
-const sizePresets = [0.25, 0.3333, 0.5, 1, 2, 3, 4];
-
-export default class ResizerOptions extends Component<Props, State> {
-  state: State = {
-    maintainAspect: true,
-  };
-
-  private form?: HTMLFormElement;
-  private presetWidths: { [idx: number]: number } = {};
-  private presetHeights: { [idx: number]: number } = {};
-
-  constructor(props: Props) {
-    super(props);
-    this.generatePresetValues(props.inputWidth, props.inputHeight);
-  }
-
-  private reportOptions() {
-    const form = this.form!;
-    const width = form.width as HTMLInputElement;
-    const height = form.height as HTMLInputElement;
-    const { options } = this.props;
-
-    if (!width.checkValidity() || !height.checkValidity()) return;
-
-    const newOptions: ResizeOptions = {
-      width: inputFieldValueAsNumber(width),
-      height: inputFieldValueAsNumber(height),
-      method: form.resizeMethod.value,
-      premultiply: inputFieldChecked(form.premultiply, true),
-      linearRGB: inputFieldChecked(form.linearRGB, true),
-      // Casting, as the formfield only returns the correct values.
-      fitMethod: inputFieldValue(
-        form.fitMethod,
-        options.fitMethod,
-      ) as ResizeOptions['fitMethod'],
-    };
-    this.props.onChange(newOptions);
-  }
-
-  @bind
-  private onChange() {
-    this.reportOptions();
-  }
-
-  private getAspect() {
-    return this.props.inputWidth / this.props.inputHeight;
-  }
-
-  componentDidUpdate(prevProps: Props, prevState: State) {
-    if (!prevState.maintainAspect && this.state.maintainAspect) {
-      this.form!.height.value = Math.round(
-        Number(this.form!.width.value) / this.getAspect(),
-      );
-      this.reportOptions();
-    }
-  }
-
-  componentWillReceiveProps(nextProps: Props) {
-    if (
-      this.props.inputWidth !== nextProps.inputWidth ||
-      this.props.inputHeight !== nextProps.inputHeight
-    ) {
-      this.generatePresetValues(nextProps.inputWidth, nextProps.inputHeight);
-    }
-  }
-
-  @bind
-  private onWidthInput() {
-    if (this.state.maintainAspect) {
-      const width = inputFieldValueAsNumber(this.form!.width);
-      this.form!.height.value = Math.round(width / this.getAspect());
-    }
-
-    this.reportOptions();
-  }
-
-  @bind
-  private onHeightInput() {
-    if (this.state.maintainAspect) {
-      const height = inputFieldValueAsNumber(this.form!.height);
-      this.form!.width.value = Math.round(height * this.getAspect());
-    }
-
-    this.reportOptions();
-  }
-
-  private generatePresetValues(width: number, height: number) {
-    for (const preset of sizePresets) {
-      this.presetWidths[preset] = Math.round(width * preset);
-      this.presetHeights[preset] = Math.round(height * preset);
-    }
-  }
-
-  private getPreset(): number | string {
-    const { width, height } = this.props.options;
-
-    for (const preset of sizePresets) {
-      if (
-        width === this.presetWidths[preset] &&
-        height === this.presetHeights[preset]
-      )
-        return preset;
-    }
-
-    return 'custom';
-  }
-
-  @bind
-  private onPresetChange(event: Event) {
-    const select = event.target as HTMLSelectElement;
-    if (select.value === 'custom') return;
-    const multiplier = Number(select.value);
-    (this.form!.width as HTMLInputElement).value =
-      Math.round(this.props.inputWidth * multiplier) + '';
-    (this.form!.height as HTMLInputElement).value =
-      Math.round(this.props.inputHeight * multiplier) + '';
-    this.reportOptions();
-  }
-
-  render({ options, isVector }: Props, { maintainAspect }: State) {
-    return (
-      <form
-        ref={linkRef(this, 'form')}
-        class={style.optionsSection}
-        onSubmit={preventDefault}
-      >
-        <label class={style.optionTextFirst}>
-          Method:
-          <Select
-            name="resizeMethod"
-            value={options.method}
-            onChange={this.onChange}
-          >
-            {isVector && <option value="vector">Vector</option>}
-            <option value="lanczos3">Lanczos3</option>
-            <option value="mitchell">Mitchell</option>
-            <option value="catrom">Catmull-Rom</option>
-            <option value="triangle">Triangle (bilinear)</option>
-            <option value="hqx">hqx (pixel art)</option>
-            <option value="browser-pixelated">Browser pixelated</option>
-            <option value="browser-low">Browser low quality</option>
-            <option value="browser-medium">Browser medium quality</option>
-            <option value="browser-high">Browser high quality</option>
-          </Select>
-        </label>
-        <label class={style.optionTextFirst}>
-          Preset:
-          <Select value={this.getPreset()} onChange={this.onPresetChange}>
-            {sizePresets.map((preset) => (
-              <option value={preset}>{preset * 100}%</option>
-            ))}
-            <option value="custom">Custom</option>
-          </Select>
-        </label>
-        <label class={style.optionTextFirst}>
-          Width:
-          <input
-            required
-            class={style.textField}
-            name="width"
-            type="number"
-            min="1"
-            value={'' + options.width}
-            onInput={this.onWidthInput}
-          />
-        </label>
-        <label class={style.optionTextFirst}>
-          Height:
-          <input
-            required
-            class={style.textField}
-            name="height"
-            type="number"
-            min="1"
-            value={'' + options.height}
-            onInput={this.onHeightInput}
-          />
-        </label>
-        <Expander>
-          {isWorkerOptions(options) ? (
-            <label class={style.optionInputFirst}>
-              <Checkbox
-                name="premultiply"
-                checked={options.premultiply}
-                onChange={this.onChange}
-              />
-              Premultiply alpha channel
-            </label>
-          ) : null}
-          {isWorkerOptions(options) ? (
-            <label class={style.optionInputFirst}>
-              <Checkbox
-                name="linearRGB"
-                checked={options.linearRGB}
-                onChange={this.onChange}
-              />
-              Linear RGB
-            </label>
-          ) : null}
-        </Expander>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            name="maintainAspect"
-            checked={maintainAspect}
-            onChange={linkState(this, 'maintainAspect')}
-          />
-          Maintain aspect ratio
-        </label>
-        <Expander>
-          {maintainAspect ? null : (
-            <label class={style.optionTextFirst}>
-              Fit method:
-              <Select
-                name="fitMethod"
-                value={options.fitMethod}
-                onChange={this.onChange}
-              >
-                <option value="stretch">Stretch</option>
-                <option value="contain">Contain</option>
-              </Select>
-            </label>
-          )}
-        </Expander>
-      </form>
-    );
-  }
-}
diff --git a/src_old/codecs/resize/processor-meta.ts b/src_old/codecs/resize/processor-meta.ts
deleted file mode 100644
index ebbf64bf..00000000
--- a/src_old/codecs/resize/processor-meta.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-type BrowserResizeMethods =
-  | 'browser-pixelated'
-  | 'browser-low'
-  | 'browser-medium'
-  | 'browser-high';
-type WorkerResizeMethods =
-  | 'triangle'
-  | 'catrom'
-  | 'mitchell'
-  | 'lanczos3'
-  | 'hqx';
-const workerResizeMethods: WorkerResizeMethods[] = [
-  'triangle',
-  'catrom',
-  'mitchell',
-  'lanczos3',
-  'hqx',
-];
-
-export type ResizeOptions =
-  | BrowserResizeOptions
-  | WorkerResizeOptions
-  | VectorResizeOptions;
-
-export interface ResizeOptionsCommon {
-  width: number;
-  height: number;
-  fitMethod: 'stretch' | 'contain';
-}
-
-export interface BrowserResizeOptions extends ResizeOptionsCommon {
-  method: BrowserResizeMethods;
-}
-
-export interface WorkerResizeOptions extends ResizeOptionsCommon {
-  method: WorkerResizeMethods;
-  premultiply: boolean;
-  linearRGB: boolean;
-}
-
-export interface VectorResizeOptions extends ResizeOptionsCommon {
-  method: 'vector';
-}
-
-/**
- * Return whether a set of options are worker resize options.
- *
- * @param opts
- */
-export function isWorkerOptions(
-  opts: ResizeOptions,
-): opts is WorkerResizeOptions {
-  return (workerResizeMethods as string[]).includes(opts.method);
-}
-
-/**
- * Return whether a set of options are from the HQ<n>X set
- *
- * @param opts
- */
-export function isHqx(opts: ResizeOptions): opts is WorkerResizeOptions {
-  return opts.method === 'hqx';
-}
-
-export const defaultOptions: ResizeOptions = {
-  // Width and height will always default to the image size.
-  // This is set elsewhere.
-  width: 1,
-  height: 1,
-  // This will be set to 'vector' if the input is SVG.
-  method: 'lanczos3',
-  fitMethod: 'stretch',
-  premultiply: true,
-  linearRGB: true,
-};
diff --git a/src_old/codecs/resize/processor-sync.ts b/src_old/codecs/resize/processor-sync.ts
deleted file mode 100644
index c38979c0..00000000
--- a/src_old/codecs/resize/processor-sync.ts
+++ /dev/null
@@ -1,55 +0,0 @@
-import {
-  builtinResize,
-  BuiltinResizeMethod,
-  drawableToImageData,
-} from '../../lib/util';
-import { BrowserResizeOptions, VectorResizeOptions } from './processor-meta';
-import { getContainOffsets } from './util';
-
-export function browserResize(
-  data: ImageData,
-  opts: BrowserResizeOptions,
-): ImageData {
-  let sx = 0;
-  let sy = 0;
-  let sw = data.width;
-  let sh = data.height;
-
-  if (opts.fitMethod === 'contain') {
-    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
-  }
-
-  return builtinResize(
-    data,
-    sx,
-    sy,
-    sw,
-    sh,
-    opts.width,
-    opts.height,
-    opts.method.slice('browser-'.length) as BuiltinResizeMethod,
-  );
-}
-
-export function vectorResize(
-  data: HTMLImageElement,
-  opts: VectorResizeOptions,
-): ImageData {
-  let sx = 0;
-  let sy = 0;
-  let sw = data.width;
-  let sh = data.height;
-
-  if (opts.fitMethod === 'contain') {
-    ({ sx, sy, sw, sh } = getContainOffsets(sw, sh, opts.width, opts.height));
-  }
-
-  return drawableToImageData(data, {
-    sx,
-    sy,
-    sw,
-    sh,
-    width: opts.width,
-    height: opts.height,
-  });
-}
diff --git a/src_old/codecs/resize/processor.ts b/src_old/codecs/resize/processor.ts
deleted file mode 100644
index 1815fe42..00000000
--- a/src_old/codecs/resize/processor.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { WorkerResizeOptions } from './processor-meta';
-import { getContainOffsets } from './util';
-import { resize as codecResize } from '../../../codecs/resize/pkg';
-
-function crop(
-  data: ImageData,
-  sx: number,
-  sy: number,
-  sw: number,
-  sh: number,
-): ImageData {
-  const inputPixels = new Uint32Array(data.data.buffer);
-
-  // Copy within the same buffer for speed and memory efficiency.
-  for (let y = 0; y < sh; y += 1) {
-    const start = (y + sy) * data.width + sx;
-    inputPixels.copyWithin(y * sw, start, start + sw);
-  }
-
-  return new ImageData(
-    new Uint8ClampedArray(inputPixels.buffer.slice(0, sw * sh * 4)),
-    sw,
-    sh,
-  );
-}
-
-/** Resize methods by index */
-const resizeMethods: WorkerResizeOptions['method'][] = [
-  'triangle',
-  'catrom',
-  'mitchell',
-  'lanczos3',
-];
-
-export async function resize(
-  data: ImageData,
-  opts: WorkerResizeOptions,
-): Promise<ImageData> {
-  let input = data;
-
-  if (opts.fitMethod === 'contain') {
-    const { sx, sy, sw, sh } = getContainOffsets(
-      data.width,
-      data.height,
-      opts.width,
-      opts.height,
-    );
-    input = crop(
-      input,
-      Math.round(sx),
-      Math.round(sy),
-      Math.round(sw),
-      Math.round(sh),
-    );
-  }
-
-  const result = codecResize(
-    new Uint8Array(input.data.buffer),
-    input.width,
-    input.height,
-    opts.width,
-    opts.height,
-    resizeMethods.indexOf(opts.method),
-    opts.premultiply,
-    opts.linearRGB,
-  );
-
-  return new ImageData(
-    new Uint8ClampedArray(result.buffer),
-    opts.width,
-    opts.height,
-  );
-}
diff --git a/src_old/codecs/resize/util.ts b/src_old/codecs/resize/util.ts
deleted file mode 100644
index 02fcf552..00000000
--- a/src_old/codecs/resize/util.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-export function getContainOffsets(
-  sw: number,
-  sh: number,
-  dw: number,
-  dh: number,
-) {
-  const currentAspect = sw / sh;
-  const endAspect = dw / dh;
-
-  if (endAspect > currentAspect) {
-    const newSh = sw / endAspect;
-    const newSy = (sh - newSh) / 2;
-    return { sw, sh: newSh, sx: 0, sy: newSy };
-  }
-
-  const newSw = sh * endAspect;
-  const newSx = (sw - newSw) / 2;
-  return { sh, sw: newSw, sx: newSx, sy: 0 };
-}
diff --git a/src_old/codecs/rotate/processor-meta.ts b/src_old/codecs/rotate/processor-meta.ts
deleted file mode 100644
index 1b70ccdd..00000000
--- a/src_old/codecs/rotate/processor-meta.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-export interface RotateOptions {
-  rotate: 0 | 90 | 180 | 270;
-}
-
-export const defaultOptions: RotateOptions = { rotate: 0 };
-
-export interface RotateModuleInstance {
-  exports: {
-    memory: WebAssembly.Memory;
-    rotate(width: number, height: number, rotate: 0 | 90 | 180 | 270): void;
-  };
-}
diff --git a/src_old/codecs/rotate/processor.ts b/src_old/codecs/rotate/processor.ts
deleted file mode 100644
index 8b5c38ba..00000000
--- a/src_old/codecs/rotate/processor.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-import wasmUrl from '../../../codecs/rotate/rotate.wasm';
-import { RotateOptions, RotateModuleInstance } from './processor-meta';
-
-// We are loading a 500B module here. Loading the code to feature-detect
-// `instantiateStreaming` probably takes longer to load than the time we save by
-// using `instantiateStreaming` in the first place. So let’s just use
-// `ArrayBuffer`s here.
-const instancePromise = fetch(wasmUrl)
-  .then((r) => r.arrayBuffer())
-  .then((buf) => WebAssembly.instantiate(buf));
-
-export async function rotate(
-  data: ImageData,
-  opts: RotateOptions,
-): Promise<ImageData> {
-  const { instance } = (await instancePromise) as {
-    instance: RotateModuleInstance;
-  };
-
-  // Number of wasm memory pages (á 64KiB) needed to store the image twice.
-  const bytesPerImage = data.width * data.height * 4;
-  const numPagesNeeded = Math.ceil((bytesPerImage * 2 + 8) / (64 * 1024));
-  // Only count full pages, just to be safe.
-  const numPagesAvailable = Math.floor(
-    instance.exports.memory.buffer.byteLength / (64 * 1024),
-  );
-  const additionalPagesToAllocate = numPagesNeeded - numPagesAvailable;
-
-  if (additionalPagesToAllocate > 0) {
-    instance.exports.memory.grow(additionalPagesToAllocate);
-  }
-  const view = new Uint8ClampedArray(instance.exports.memory.buffer);
-  view.set(data.data, 8);
-
-  instance.exports.rotate(data.width, data.height, opts.rotate);
-
-  const flipDimensions = opts.rotate % 180 !== 0;
-  return new ImageData(
-    view.slice(bytesPerImage + 8, bytesPerImage * 2 + 8),
-    flipDimensions ? data.height : data.width,
-    flipDimensions ? data.width : data.height,
-  );
-}
diff --git a/src_old/codecs/util.ts b/src_old/codecs/util.ts
deleted file mode 100644
index e4090d35..00000000
--- a/src_old/codecs/util.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-type ModuleFactory<M extends EmscriptenWasm.Module> = (
-  opts: EmscriptenWasm.ModuleOpts,
-) => M;
-
-export function initEmscriptenModule<T extends EmscriptenWasm.Module>(
-  moduleFactory: ModuleFactory<T>,
-  wasmUrl: string,
-): Promise<T> {
-  return new Promise((resolve) => {
-    const module = moduleFactory({
-      // Just to be safe, don't automatically invoke any wasm functions
-      noInitialRun: true,
-      locateFile(url: string): string {
-        // Redirect the request for the wasm binary to whatever webpack gave us.
-        if (url.endsWith('.wasm')) return wasmUrl;
-        return url;
-      },
-      onRuntimeInitialized() {
-        // An Emscripten is a then-able that resolves with itself, causing an infite loop when you
-        // wrap it in a real promise. Delete the `then` prop solves this for now.
-        // https://github.com/kripken/emscripten/issues/5820
-        delete (module as any).then;
-        resolve(module);
-      },
-    });
-  });
-}
-
-interface ClampOpts {
-  min?: number;
-  max?: number;
-}
-
-export function clamp(x: number, opts: ClampOpts): number {
-  return Math.min(
-    Math.max(x, opts.min || Number.MIN_VALUE),
-    opts.max || Number.MAX_VALUE,
-  );
-}
diff --git a/src_old/codecs/webp/decoder-meta.ts b/src_old/codecs/webp/decoder-meta.ts
deleted file mode 100644
index 8edf0dd7..00000000
--- a/src_old/codecs/webp/decoder-meta.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const name = 'WASM WebP Decoder';
-
-const supportedMimeTypes = ['image/webp'];
-
-export function canHandleMimeType(mimeType: string): boolean {
-  return supportedMimeTypes.includes(mimeType);
-}
diff --git a/src_old/codecs/webp/decoder.ts b/src_old/codecs/webp/decoder.ts
deleted file mode 100644
index 150ebd1d..00000000
--- a/src_old/codecs/webp/decoder.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import webp_dec, { WebPModule } from '../../../codecs/webp/dec/webp_dec';
-import wasmUrl from '../../../codecs/webp/dec/webp_dec.wasm';
-import { initEmscriptenModule } from '../util';
-
-let emscriptenModule: Promise<WebPModule>;
-
-export async function decode(data: ArrayBuffer): Promise<ImageData> {
-  if (!emscriptenModule)
-    emscriptenModule = initEmscriptenModule(webp_dec, wasmUrl);
-
-  const module = await emscriptenModule;
-  const result = module.decode(data);
-  if (!result) {
-    throw new Error('Decoding error');
-  }
-  return result;
-}
diff --git a/src_old/codecs/webp/encoder-meta.ts b/src_old/codecs/webp/encoder-meta.ts
deleted file mode 100644
index aa78e6c4..00000000
--- a/src_old/codecs/webp/encoder-meta.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export enum WebPImageHint {
-  WEBP_HINT_DEFAULT, // default preset.
-  WEBP_HINT_PICTURE, // digital picture, like portrait, inner shot
-  WEBP_HINT_PHOTO, // outdoor photograph, with natural lighting
-  WEBP_HINT_GRAPH, // Discrete tone image (graph, map-tile etc).
-}
-
-export interface EncodeOptions {
-  quality: number;
-  target_size: number;
-  target_PSNR: number;
-  method: number;
-  sns_strength: number;
-  filter_strength: number;
-  filter_sharpness: number;
-  filter_type: number;
-  partitions: number;
-  segments: number;
-  pass: number;
-  show_compressed: number;
-  preprocessing: number;
-  autofilter: number;
-  partition_limit: number;
-  alpha_compression: number;
-  alpha_filtering: number;
-  alpha_quality: number;
-  lossless: number;
-  exact: number;
-  image_hint: number;
-  emulate_jpeg_size: number;
-  thread_level: number;
-  low_memory: number;
-  near_lossless: number;
-  use_delta_palette: number;
-  use_sharp_yuv: number;
-}
-export interface EncoderState {
-  type: typeof type;
-  options: EncodeOptions;
-}
-
-export const type = 'webp';
-export const label = 'WebP';
-export const mimeType = 'image/webp';
-export const extension = 'webp';
-// These come from struct WebPConfig in encode.h.
-export const defaultOptions: EncodeOptions = {
-  quality: 75,
-  target_size: 0,
-  target_PSNR: 0,
-  method: 4,
-  sns_strength: 50,
-  filter_strength: 60,
-  filter_sharpness: 0,
-  filter_type: 1,
-  partitions: 0,
-  segments: 4,
-  pass: 1,
-  show_compressed: 0,
-  preprocessing: 0,
-  autofilter: 0,
-  partition_limit: 0,
-  alpha_compression: 1,
-  alpha_filtering: 1,
-  alpha_quality: 100,
-  lossless: 0,
-  exact: 0,
-  image_hint: 0,
-  emulate_jpeg_size: 0,
-  thread_level: 0,
-  low_memory: 0,
-  near_lossless: 100,
-  use_delta_palette: 0,
-  use_sharp_yuv: 0,
-};
diff --git a/src_old/codecs/webp/encoder.ts b/src_old/codecs/webp/encoder.ts
deleted file mode 100644
index 81b00033..00000000
--- a/src_old/codecs/webp/encoder.ts
+++ /dev/null
@@ -1,22 +0,0 @@
-import webp_enc, { WebPModule } from '../../../codecs/webp/enc/webp_enc';
-import wasmUrl from '../../../codecs/webp/enc/webp_enc.wasm';
-import { EncodeOptions } from './encoder-meta';
-import { initEmscriptenModule } from '../util';
-
-let emscriptenModule: Promise<WebPModule>;
-
-export async function encode(
-  data: ImageData,
-  options: EncodeOptions,
-): Promise<ArrayBuffer> {
-  if (!emscriptenModule)
-    emscriptenModule = initEmscriptenModule(webp_enc, wasmUrl);
-
-  const module = await emscriptenModule;
-  const result = module.encode(data.data, data.width, data.height, options);
-  if (!result) {
-    throw new Error('Encoding error.');
-  }
-  // wasm can’t run on SharedArrayBuffers, so we hard-cast to ArrayBuffer.
-  return result.buffer as ArrayBuffer;
-}
diff --git a/src_old/codecs/webp/options.tsx b/src_old/codecs/webp/options.tsx
deleted file mode 100644
index 9ba28027..00000000
--- a/src_old/codecs/webp/options.tsx
+++ /dev/null
@@ -1,394 +0,0 @@
-import { h, Component } from 'preact';
-import { bind } from '../../lib/initial-util';
-import {
-  inputFieldCheckedAsNumber,
-  inputFieldValueAsNumber,
-  preventDefault,
-} from '../../lib/util';
-import { EncodeOptions, WebPImageHint } from './encoder-meta';
-import * as style from '../../components/Options/style.scss';
-import Checkbox from '../../components/checkbox';
-import Expander from '../../components/expander';
-import Select from '../../components/select';
-import Range from '../../components/range';
-import linkState from 'linkstate';
-
-interface Props {
-  options: EncodeOptions;
-  onChange(newOptions: EncodeOptions): void;
-}
-
-interface State {
-  showAdvanced: boolean;
-}
-
-// From kLosslessPresets in config_enc.c
-// The format is [method, quality].
-const losslessPresets: [number, number][] = [
-  [0, 0],
-  [1, 20],
-  [2, 25],
-  [3, 30],
-  [3, 50],
-  [4, 50],
-  [4, 75],
-  [4, 90],
-  [5, 90],
-  [6, 100],
-];
-const losslessPresetDefault = 6;
-
-function determineLosslessQuality(quality: number, method: number): number {
-  const index = losslessPresets.findIndex(
-    ([presetMethod, presetQuality]) =>
-      presetMethod === method && presetQuality === quality,
-  );
-  if (index !== -1) return index;
-  // Quality doesn't match one of the presets.
-  // This can happen when toggling 'lossless'.
-  return losslessPresetDefault;
-}
-
-export default class WebPEncoderOptions extends Component<Props, State> {
-  state: State = {
-    showAdvanced: false,
-  };
-
-  @bind
-  onChange(event: Event) {
-    const form = (event.currentTarget as HTMLInputElement).closest(
-      'form',
-    ) as HTMLFormElement;
-    const lossless = inputFieldCheckedAsNumber(form.lossless);
-    const { options } = this.props;
-    const losslessPresetValue = inputFieldValueAsNumber(
-      form.lossless_preset,
-      determineLosslessQuality(options.quality, options.method),
-    );
-
-    const newOptions: EncodeOptions = {
-      // Copy over options the form doesn't care about, eg emulate_jpeg_size
-      ...options,
-      // And now stuff from the form:
-      lossless,
-      // Special-cased inputs:
-      // In lossless mode, the quality is derived from the preset.
-      quality: lossless
-        ? losslessPresets[losslessPresetValue][1]
-        : inputFieldValueAsNumber(form.quality, options.quality),
-      // In lossless mode, the method is derived from the preset.
-      method: lossless
-        ? losslessPresets[losslessPresetValue][0]
-        : inputFieldValueAsNumber(form.method_input, options.method),
-      image_hint: inputFieldCheckedAsNumber(form.image_hint, options.image_hint)
-        ? WebPImageHint.WEBP_HINT_GRAPH
-        : WebPImageHint.WEBP_HINT_DEFAULT,
-      // .checked
-      exact: inputFieldCheckedAsNumber(form.exact, options.exact),
-      alpha_compression: inputFieldCheckedAsNumber(
-        form.alpha_compression,
-        options.alpha_compression,
-      ),
-      autofilter: inputFieldCheckedAsNumber(
-        form.autofilter,
-        options.autofilter,
-      ),
-      filter_type: inputFieldCheckedAsNumber(
-        form.filter_type,
-        options.filter_type,
-      ),
-      use_sharp_yuv: inputFieldCheckedAsNumber(
-        form.use_sharp_yuv,
-        options.use_sharp_yuv,
-      ),
-      // .value
-      near_lossless:
-        100 -
-        inputFieldValueAsNumber(
-          form.near_lossless,
-          100 - options.near_lossless,
-        ),
-      alpha_quality: inputFieldValueAsNumber(
-        form.alpha_quality,
-        options.alpha_quality,
-      ),
-      alpha_filtering: inputFieldValueAsNumber(
-        form.alpha_filtering,
-        options.alpha_filtering,
-      ),
-      sns_strength: inputFieldValueAsNumber(
-        form.sns_strength,
-        options.sns_strength,
-      ),
-      filter_strength: inputFieldValueAsNumber(
-        form.filter_strength,
-        options.filter_strength,
-      ),
-      filter_sharpness:
-        7 -
-        inputFieldValueAsNumber(
-          form.filter_sharpness,
-          7 - options.filter_sharpness,
-        ),
-      pass: inputFieldValueAsNumber(form.pass, options.pass),
-      preprocessing: inputFieldValueAsNumber(
-        form.preprocessing,
-        options.preprocessing,
-      ),
-      segments: inputFieldValueAsNumber(form.segments, options.segments),
-      partitions: inputFieldValueAsNumber(form.partitions, options.partitions),
-    };
-    this.props.onChange(newOptions);
-  }
-
-  private _losslessSpecificOptions(options: EncodeOptions) {
-    return (
-      <div key="lossless">
-        <div class={style.optionOneCell}>
-          <Range
-            name="lossless_preset"
-            min="0"
-            max="9"
-            value={determineLosslessQuality(options.quality, options.method)}
-            onInput={this.onChange}
-          >
-            Effort:
-          </Range>
-        </div>
-        <div class={style.optionOneCell}>
-          <Range
-            name="near_lossless"
-            min="0"
-            max="100"
-            value={'' + (100 - options.near_lossless)}
-            onInput={this.onChange}
-          >
-            Slight loss:
-          </Range>
-        </div>
-        <label class={style.optionInputFirst}>
-          {/*
-            Although there are 3 different kinds of image hint, webp only
-            seems to do something with the 'graph' type, and I don't really
-            understand what it does.
-          */}
-          <Checkbox
-            name="image_hint"
-            checked={options.image_hint === WebPImageHint.WEBP_HINT_GRAPH}
-            onChange={this.onChange}
-          />
-          Discrete tone image
-        </label>
-      </div>
-    );
-  }
-
-  private _lossySpecificOptions(options: EncodeOptions) {
-    const { showAdvanced } = this.state;
-
-    return (
-      <div key="lossy">
-        <div class={style.optionOneCell}>
-          <Range
-            name="method_input"
-            min="0"
-            max="6"
-            value={options.method}
-            onInput={this.onChange}
-          >
-            Effort:
-          </Range>
-        </div>
-        <div class={style.optionOneCell}>
-          <Range
-            name="quality"
-            min="0"
-            max="100"
-            step="0.1"
-            value={options.quality}
-            onInput={this.onChange}
-          >
-            Quality:
-          </Range>
-        </div>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            checked={showAdvanced}
-            onChange={linkState(this, 'showAdvanced')}
-          />
-          Show advanced settings
-        </label>
-        <Expander>
-          {showAdvanced ? (
-            <div>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="alpha_compression"
-                  checked={!!options.alpha_compression}
-                  onChange={this.onChange}
-                />
-                Compress alpha
-              </label>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="alpha_quality"
-                  min="0"
-                  max="100"
-                  value={options.alpha_quality}
-                  onInput={this.onChange}
-                >
-                  Alpha quality:
-                </Range>
-              </div>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="alpha_filtering"
-                  min="0"
-                  max="2"
-                  value={options.alpha_filtering}
-                  onInput={this.onChange}
-                >
-                  Alpha filter quality:
-                </Range>
-              </div>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="autofilter"
-                  checked={!!options.autofilter}
-                  onChange={this.onChange}
-                />
-                Auto adjust filter strength
-              </label>
-              <Expander>
-                {options.autofilter ? null : (
-                  <div class={style.optionOneCell}>
-                    <Range
-                      name="filter_strength"
-                      min="0"
-                      max="100"
-                      value={options.filter_strength}
-                      onInput={this.onChange}
-                    >
-                      Filter strength:
-                    </Range>
-                  </div>
-                )}
-              </Expander>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="filter_type"
-                  checked={!!options.filter_type}
-                  onChange={this.onChange}
-                />
-                Strong filter
-              </label>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="filter_sharpness"
-                  min="0"
-                  max="7"
-                  value={7 - options.filter_sharpness}
-                  onInput={this.onChange}
-                >
-                  Filter sharpness:
-                </Range>
-              </div>
-              <label class={style.optionInputFirst}>
-                <Checkbox
-                  name="use_sharp_yuv"
-                  checked={!!options.use_sharp_yuv}
-                  onChange={this.onChange}
-                />
-                Sharp RGB→YUV conversion
-              </label>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="pass"
-                  min="1"
-                  max="10"
-                  value={options.pass}
-                  onInput={this.onChange}
-                >
-                  Passes:
-                </Range>
-              </div>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="sns_strength"
-                  min="0"
-                  max="100"
-                  value={options.sns_strength}
-                  onInput={this.onChange}
-                >
-                  Spatial noise shaping:
-                </Range>
-              </div>
-              <label class={style.optionTextFirst}>
-                Preprocess:
-                <Select
-                  name="preprocessing"
-                  value={options.preprocessing}
-                  onChange={this.onChange}
-                >
-                  <option value="0">None</option>
-                  <option value="1">Segment smooth</option>
-                  <option value="2">Pseudo-random dithering</option>
-                </Select>
-              </label>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="segments"
-                  min="1"
-                  max="4"
-                  value={options.segments}
-                  onInput={this.onChange}
-                >
-                  Segments:
-                </Range>
-              </div>
-              <div class={style.optionOneCell}>
-                <Range
-                  name="partitions"
-                  min="0"
-                  max="3"
-                  value={options.partitions}
-                  onInput={this.onChange}
-                >
-                  Partitions:
-                </Range>
-              </div>
-            </div>
-          ) : null}
-        </Expander>
-      </div>
-    );
-  }
-
-  render({ options }: Props) {
-    // I'm rendering both lossy and lossless forms, as it becomes much easier when
-    // gathering the data.
-    return (
-      <form class={style.optionsSection} onSubmit={preventDefault}>
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            name="lossless"
-            checked={!!options.lossless}
-            onChange={this.onChange}
-          />
-          Lossless
-        </label>
-        {options.lossless
-          ? this._losslessSpecificOptions(options)
-          : this._lossySpecificOptions(options)}
-        <label class={style.optionInputFirst}>
-          <Checkbox
-            name="exact"
-            checked={!!options.exact}
-            onChange={this.onChange}
-          />
-          Preserve transparent data
-        </label>
-      </form>
-    );
-  }
-}
diff --git a/src_old/components/App/index.tsx b/src_old/components/App/index.tsx
deleted file mode 100644
index 8b3bc195..00000000
--- a/src_old/components/App/index.tsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { h, Component } from 'preact';
-
-import { bind, linkRef, Fileish } from '../../lib/initial-util';
-import * as style from './style.scss';
-import { FileDropEvent } from 'file-drop-element';
-import 'file-drop-element';
-import SnackBarElement, { SnackOptions } from '../../lib/SnackBar';
-import '../../lib/SnackBar';
-import Intro from '../intro';
-import '../custom-els/LoadingSpinner';
-
-const ROUTE_EDITOR = '/editor';
-
-const compressPromise = import(
-  /* webpackChunkName: "main-app" */
-  '../compress'
-);
-
-const swBridgePromise = import(
-  /* webpackChunkName: "sw-bridge" */
-  '../../lib/sw-bridge'
-);
-
-function back() {
-  window.history.back();
-}
-
-interface Props {}
-
-interface State {
-  awaitingShareTarget: boolean;
-  file?: File | Fileish;
-  isEditorOpen: Boolean;
-  Compress?: typeof import('../compress').default;
-}
-
-export default class App extends Component<Props, State> {
-  state: State = {
-    awaitingShareTarget: new URL(location.href).searchParams.has(
-      'share-target',
-    ),
-    isEditorOpen: false,
-    file: undefined,
-    Compress: undefined,
-  };
-
-  snackbar?: SnackBarElement;
-
-  constructor() {
-    super();
-
-    compressPromise
-      .then((module) => {
-        this.setState({ Compress: module.default });
-      })
-      .catch(() => {
-        this.showSnack('Failed to load app');
-      });
-
-    swBridgePromise.then(async ({ offliner, getSharedImage }) => {
-      offliner(this.showSnack);
-      if (!this.state.awaitingShareTarget) return;
-      const file = await getSharedImage();
-      // Remove the ?share-target from the URL
-      history.replaceState('', '', '/');
-      this.openEditor();
-      this.setState({ file, awaitingShareTarget: false });
-    });
-
-    // In development, persist application state across hot reloads:
-    if (process.env.NODE_ENV === 'development') {
-      this.setState(window.STATE);
-      const oldCDU = this.componentDidUpdate;
-      this.componentDidUpdate = (props, state, prev) => {
-        if (oldCDU) oldCDU.call(this, props, state, prev);
-        window.STATE = this.state;
-      };
-    }
-
-    // Since iOS 10, Apple tries to prevent disabling pinch-zoom. This is great in theory, but
-    // really breaks things on Squoosh, as you can easily end up zooming the UI when you mean to
-    // zoom the image. Once you've done this, it's really difficult to undo. Anyway, this seems to
-    // prevent it.
-    document.body.addEventListener('gesturestart', (event) => {
-      event.preventDefault();
-    });
-
-    window.addEventListener('popstate', this.onPopState);
-  }
-
-  @bind
-  private onFileDrop({ files }: FileDropEvent) {
-    if (!files || files.length === 0) return;
-    const file = files[0];
-    this.openEditor();
-    this.setState({ file });
-  }
-
-  @bind
-  private onIntroPickFile(file: File | Fileish) {
-    this.openEditor();
-    this.setState({ file });
-  }
-
-  @bind
-  private showSnack(
-    message: string,
-    options: SnackOptions = {},
-  ): Promise<string> {
-    if (!this.snackbar) throw Error('Snackbar missing');
-    return this.snackbar.showSnackbar(message, options);
-  }
-
-  @bind
-  private onPopState() {
-    this.setState({ isEditorOpen: location.pathname === ROUTE_EDITOR });
-  }
-
-  @bind
-  private openEditor() {
-    if (this.state.isEditorOpen) return;
-    // Change path, but preserve query string.
-    const editorURL = new URL(location.href);
-    editorURL.pathname = ROUTE_EDITOR;
-    history.pushState(null, '', editorURL.href);
-    this.setState({ isEditorOpen: true });
-  }
-
-  render(
-    {}: Props,
-    { file, isEditorOpen, Compress, awaitingShareTarget }: State,
-  ) {
-    const showSpinner = awaitingShareTarget || (isEditorOpen && !Compress);
-
-    return (
-      <div id="app" class={style.app}>
-        <file-drop
-          accept="image/*"
-          onfiledrop={this.onFileDrop}
-          class={style.drop}
-        >
-          {showSpinner ? (
-            <loading-spinner class={style.appLoader} />
-          ) : isEditorOpen ? (
-            Compress && (
-              <Compress file={file!} showSnack={this.showSnack} onBack={back} />
-            )
-          ) : (
-            <Intro onFile={this.onIntroPickFile} showSnack={this.showSnack} />
-          )}
-          <snack-bar ref={linkRef(this, 'snackbar')} />
-        </file-drop>
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/App/style.scss b/src_old/components/App/style.scss
deleted file mode 100644
index f7c48425..00000000
--- a/src_old/components/App/style.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-.app {
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-  overflow: hidden;
-  contain: strict;
-}
-
-.drop {
-  overflow: hidden;
-  touch-action: none;
-  height: 100%;
-  width: 100%;
-
-  &:global {
-    &::after {
-      content: '';
-      position: absolute;
-      display: block;
-      left: 10px;
-      top: 10px;
-      right: 10px;
-      bottom: 10px;
-      border: 2px dashed #fff;
-      background-color:rgba(88, 116, 88, 0.2);
-      border-color: rgba(65, 129, 65, 0.5);
-      border-radius: 10px;
-      opacity: 0;
-      transform: scale(0.95);
-      transition: all 200ms ease-in;
-      transition-property: transform, opacity;
-      pointer-events: none;
-    }
-
-    &.drop-valid::after {
-      opacity: 1;
-      transform: scale(1);
-      transition-timing-function: ease-out;
-    }
-  }
-}
-
-.option-pair {
-  display: flex;
-  justify-content: flex-end;
-  width: 100%;
-  height: 100%;
-
-  &.horizontal {
-    justify-content: space-between;
-    align-items: flex-end;
-  }
-
-  &.vertical {
-    flex-direction: column;
-  }
-}
-
-.app-loader {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  --size: 225px;
-  --stroke-width: 26px;
-}
diff --git a/src_old/components/Options/index.tsx b/src_old/components/Options/index.tsx
deleted file mode 100644
index 4055880a..00000000
--- a/src_old/components/Options/index.tsx
+++ /dev/null
@@ -1,220 +0,0 @@
-import { h, Component } from 'preact';
-
-import * as style from './style.scss';
-import { bind } from '../../lib/initial-util';
-import { cleanSet, cleanMerge } from '../../lib/clean-modify';
-import OxiPNGEncoderOptions from '../../codecs/oxipng/options';
-import MozJpegEncoderOptions from '../../codecs/mozjpeg/options';
-import BrowserJPEGEncoderOptions from '../../codecs/browser-jpeg/options';
-import WebPEncoderOptions from '../../codecs/webp/options';
-import AvifEncoderOptions from '../../codecs/avif/options';
-import BrowserWebPEncoderOptions from '../../codecs/browser-webp/options';
-
-import QuantizerOptionsComponent from '../../codecs/imagequant/options';
-import ResizeOptionsComponent from '../../codecs/resize/options';
-
-import * as identity from '../../codecs/identity/encoder-meta';
-import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
-import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
-import * as webP from '../../codecs/webp/encoder-meta';
-import * as avif from '../../codecs/avif/encoder-meta';
-import * as browserPNG from '../../codecs/browser-png/encoder-meta';
-import * as browserJPEG from '../../codecs/browser-jpeg/encoder-meta';
-import * as browserWebP from '../../codecs/browser-webp/encoder-meta';
-import * as browserGIF from '../../codecs/browser-gif/encoder-meta';
-import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
-import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
-import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
-import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
-import {
-  EncoderState,
-  EncoderType,
-  EncoderOptions,
-  encoders,
-  encodersSupported,
-  EncoderSupportMap,
-} from '../../codecs/encoders';
-import { QuantizeOptions } from '../../codecs/imagequant/processor-meta';
-import { ResizeOptions } from '../../codecs/resize/processor-meta';
-import { PreprocessorState } from '../../codecs/preprocessors';
-import { SourceImage } from '../compress';
-import Checkbox from '../checkbox';
-import Expander from '../expander';
-import Select from '../select';
-
-const encoderOptionsComponentMap: {
-  [x: string]: (new (...args: any[]) => Component<any, any>) | undefined;
-} = {
-  [identity.type]: undefined,
-  [oxiPNG.type]: OxiPNGEncoderOptions,
-  [mozJPEG.type]: MozJpegEncoderOptions,
-  [webP.type]: WebPEncoderOptions,
-  [avif.type]: AvifEncoderOptions,
-  [browserPNG.type]: undefined,
-  [browserJPEG.type]: BrowserJPEGEncoderOptions,
-  [browserWebP.type]: BrowserWebPEncoderOptions,
-  [browserBMP.type]: undefined,
-  // Only Safari supports the rest, and it doesn't support quality settings.
-  [browserGIF.type]: undefined,
-  [browserTIFF.type]: undefined,
-  [browserJP2.type]: undefined,
-  [browserPDF.type]: undefined,
-};
-
-interface Props {
-  mobileView: boolean;
-  source?: SourceImage;
-  encoderState: EncoderState;
-  preprocessorState: PreprocessorState;
-  onEncoderTypeChange(newType: EncoderType): void;
-  onEncoderOptionsChange(newOptions: EncoderOptions): void;
-  onPreprocessorOptionsChange(newOptions: PreprocessorState): void;
-}
-
-interface State {
-  encoderSupportMap?: EncoderSupportMap;
-}
-
-export default class Options extends Component<Props, State> {
-  state: State = {
-    encoderSupportMap: undefined,
-  };
-
-  constructor() {
-    super();
-    encodersSupported.then((encoderSupportMap) =>
-      this.setState({ encoderSupportMap }),
-    );
-  }
-
-  @bind
-  private onEncoderTypeChange(event: Event) {
-    const el = event.currentTarget as HTMLSelectElement;
-
-    // The select element only has values matching encoder types,
-    // so 'as' is safe here.
-    const type = el.value as EncoderType;
-    this.props.onEncoderTypeChange(type);
-  }
-
-  @bind
-  private onPreprocessorEnabledChange(event: Event) {
-    const el = event.currentTarget as HTMLInputElement;
-    const preprocessor = el.name.split('.')[0] as keyof PreprocessorState;
-
-    this.props.onPreprocessorOptionsChange(
-      cleanSet(
-        this.props.preprocessorState,
-        `${preprocessor}.enabled`,
-        el.checked,
-      ),
-    );
-  }
-
-  @bind
-  private onQuantizerOptionsChange(opts: QuantizeOptions) {
-    this.props.onPreprocessorOptionsChange(
-      cleanMerge(this.props.preprocessorState, 'quantizer', opts),
-    );
-  }
-
-  @bind
-  private onResizeOptionsChange(opts: ResizeOptions) {
-    this.props.onPreprocessorOptionsChange(
-      cleanMerge(this.props.preprocessorState, 'resize', opts),
-    );
-  }
-
-  render(
-    { source, encoderState, preprocessorState, onEncoderOptionsChange }: Props,
-    { encoderSupportMap }: State,
-  ) {
-    // tslint:disable variable-name
-    const EncoderOptionComponent =
-      encoderOptionsComponentMap[encoderState.type];
-
-    return (
-      <div class={style.optionsScroller}>
-        <Expander>
-          {encoderState.type === identity.type ? null : (
-            <div>
-              <h3 class={style.optionsTitle}>Edit</h3>
-              <label class={style.sectionEnabler}>
-                <Checkbox
-                  name="resize.enable"
-                  checked={!!preprocessorState.resize.enabled}
-                  onChange={this.onPreprocessorEnabledChange}
-                />
-                Resize
-              </label>
-              <Expander>
-                {preprocessorState.resize.enabled ? (
-                  <ResizeOptionsComponent
-                    isVector={Boolean(source && source.vectorImage)}
-                    inputWidth={source ? source.processed.width : 1}
-                    inputHeight={source ? source.processed.height : 1}
-                    options={preprocessorState.resize}
-                    onChange={this.onResizeOptionsChange}
-                  />
-                ) : null}
-              </Expander>
-
-              <label class={style.sectionEnabler}>
-                <Checkbox
-                  name="quantizer.enable"
-                  checked={!!preprocessorState.quantizer.enabled}
-                  onChange={this.onPreprocessorEnabledChange}
-                />
-                Reduce palette
-              </label>
-              <Expander>
-                {preprocessorState.quantizer.enabled ? (
-                  <QuantizerOptionsComponent
-                    options={preprocessorState.quantizer}
-                    onChange={this.onQuantizerOptionsChange}
-                  />
-                ) : null}
-              </Expander>
-            </div>
-          )}
-        </Expander>
-
-        <h3 class={style.optionsTitle}>Compress</h3>
-
-        <section class={`${style.optionOneCell} ${style.optionsSection}`}>
-          {encoderSupportMap ? (
-            <Select
-              value={encoderState.type}
-              onChange={this.onEncoderTypeChange}
-              large
-            >
-              {encoders
-                .filter((encoder) => encoderSupportMap[encoder.type])
-                .map((encoder) => (
-                  // tslint:disable-next-line:jsx-key
-                  <option value={encoder.type}>{encoder.label}</option>
-                ))}
-            </Select>
-          ) : (
-            <Select large>
-              <option>Loading…</option>
-            </Select>
-          )}
-        </section>
-
-        <Expander>
-          {EncoderOptionComponent ? (
-            <EncoderOptionComponent
-              options={
-                // Casting options, as encoderOptionsComponentMap[encodeData.type] ensures
-                // the correct type, but typescript isn't smart enough.
-                encoderState.options as any
-              }
-              onChange={onEncoderOptionsChange}
-            />
-          ) : null}
-        </Expander>
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/Options/style.scss b/src_old/components/Options/style.scss
deleted file mode 100644
index 96520a5f..00000000
--- a/src_old/components/Options/style.scss
+++ /dev/null
@@ -1,59 +0,0 @@
-$horizontalPadding: 15px;
-
-.options-title {
-  background: rgba(0, 0, 0, 0.9);
-  margin: 0;
-  padding: 10px $horizontalPadding;
-  font-weight: normal;
-  font-size: 1.4rem;
-  border-bottom: 1px solid #000;
-}
-
-.option-text-first {
-  display: grid;
-  align-items: center;
-  grid-template-columns: 87px 1fr;
-  grid-gap: 0.7em;
-  padding: 10px $horizontalPadding;
-}
-
-.option-one-cell {
-  display: grid;
-  grid-template-columns: 1fr;
-  padding: 10px $horizontalPadding;
-}
-
-.option-input-first,
-.section-enabler {
-  cursor: pointer;
-  display: grid;
-  align-items: center;
-  grid-template-columns: auto 1fr;
-  grid-gap: 0.7em;
-  padding: 10px $horizontalPadding;
-}
-
-.section-enabler {
-  background: rgba(0, 0, 0, 0.8);
-}
-
-.options-section {
-  background: rgba(0, 0, 0, 0.7);
-}
-
-.text-field {
-  background: #fff;
-  color: #000;
-  font: inherit;
-  border: none;
-  padding: 2px 0 2px 10px;
-  width: 100%;
-  box-sizing: border-box;
-  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.5);
-}
-
-.options-scroller {
-  overflow-x: hidden;
-  overflow-y: auto;
-  -webkit-overflow-scrolling: touch;
-}
diff --git a/src_old/components/Output/custom-els/PinchZoom/index.ts b/src_old/components/Output/custom-els/PinchZoom/index.ts
deleted file mode 100644
index 482c9e26..00000000
--- a/src_old/components/Output/custom-els/PinchZoom/index.ts
+++ /dev/null
@@ -1,376 +0,0 @@
-import PointerTracker, { Pointer } from 'pointer-tracker';
-import './styles.css';
-
-interface Point {
-  clientX: number;
-  clientY: number;
-}
-
-interface ChangeOptions {
-  /**
-   * Fire a 'change' event if values are different to current values
-   */
-  allowChangeEvent?: boolean;
-}
-
-interface ApplyChangeOpts extends ChangeOptions {
-  panX?: number;
-  panY?: number;
-  scaleDiff?: number;
-  originX?: number;
-  originY?: number;
-}
-
-interface SetTransformOpts extends ChangeOptions {
-  scale?: number;
-  x?: number;
-  y?: number;
-}
-
-type ScaleRelativeToValues = 'container' | 'content';
-
-export interface ScaleToOpts extends ChangeOptions {
-  /** Transform origin. Can be a number, or string percent, eg "50%" */
-  originX?: number | string;
-  /** Transform origin. Can be a number, or string percent, eg "50%" */
-  originY?: number | string;
-  /** Should the transform origin be relative to the container, or content? */
-  relativeTo?: ScaleRelativeToValues;
-}
-
-function getDistance(a: Point, b?: Point): number {
-  if (!b) return 0;
-  return Math.sqrt((b.clientX - a.clientX) ** 2 + (b.clientY - a.clientY) ** 2);
-}
-
-function getMidpoint(a: Point, b?: Point): Point {
-  if (!b) return a;
-
-  return {
-    clientX: (a.clientX + b.clientX) / 2,
-    clientY: (a.clientY + b.clientY) / 2,
-  };
-}
-
-function getAbsoluteValue(value: string | number, max: number): number {
-  if (typeof value === 'number') return value;
-
-  if (value.trimRight().endsWith('%')) {
-    return (max * parseFloat(value)) / 100;
-  }
-  return parseFloat(value);
-}
-
-// I'd rather use DOMMatrix/DOMPoint here, but the browser support isn't good enough.
-// Given that, better to use something everything supports.
-let cachedSvg: SVGSVGElement;
-
-function getSVG(): SVGSVGElement {
-  return (
-    cachedSvg ||
-    (cachedSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'))
-  );
-}
-
-function createMatrix(): SVGMatrix {
-  return getSVG().createSVGMatrix();
-}
-
-function createPoint(): SVGPoint {
-  return getSVG().createSVGPoint();
-}
-
-const MIN_SCALE = 0.01;
-
-export default class PinchZoom extends HTMLElement {
-  // The element that we'll transform.
-  // Ideally this would be shadow DOM, but we don't have the browser
-  // support yet.
-  private _positioningEl?: Element;
-  // Current transform.
-  private _transform: SVGMatrix = createMatrix();
-
-  constructor() {
-    super();
-
-    // Watch for children changes.
-    // Note this won't fire for initial contents,
-    // so _stageElChange is also called in connectedCallback.
-    new MutationObserver(() => this._stageElChange()).observe(this, {
-      childList: true,
-    });
-
-    // Watch for pointers
-    const pointerTracker: PointerTracker = new PointerTracker(this, {
-      start: (pointer, event) => {
-        // We only want to track 2 pointers at most
-        if (pointerTracker.currentPointers.length === 2 || !this._positioningEl)
-          return false;
-        event.preventDefault();
-        return true;
-      },
-      move: (previousPointers) => {
-        this._onPointerMove(previousPointers, pointerTracker.currentPointers);
-      },
-    });
-
-    this.addEventListener('wheel', (event) => this._onWheel(event));
-  }
-
-  connectedCallback() {
-    this._stageElChange();
-  }
-
-  get x() {
-    return this._transform.e;
-  }
-
-  get y() {
-    return this._transform.f;
-  }
-
-  get scale() {
-    return this._transform.a;
-  }
-
-  /**
-   * Change the scale, adjusting x/y by a given transform origin.
-   */
-  scaleTo(scale: number, opts: ScaleToOpts = {}) {
-    let { originX = 0, originY = 0 } = opts;
-
-    const { relativeTo = 'content', allowChangeEvent = false } = opts;
-
-    const relativeToEl = relativeTo === 'content' ? this._positioningEl : this;
-
-    // No content element? Fall back to just setting scale
-    if (!relativeToEl || !this._positioningEl) {
-      this.setTransform({ scale, allowChangeEvent });
-      return;
-    }
-
-    const rect = relativeToEl.getBoundingClientRect();
-    originX = getAbsoluteValue(originX, rect.width);
-    originY = getAbsoluteValue(originY, rect.height);
-
-    if (relativeTo === 'content') {
-      originX += this.x;
-      originY += this.y;
-    } else {
-      const currentRect = this._positioningEl.getBoundingClientRect();
-      originX -= currentRect.left;
-      originY -= currentRect.top;
-    }
-
-    this._applyChange({
-      allowChangeEvent,
-      originX,
-      originY,
-      scaleDiff: scale / this.scale,
-    });
-  }
-
-  /**
-   * Update the stage with a given scale/x/y.
-   */
-  setTransform(opts: SetTransformOpts = {}) {
-    const { scale = this.scale, allowChangeEvent = false } = opts;
-
-    let { x = this.x, y = this.y } = opts;
-
-    // If we don't have an element to position, just set the value as given.
-    // We'll check bounds later.
-    if (!this._positioningEl) {
-      this._updateTransform(scale, x, y, allowChangeEvent);
-      return;
-    }
-
-    // Get current layout
-    const thisBounds = this.getBoundingClientRect();
-    const positioningElBounds = this._positioningEl.getBoundingClientRect();
-
-    // Not displayed. May be disconnected or display:none.
-    // Just take the values, and we'll check bounds later.
-    if (!thisBounds.width || !thisBounds.height) {
-      this._updateTransform(scale, x, y, allowChangeEvent);
-      return;
-    }
-
-    // Create points for _positioningEl.
-    let topLeft = createPoint();
-    topLeft.x = positioningElBounds.left - thisBounds.left;
-    topLeft.y = positioningElBounds.top - thisBounds.top;
-    let bottomRight = createPoint();
-    bottomRight.x = positioningElBounds.width + topLeft.x;
-    bottomRight.y = positioningElBounds.height + topLeft.y;
-
-    // Calculate the intended position of _positioningEl.
-    const matrix = createMatrix()
-      .translate(x, y)
-      .scale(scale)
-      // Undo current transform
-      .multiply(this._transform.inverse());
-
-    topLeft = topLeft.matrixTransform(matrix);
-    bottomRight = bottomRight.matrixTransform(matrix);
-
-    // Ensure _positioningEl can't move beyond out-of-bounds.
-    // Correct for x
-    if (topLeft.x > thisBounds.width) {
-      x += thisBounds.width - topLeft.x;
-    } else if (bottomRight.x < 0) {
-      x += -bottomRight.x;
-    }
-
-    // Correct for y
-    if (topLeft.y > thisBounds.height) {
-      y += thisBounds.height - topLeft.y;
-    } else if (bottomRight.y < 0) {
-      y += -bottomRight.y;
-    }
-
-    this._updateTransform(scale, x, y, allowChangeEvent);
-  }
-
-  /**
-   * Update transform values without checking bounds. This is only called in setTransform.
-   */
-  private _updateTransform(
-    scale: number,
-    x: number,
-    y: number,
-    allowChangeEvent: boolean,
-  ) {
-    // Avoid scaling to zero
-    if (scale < MIN_SCALE) return;
-
-    // Return if there's no change
-    if (scale === this.scale && x === this.x && y === this.y) return;
-
-    this._transform.e = x;
-    this._transform.f = y;
-    this._transform.d = this._transform.a = scale;
-
-    this.style.setProperty('--x', this.x + 'px');
-    this.style.setProperty('--y', this.y + 'px');
-    this.style.setProperty('--scale', this.scale + '');
-
-    if (allowChangeEvent) {
-      const event = new Event('change', { bubbles: true });
-      this.dispatchEvent(event);
-    }
-  }
-
-  /**
-   * Called when the direct children of this element change.
-   * Until we have have shadow dom support across the board, we
-   * require a single element to be the child of <pinch-zoom>, and
-   * that's the element we pan/scale.
-   */
-  private _stageElChange() {
-    this._positioningEl = undefined;
-
-    if (this.children.length === 0) return;
-
-    this._positioningEl = this.children[0];
-
-    if (this.children.length > 1) {
-      console.warn('<pinch-zoom> must not have more than one child.');
-    }
-
-    // Do a bounds check
-    this.setTransform({ allowChangeEvent: true });
-  }
-
-  private _onWheel(event: WheelEvent) {
-    if (!this._positioningEl) return;
-    event.preventDefault();
-
-    const currentRect = this._positioningEl.getBoundingClientRect();
-    let { deltaY } = event;
-    const { ctrlKey, deltaMode } = event;
-
-    if (deltaMode === 1) {
-      // 1 is "lines", 0 is "pixels"
-      // Firefox uses "lines" for some types of mouse
-      deltaY *= 15;
-    }
-
-    // ctrlKey is true when pinch-zooming on a trackpad.
-    const divisor = ctrlKey ? 100 : 300;
-    const scaleDiff = 1 - deltaY / divisor;
-
-    this._applyChange({
-      scaleDiff,
-      originX: event.clientX - currentRect.left,
-      originY: event.clientY - currentRect.top,
-      allowChangeEvent: true,
-    });
-  }
-
-  private _onPointerMove(
-    previousPointers: Pointer[],
-    currentPointers: Pointer[],
-  ) {
-    if (!this._positioningEl) return;
-
-    // Combine next points with previous points
-    const currentRect = this._positioningEl.getBoundingClientRect();
-
-    // For calculating panning movement
-    const prevMidpoint = getMidpoint(previousPointers[0], previousPointers[1]);
-    const newMidpoint = getMidpoint(currentPointers[0], currentPointers[1]);
-
-    // Midpoint within the element
-    const originX = prevMidpoint.clientX - currentRect.left;
-    const originY = prevMidpoint.clientY - currentRect.top;
-
-    // Calculate the desired change in scale
-    const prevDistance = getDistance(previousPointers[0], previousPointers[1]);
-    const newDistance = getDistance(currentPointers[0], currentPointers[1]);
-    const scaleDiff = prevDistance ? newDistance / prevDistance : 1;
-
-    this._applyChange({
-      originX,
-      originY,
-      scaleDiff,
-      panX: newMidpoint.clientX - prevMidpoint.clientX,
-      panY: newMidpoint.clientY - prevMidpoint.clientY,
-      allowChangeEvent: true,
-    });
-  }
-
-  /** Transform the view & fire a change event */
-  private _applyChange(opts: ApplyChangeOpts = {}) {
-    const {
-      panX = 0,
-      panY = 0,
-      originX = 0,
-      originY = 0,
-      scaleDiff = 1,
-      allowChangeEvent = false,
-    } = opts;
-
-    const matrix = createMatrix()
-      // Translate according to panning.
-      .translate(panX, panY)
-      // Scale about the origin.
-      .translate(originX, originY)
-      // Apply current translate
-      .translate(this.x, this.y)
-      .scale(scaleDiff)
-      .translate(-originX, -originY)
-      // Apply current scale.
-      .scale(this.scale);
-
-    // Convert the transform into basic translate & scale.
-    this.setTransform({
-      allowChangeEvent,
-      scale: matrix.a,
-      x: matrix.e,
-      y: matrix.f,
-    });
-  }
-}
-
-customElements.define('pinch-zoom', PinchZoom);
diff --git a/src_old/components/Output/custom-els/PinchZoom/missing-types.d.ts b/src_old/components/Output/custom-els/PinchZoom/missing-types.d.ts
deleted file mode 100644
index 36d680b8..00000000
--- a/src_old/components/Output/custom-els/PinchZoom/missing-types.d.ts
+++ /dev/null
@@ -1,16 +0,0 @@
-declare interface CSSStyleDeclaration {
-  willChange: string | null;
-}
-
-// TypeScript, you make me sad.
-// https://github.com/Microsoft/TypeScript/issues/18756
-interface Window {
-  PointerEvent: typeof PointerEvent;
-  Touch: typeof Touch;
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'pinch-zoom': HTMLAttributes;
-  }
-}
diff --git a/src_old/components/Output/custom-els/PinchZoom/styles.css b/src_old/components/Output/custom-els/PinchZoom/styles.css
deleted file mode 100644
index 83668f17..00000000
--- a/src_old/components/Output/custom-els/PinchZoom/styles.css
+++ /dev/null
@@ -1,14 +0,0 @@
-pinch-zoom {
-  display: block;
-  overflow: hidden;
-  touch-action: none;
-  --scale: 1;
-  --x: 0;
-  --y: 0;
-}
-
-pinch-zoom > * {
-  transform: translate(var(--x), var(--y)) scale(var(--scale));
-  transform-origin: 0 0;
-  will-change: transform;
-}
diff --git a/src_old/components/Output/custom-els/TwoUp/index.ts b/src_old/components/Output/custom-els/TwoUp/index.ts
deleted file mode 100644
index e92600d7..00000000
--- a/src_old/components/Output/custom-els/TwoUp/index.ts
+++ /dev/null
@@ -1,171 +0,0 @@
-import PointerTracker, { Pointer } from 'pointer-tracker';
-import * as styles from './styles.css';
-
-const legacyClipCompatAttr = 'legacy-clip-compat';
-const orientationAttr = 'orientation';
-
-type TwoUpOrientation = 'horizontal' | 'vertical';
-
-/**
- * A split view that the user can adjust. The first child becomes
- * the left-hand side, and the second child becomes the right-hand side.
- */
-export default class TwoUp extends HTMLElement {
-  static get observedAttributes() {
-    return [orientationAttr];
-  }
-
-  private readonly _handle = document.createElement('div');
-  /**
-   * The position of the split in pixels.
-   */
-  private _position = 0;
-  /**
-   * The position of the split in %.
-   */
-  private _relativePosition = 0.5;
-  /**
-   * The value of _position when the pointer went down.
-   */
-  private _positionOnPointerStart = 0;
-  /**
-   * Has connectedCallback been called yet?
-   */
-  private _everConnected = false;
-
-  constructor() {
-    super();
-    this._handle.className = styles.twoUpHandle;
-
-    // Watch for children changes.
-    // Note this won't fire for initial contents,
-    // so _childrenChange is also called in connectedCallback.
-    new MutationObserver(() => this._childrenChange()).observe(this, {
-      childList: true,
-    });
-
-    // Watch for element size changes.
-    if ('ResizeObserver' in window) {
-      new ResizeObserver(() => this._resetPosition()).observe(this);
-    } else {
-      window.addEventListener('resize', () => this._resetPosition());
-    }
-
-    // Watch for pointers on the handle.
-    const pointerTracker: PointerTracker = new PointerTracker(this._handle, {
-      start: (_, event) => {
-        // We only want to track 1 pointer.
-        if (pointerTracker.currentPointers.length === 1) return false;
-        event.preventDefault();
-        this._positionOnPointerStart = this._position;
-        return true;
-      },
-      move: () => {
-        this._pointerChange(
-          pointerTracker.startPointers[0],
-          pointerTracker.currentPointers[0],
-        );
-      },
-    });
-  }
-
-  connectedCallback() {
-    this._childrenChange();
-
-    this._handle.innerHTML = `<div class="${
-      styles.scrubber
-    }">${`<svg viewBox="0 0 27 20" fill="currentColor">${'<path d="M17 19.2l9.5-9.6L16.9 0zM9.6 0L0 9.6l9.6 9.6z"/>'}</svg>`}</div>`;
-
-    if (!this._everConnected) {
-      this._resetPosition();
-      this._everConnected = true;
-    }
-  }
-
-  attributeChangedCallback(name: string) {
-    if (name === orientationAttr) {
-      this._resetPosition();
-    }
-  }
-
-  private _resetPosition() {
-    // Set the initial position of the handle.
-    requestAnimationFrame(() => {
-      const bounds = this.getBoundingClientRect();
-      const dimensionAxis =
-        this.orientation === 'vertical' ? 'height' : 'width';
-      this._position = bounds[dimensionAxis] * this._relativePosition;
-      this._setPosition();
-    });
-  }
-
-  /**
-   * If true, this element works in browsers that don't support clip-path (Edge).
-   * However, this means you'll have to set the height of this element manually.
-   */
-  get legacyClipCompat() {
-    return this.hasAttribute(legacyClipCompatAttr);
-  }
-
-  set legacyClipCompat(val: boolean) {
-    if (val) {
-      this.setAttribute(legacyClipCompatAttr, '');
-    } else {
-      this.removeAttribute(legacyClipCompatAttr);
-    }
-  }
-
-  /**
-   * Split vertically rather than horizontally.
-   */
-  get orientation(): TwoUpOrientation {
-    const value = this.getAttribute(orientationAttr);
-
-    // This mirrors the behaviour of input.type, where setting just sets the attribute, but getting
-    // returns the value only if it's valid.
-    if (value && value.toLowerCase() === 'vertical') return 'vertical';
-    return 'horizontal';
-  }
-
-  set orientation(val: TwoUpOrientation) {
-    this.setAttribute(orientationAttr, val);
-  }
-
-  /**
-   * Called when element's child list changes
-   */
-  private _childrenChange() {
-    // Ensure the handle is the last child.
-    // The CSS depends on this.
-    if (this.lastElementChild !== this._handle) {
-      this.appendChild(this._handle);
-    }
-  }
-
-  /**
-   * Called when a pointer moves.
-   */
-  private _pointerChange(startPoint: Pointer, currentPoint: Pointer) {
-    const pointAxis = this.orientation === 'vertical' ? 'clientY' : 'clientX';
-    const dimensionAxis = this.orientation === 'vertical' ? 'height' : 'width';
-    const bounds = this.getBoundingClientRect();
-
-    this._position =
-      this._positionOnPointerStart +
-      (currentPoint[pointAxis] - startPoint[pointAxis]);
-
-    // Clamp position to element bounds.
-    this._position = Math.max(
-      0,
-      Math.min(this._position, bounds[dimensionAxis]),
-    );
-    this._relativePosition = this._position / bounds[dimensionAxis];
-    this._setPosition();
-  }
-
-  private _setPosition() {
-    this.style.setProperty('--split-point', `${this._position}px`);
-  }
-}
-
-customElements.define('two-up', TwoUp);
diff --git a/src_old/components/Output/custom-els/TwoUp/missing-types.d.ts b/src_old/components/Output/custom-els/TwoUp/missing-types.d.ts
deleted file mode 100644
index ac5e954c..00000000
--- a/src_old/components/Output/custom-els/TwoUp/missing-types.d.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-declare interface CSSStyleDeclaration {
-  willChange: string | null;
-}
-
-// TypeScript, you make me sad.
-// https://github.com/Microsoft/TypeScript/issues/18756
-interface Window {
-  PointerEvent: typeof PointerEvent;
-  Touch: typeof Touch;
-}
-
-interface TwoUpAttributes extends JSX.HTMLAttributes {
-  orientation?: string;
-  'legacy-clip-compat'?: boolean;
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'two-up': TwoUpAttributes;
-  }
-}
-
-interface DOMRectReadOnly {
-  readonly x: number;
-  readonly y: number;
-  readonly width: number;
-  readonly height: number;
-  readonly top: number;
-  readonly right: number;
-  readonly bottom: number;
-  readonly left: number;
-}
-
-interface ResizeObserverCallback {
-  (entries: ResizeObserverEntry[], observer: ResizeObserver): void;
-}
-
-interface ResizeObserverEntry {
-  readonly target: Element;
-  readonly contentRect: DOMRectReadOnly;
-}
-
-interface ResizeObserver {
-  observe(target: Element): void;
-  unobserve(target: Element): void;
-  disconnect(): void;
-}
-
-declare var ResizeObserver: {
-  prototype: ResizeObserver;
-  new (callback: ResizeObserverCallback): ResizeObserver;
-};
diff --git a/src_old/components/Output/custom-els/TwoUp/styles.css b/src_old/components/Output/custom-els/TwoUp/styles.css
deleted file mode 100644
index a823c7e0..00000000
--- a/src_old/components/Output/custom-els/TwoUp/styles.css
+++ /dev/null
@@ -1,131 +0,0 @@
-two-up {
-  display: grid;
-  position: relative;
-  --split-point: 0;
-  --accent-color: #777;
-  --track-color: var(--accent-color);
-  --thumb-background: #fff;
-  --thumb-color: var(--accent-color);
-  --thumb-size: 62px;
-  --bar-size: 6px;
-  --bar-touch-size: 30px;
-}
-
-two-up > * {
-  /* Overlay all children on top of each other, and let two-up's layout contain all of them. */
-  grid-area: 1/1;
-}
-
-two-up[legacy-clip-compat] > :not(.two-up-handle) {
-  /* Legacy mode uses clip rather than clip-path (Edge doesn't support clip-path), but clip requires
-  elements to be positioned absolutely */
-  position: absolute;
-}
-
-.two-up-handle {
-  touch-action: none;
-  position: relative;
-  width: var(--bar-touch-size);
-  transform: translateX(var(--split-point)) translateX(-50%);
-  will-change: transform;
-  cursor: ew-resize;
-}
-
-.two-up-handle::before {
-  content: '';
-  display: block;
-  height: 100%;
-  width: var(--bar-size);
-  margin: 0 auto;
-  box-shadow: inset calc(var(--bar-size) / 2) 0 0 rgba(0, 0, 0, 0.1),
-    0 1px 4px rgba(0, 0, 0, 0.4);
-  background: var(--track-color);
-}
-
-.scrubber {
-  display: flex;
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform-origin: 50% 50%;
-  transform: translate(-50%, -50%);
-  width: var(--thumb-size);
-  height: calc(var(--thumb-size) * 0.9);
-  background: var(--thumb-background);
-  border: 1px solid rgba(0, 0, 0, 0.2);
-  border-radius: var(--thumb-size);
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
-  color: var(--thumb-color);
-  box-sizing: border-box;
-  padding: 0 calc(var(--thumb-size) * 0.24);
-}
-
-.scrubber svg {
-  flex: 1;
-}
-
-two-up[orientation='vertical'] .two-up-handle {
-  width: auto;
-  height: var(--bar-touch-size);
-  transform: translateY(var(--split-point)) translateY(-50%);
-  cursor: ns-resize;
-}
-
-two-up[orientation='vertical'] .two-up-handle::before {
-  width: auto;
-  height: var(--bar-size);
-  box-shadow: inset 0 calc(var(--bar-size) / 2) 0 rgba(0, 0, 0, 0.1),
-    0 1px 4px rgba(0, 0, 0, 0.4);
-  margin: calc((var(--bar-touch-size) - var(--bar-size)) / 2) 0 0 0;
-}
-
-two-up[orientation='vertical'] .scrubber {
-  box-shadow: 1px 0 4px rgba(0, 0, 0, 0.1);
-  transform: translate(-50%, -50%) rotate(-90deg);
-}
-
-two-up > :nth-child(1):not(.two-up-handle) {
-  -webkit-clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
-  clip-path: inset(0 calc(100% - var(--split-point)) 0 0);
-}
-
-two-up > :nth-child(2):not(.two-up-handle) {
-  -webkit-clip-path: inset(0 0 0 var(--split-point));
-  clip-path: inset(0 0 0 var(--split-point));
-}
-
-two-up[orientation='vertical'] > :nth-child(1):not(.two-up-handle) {
-  -webkit-clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
-  clip-path: inset(0 0 calc(100% - var(--split-point)) 0);
-}
-
-two-up[orientation='vertical'] > :nth-child(2):not(.two-up-handle) {
-  -webkit-clip-path: inset(var(--split-point) 0 0 0);
-  clip-path: inset(var(--split-point) 0 0 0);
-}
-
-/*
-  Even in legacy-clip-compat, prefer clip-path if it's supported.
-  It performs way better in Safari.
- */
-@supports not (
-  (clip-path: inset(0 0 0 0)) or (-webkit-clip-path: inset(0 0 0 0))
-) {
-  two-up[legacy-clip-compat] > :nth-child(1):not(.two-up-handle) {
-    clip: rect(auto var(--split-point) auto auto);
-  }
-
-  two-up[legacy-clip-compat] > :nth-child(2):not(.two-up-handle) {
-    clip: rect(auto auto auto var(--split-point));
-  }
-
-  two-up[orientation='vertical'][legacy-clip-compat]
-    > :nth-child(1):not(.two-up-handle) {
-    clip: rect(auto auto var(--split-point) auto);
-  }
-
-  two-up[orientation='vertical'][legacy-clip-compat]
-    > :nth-child(2):not(.two-up-handle) {
-    clip: rect(var(--split-point) auto auto auto);
-  }
-}
diff --git a/src_old/components/Output/index.tsx b/src_old/components/Output/index.tsx
deleted file mode 100644
index 556b4c86..00000000
--- a/src_old/components/Output/index.tsx
+++ /dev/null
@@ -1,384 +0,0 @@
-import { h, Component } from 'preact';
-import PinchZoom, { ScaleToOpts } from './custom-els/PinchZoom';
-import './custom-els/PinchZoom';
-import './custom-els/TwoUp';
-import * as style from './style.scss';
-import { bind, linkRef } from '../../lib/initial-util';
-import { shallowEqual, drawDataToCanvas } from '../../lib/util';
-import {
-  ToggleBackgroundIcon,
-  AddIcon,
-  RemoveIcon,
-  BackIcon,
-  ToggleBackgroundActiveIcon,
-  RotateIcon,
-} from '../../lib/icons';
-import { twoUpHandle } from './custom-els/TwoUp/styles.css';
-import { InputProcessorState } from '../../codecs/input-processors';
-import { cleanSet } from '../../lib/clean-modify';
-import { SourceImage } from '../compress';
-
-interface Props {
-  source?: SourceImage;
-  inputProcessorState?: InputProcessorState;
-  mobileView: boolean;
-  leftCompressed?: ImageData;
-  rightCompressed?: ImageData;
-  leftImgContain: boolean;
-  rightImgContain: boolean;
-  onBack: () => void;
-  onInputProcessorChange: (newState: InputProcessorState) => void;
-}
-
-interface State {
-  scale: number;
-  editingScale: boolean;
-  altBackground: boolean;
-}
-
-const scaleToOpts: ScaleToOpts = {
-  originX: '50%',
-  originY: '50%',
-  relativeTo: 'container',
-  allowChangeEvent: true,
-};
-
-export default class Output extends Component<Props, State> {
-  state: State = {
-    scale: 1,
-    editingScale: false,
-    altBackground: false,
-  };
-  canvasLeft?: HTMLCanvasElement;
-  canvasRight?: HTMLCanvasElement;
-  pinchZoomLeft?: PinchZoom;
-  pinchZoomRight?: PinchZoom;
-  scaleInput?: HTMLInputElement;
-  retargetedEvents = new WeakSet<Event>();
-
-  componentDidMount() {
-    const leftDraw = this.leftDrawable();
-    const rightDraw = this.rightDrawable();
-
-    // Reset the pinch zoom, which may have an position set from the previous view, after pressing
-    // the back button.
-    this.pinchZoomLeft!.setTransform({
-      allowChangeEvent: true,
-      x: 0,
-      y: 0,
-      scale: 1,
-    });
-
-    if (this.canvasLeft && leftDraw) {
-      drawDataToCanvas(this.canvasLeft, leftDraw);
-    }
-    if (this.canvasRight && rightDraw) {
-      drawDataToCanvas(this.canvasRight, rightDraw);
-    }
-  }
-
-  componentDidUpdate(prevProps: Props, prevState: State) {
-    const prevLeftDraw = this.leftDrawable(prevProps);
-    const prevRightDraw = this.rightDrawable(prevProps);
-    const leftDraw = this.leftDrawable();
-    const rightDraw = this.rightDrawable();
-    const sourceFileChanged =
-      // Has the value become (un)defined?
-      !!this.props.source !== !!prevProps.source ||
-      // Or has the file changed?
-      (this.props.source &&
-        prevProps.source &&
-        this.props.source.file !== prevProps.source.file);
-
-    const oldSourceData = prevProps.source && prevProps.source.processed;
-    const newSourceData = this.props.source && this.props.source.processed;
-    const pinchZoom = this.pinchZoomLeft!;
-
-    if (sourceFileChanged) {
-      // New image? Reset the pinch-zoom.
-      pinchZoom.setTransform({
-        allowChangeEvent: true,
-        x: 0,
-        y: 0,
-        scale: 1,
-      });
-    } else if (
-      oldSourceData &&
-      newSourceData &&
-      oldSourceData !== newSourceData
-    ) {
-      // Since the pinch zoom transform origin is the top-left of the content, we need to flip
-      // things around a bit when the content size changes, so the new content appears as if it were
-      // central to the previous content.
-      const scaleChange = 1 - pinchZoom.scale;
-      const oldXScaleOffset = (oldSourceData.width / 2) * scaleChange;
-      const oldYScaleOffset = (oldSourceData.height / 2) * scaleChange;
-
-      pinchZoom.setTransform({
-        allowChangeEvent: true,
-        x: pinchZoom.x - oldXScaleOffset + oldYScaleOffset,
-        y: pinchZoom.y - oldYScaleOffset + oldXScaleOffset,
-      });
-    }
-
-    if (leftDraw && leftDraw !== prevLeftDraw && this.canvasLeft) {
-      drawDataToCanvas(this.canvasLeft, leftDraw);
-    }
-    if (rightDraw && rightDraw !== prevRightDraw && this.canvasRight) {
-      drawDataToCanvas(this.canvasRight, rightDraw);
-    }
-  }
-
-  shouldComponentUpdate(nextProps: Props, nextState: State) {
-    return (
-      !shallowEqual(this.props, nextProps) ||
-      !shallowEqual(this.state, nextState)
-    );
-  }
-
-  private leftDrawable(props: Props = this.props): ImageData | undefined {
-    return props.leftCompressed || (props.source && props.source.processed);
-  }
-
-  private rightDrawable(props: Props = this.props): ImageData | undefined {
-    return props.rightCompressed || (props.source && props.source.processed);
-  }
-
-  @bind
-  private toggleBackground() {
-    this.setState({
-      altBackground: !this.state.altBackground,
-    });
-  }
-
-  @bind
-  private zoomIn() {
-    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
-
-    this.pinchZoomLeft.scaleTo(this.state.scale * 1.25, scaleToOpts);
-  }
-
-  @bind
-  private zoomOut() {
-    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
-
-    this.pinchZoomLeft.scaleTo(this.state.scale / 1.25, scaleToOpts);
-  }
-
-  @bind
-  private onRotateClick() {
-    const { inputProcessorState } = this.props;
-    if (!inputProcessorState) return;
-
-    const newState = cleanSet(
-      inputProcessorState,
-      'rotate.rotate',
-      (inputProcessorState.rotate.rotate + 90) % 360,
-    );
-
-    this.props.onInputProcessorChange(newState);
-  }
-
-  @bind
-  private onScaleValueFocus() {
-    this.setState({ editingScale: true }, () => {
-      if (this.scaleInput) {
-        // 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).transform;
-        this.scaleInput.focus();
-      }
-    });
-  }
-
-  @bind
-  private onScaleInputBlur() {
-    this.setState({ editingScale: false });
-  }
-
-  @bind
-  private onScaleInputChanged(event: Event) {
-    const target = event.target as HTMLInputElement;
-    const percent = parseFloat(target.value);
-    if (isNaN(percent)) return;
-    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
-
-    this.pinchZoomLeft.scaleTo(percent / 100, scaleToOpts);
-  }
-
-  @bind
-  private onPinchZoomLeftChange(event: Event) {
-    if (!this.pinchZoomRight || !this.pinchZoomLeft)
-      throw Error('Missing pinch-zoom element');
-    this.setState({
-      scale: this.pinchZoomLeft.scale,
-    });
-    this.pinchZoomRight.setTransform({
-      scale: this.pinchZoomLeft.scale,
-      x: this.pinchZoomLeft.x,
-      y: this.pinchZoomLeft.y,
-    });
-  }
-
-  /**
-   * We're using two pinch zoom elements, but we want them to stay in sync. When one moves, we
-   * update the position of the other. However, this is tricky when it comes to multi-touch, when
-   * one finger is on one pinch-zoom, and the other finger is on the other. To overcome this, we
-   * redirect all relevant pointer/touch/mouse events to the first pinch zoom element.
-   *
-   * @param event Event to redirect
-   */
-  @bind
-  private onRetargetableEvent(event: Event) {
-    const targetEl = event.target as HTMLElement;
-    if (!this.pinchZoomLeft) throw Error('Missing pinch-zoom element');
-    // If the event is on the handle of the two-up, let it through,
-    // unless it's a wheel event, in which case always let it through.
-    if (event.type !== 'wheel' && targetEl.closest(`.${twoUpHandle}`)) return;
-    // If we've already retargeted this event, let it through.
-    if (this.retargetedEvents.has(event)) return;
-    // Stop the event in its tracks.
-    event.stopImmediatePropagation();
-    event.preventDefault();
-    // Clone the event & dispatch
-    // Some TypeScript trickery needed due to https://github.com/Microsoft/TypeScript/issues/3841
-    const clonedEvent = new (event.constructor as typeof Event)(
-      event.type,
-      event,
-    );
-    this.retargetedEvents.add(clonedEvent);
-    this.pinchZoomLeft.dispatchEvent(clonedEvent);
-
-    // Unfocus any active element on touchend. This fixes an issue on (at least) Android Chrome,
-    // where the software keyboard is hidden, but the input remains focused, then after interaction
-    // with this element the keyboard reappears for NO GOOD REASON. Thanks Android.
-    if (
-      event.type === 'touchend' &&
-      document.activeElement &&
-      document.activeElement instanceof HTMLElement
-    ) {
-      document.activeElement.blur();
-    }
-  }
-
-  render(
-    { mobileView, leftImgContain, rightImgContain, source, onBack }: Props,
-    { scale, editingScale, altBackground }: State,
-  ) {
-    const leftDraw = this.leftDrawable();
-    const rightDraw = this.rightDrawable();
-    // To keep position stable, the output is put in a square using the longest dimension.
-    const originalImage = source && source.processed;
-
-    return (
-      <div
-        class={`${style.output} ${altBackground ? style.altBackground : ''}`}
-      >
-        <two-up
-          legacy-clip-compat
-          class={style.twoUp}
-          orientation={mobileView ? 'vertical' : 'horizontal'}
-          // Event redirecting. See onRetargetableEvent.
-          onTouchStartCapture={this.onRetargetableEvent}
-          onTouchEndCapture={this.onRetargetableEvent}
-          onTouchMoveCapture={this.onRetargetableEvent}
-          onPointerDownCapture={this.onRetargetableEvent}
-          onMouseDownCapture={this.onRetargetableEvent}
-          onWheelCapture={this.onRetargetableEvent}
-        >
-          <pinch-zoom
-            class={style.pinchZoom}
-            onChange={this.onPinchZoomLeftChange}
-            ref={linkRef(this, 'pinchZoomLeft')}
-          >
-            <canvas
-              class={style.pinchTarget}
-              ref={linkRef(this, 'canvasLeft')}
-              width={leftDraw && leftDraw.width}
-              height={leftDraw && leftDraw.height}
-              style={{
-                width: originalImage && originalImage.width,
-                height: originalImage && originalImage.height,
-                objectFit: leftImgContain ? 'contain' : '',
-              }}
-            />
-          </pinch-zoom>
-          <pinch-zoom
-            class={style.pinchZoom}
-            ref={linkRef(this, 'pinchZoomRight')}
-          >
-            <canvas
-              class={style.pinchTarget}
-              ref={linkRef(this, 'canvasRight')}
-              width={rightDraw && rightDraw.width}
-              height={rightDraw && rightDraw.height}
-              style={{
-                width: originalImage && originalImage.width,
-                height: originalImage && originalImage.height,
-                objectFit: rightImgContain ? 'contain' : '',
-              }}
-            />
-          </pinch-zoom>
-        </two-up>
-
-        <div class={style.back}>
-          <button class={style.button} onClick={onBack}>
-            <BackIcon />
-          </button>
-        </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={linkRef(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 class={style.buttonsNoWrap}>
-            <button
-              class={style.button}
-              onClick={this.onRotateClick}
-              title="Rotate image"
-            >
-              <RotateIcon />
-            </button>
-            <button
-              class={`${style.button} ${altBackground ? style.active : ''}`}
-              onClick={this.toggleBackground}
-              title="Change canvas color"
-            >
-              {altBackground ? (
-                <ToggleBackgroundActiveIcon />
-              ) : (
-                <ToggleBackgroundIcon />
-              )}
-            </button>
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/Output/style.scss b/src_old/components/Output/style.scss
deleted file mode 100644
index ce1b68fc..00000000
--- a/src_old/components/Output/style.scss
+++ /dev/null
@@ -1,166 +0,0 @@
-.output {
-  composes: abs-fill from '../../lib/util.scss';
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: #000;
-    opacity: 0;
-    transition: opacity 500ms ease;
-  }
-
-  &.alt-background::before {
-    opacity: 0.6;
-  }
-}
-
-.two-up {
-  composes: abs-fill from '../../lib/util.scss';
-  --accent-color: var(--button-fg);
-}
-
-.pinch-zoom {
-  composes: abs-fill from '../../lib/util.scss';
-  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;
-}
-
-.controls {
-  position: absolute;
-  display: flex;
-  justify-content: center;
-  top: 0;
-  left: 0;
-  right: 0;
-  padding: 9px 84px;
-  overflow: hidden;
-  flex-wrap: wrap;
-  contain: content;
-
-  // 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;
-
-  & :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: #fff;
-  border: 1px solid rgba(0,0,0,0.2);
-  border-radius: 5px;
-  line-height: 1;
-  white-space: nowrap;
-  height: 36px;
-  padding: 0 8px;
-  cursor: pointer;
-
-  @media (min-width: 600px) {
-    height: 48px;
-    padding: 0 16px;
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 2px var(--button-fg);
-    outline: none;
-    z-index: 1;
-  }
-}
-
-.button {
-  color: var(--button-fg);
-
-  &:hover {
-    background-color: #eee;
-  }
-
-  &.active {
-    background: #34B9EB;
-    color: #fff;
-
-    &:hover {
-      background: #32a3ce;
-    }
-  }
-}
-
-.zoom {
-  color: #625E80;
-  cursor: text;
-  width: 6em;
-  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 var(--button-fg);
-  }
-}
-
-.zoom-value {
-  position: relative;
-  top: 1px;
-  margin: 0 3px 0 0;
-  color: #888;
-  border-bottom: 1px dashed #999;
-}
-
-.back {
-  position: absolute;
-  top: 0;
-  left: 0;
-  padding: 9px;
-}
-
-.buttons-no-wrap {
-  display: flex;
-  pointer-events: none;
-
-  & > * {
-    pointer-events: auto;
-  }
-}
diff --git a/src_old/components/checkbox/index.tsx b/src_old/components/checkbox/index.tsx
deleted file mode 100644
index 87ffa84c..00000000
--- a/src_old/components/checkbox/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { h, Component } from 'preact';
-import * as style from './style.scss';
-import { UncheckedIcon, CheckedIcon } from '../../lib/icons';
-
-interface Props extends JSX.HTMLAttributes {}
-interface State {}
-
-export default class Checkbox extends Component<Props, State> {
-  render(props: Props) {
-    return (
-      <div class={style.checkbox}>
-        {props.checked ? (
-          <CheckedIcon class={`${style.icon} ${style.checked}`} />
-        ) : (
-          <UncheckedIcon class={style.icon} />
-        )}
-        <input class={style.realCheckbox} type="checkbox" {...props} />
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/checkbox/style.scss b/src_old/components/checkbox/style.scss
deleted file mode 100644
index 67aecd6a..00000000
--- a/src_old/components/checkbox/style.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.checkbox {
-  display: inline-block;
-  position: relative;
-  --size: 17px;
-}
-
-.real-checkbox {
-  top: 0;
-  position: absolute;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.icon {
-  display: block;
-  width: var(--size);
-  height: var(--size);
-}
-
-.checked {
-  fill: #34B9EB;
-}
diff --git a/src_old/components/compress/custom-els/MultiPanel/index.ts b/src_old/components/compress/custom-els/MultiPanel/index.ts
deleted file mode 100644
index 6895bf3f..00000000
--- a/src_old/components/compress/custom-els/MultiPanel/index.ts
+++ /dev/null
@@ -1,320 +0,0 @@
-import * as style from './styles.css';
-import { transitionHeight } from '../../../../lib/util';
-
-interface CloseAllOptions {
-  exceptFirst?: boolean;
-}
-
-const openOneOnlyAttr = 'open-one-only';
-
-function getClosestHeading(el: Element): HTMLElement | undefined {
-  // Look for the child of multi-panel, but stop at interactive elements like links & buttons
-  const closestEl = el.closest('multi-panel > *, a, button');
-  if (closestEl && closestEl.classList.contains(style.panelHeading)) {
-    return closestEl as HTMLElement;
-  }
-  return undefined;
-}
-
-async function close(heading: HTMLElement) {
-  const content = heading.nextElementSibling as HTMLElement;
-
-  // if there is no content, nothing to expand
-  if (!content) return;
-
-  const from = content.getBoundingClientRect().height;
-
-  heading.removeAttribute('content-expanded');
-  content.setAttribute('aria-expanded', 'false');
-
-  // Wait a microtask so other calls to open/close can get the final sizes.
-  await null;
-
-  await transitionHeight(content, {
-    from,
-    to: 0,
-    duration: 300,
-  });
-
-  content.style.height = '';
-}
-
-async function open(heading: HTMLElement) {
-  const content = heading.nextElementSibling as HTMLElement;
-
-  // if there is no content, nothing to expand
-  if (!content) return;
-
-  const from = content.getBoundingClientRect().height;
-
-  heading.setAttribute('content-expanded', '');
-  content.setAttribute('aria-expanded', 'true');
-
-  const to = content.getBoundingClientRect().height;
-
-  // Wait a microtask so other calls to open/close can get the final sizes.
-  await null;
-
-  await transitionHeight(content, {
-    from,
-    to,
-    duration: 300,
-  });
-
-  content.style.height = '';
-}
-
-/**
- * A multi-panel view that the user can add any number of 'panels'.
- * 'a panel' consists of two elements. Even index element becomes heading,
- * and odd index element becomes the expandable content.
- */
-export default class MultiPanel extends HTMLElement {
-  static get observedAttributes() {
-    return [openOneOnlyAttr];
-  }
-
-  constructor() {
-    super();
-
-    // add EventListeners
-    this.addEventListener('click', this._onClick);
-    this.addEventListener('keydown', this._onKeyDown);
-
-    // Watch for children changes.
-    new MutationObserver(() => this._childrenChange()).observe(this, {
-      childList: true,
-    });
-  }
-
-  connectedCallback() {
-    this._childrenChange();
-  }
-
-  attributeChangedCallback(
-    name: string,
-    oldValue: string | null,
-    newValue: string | null,
-  ) {
-    if (name === openOneOnlyAttr && newValue === null) {
-      this._closeAll({ exceptFirst: true });
-    }
-  }
-
-  // Click event handler
-  private _onClick(event: MouseEvent) {
-    const el = event.target as HTMLElement;
-    const heading = getClosestHeading(el);
-    if (!heading) return;
-    this._toggle(heading);
-  }
-
-  // KeyDown event handler
-  private _onKeyDown(event: KeyboardEvent) {
-    const selectedEl = document.activeElement!;
-    const heading = getClosestHeading(selectedEl);
-
-    // if keydown event is not on heading element, ignore
-    if (!heading) return;
-
-    // if something inside of heading has focus, ignore
-    if (selectedEl !== heading) return;
-
-    // don’t handle modifier shortcuts used by assistive technology.
-    if (event.altKey) return;
-
-    let newHeading: HTMLElement | undefined;
-
-    switch (event.key) {
-      case 'ArrowLeft':
-      case 'ArrowUp':
-        newHeading = this._prevHeading();
-        break;
-
-      case 'ArrowRight':
-      case 'ArrowDown':
-        newHeading = this._nextHeading();
-        break;
-
-      case 'Home':
-        newHeading = this._firstHeading();
-        break;
-
-      case 'End':
-        newHeading = this._lastHeading();
-        break;
-
-      // this has 3 cases listed to support IEs and FF before 37
-      case 'Enter':
-      case ' ':
-      case 'Spacebar':
-        this._toggle(heading);
-        break;
-
-      // Any other key press is ignored and passed back to the browser.
-      default:
-        return;
-    }
-
-    event.preventDefault();
-    if (newHeading) {
-      selectedEl.setAttribute('tabindex', '-1');
-      newHeading.setAttribute('tabindex', '0');
-      newHeading.focus();
-    }
-  }
-
-  private _toggle(heading: HTMLElement) {
-    if (!heading) return;
-
-    // toggle expanded and aria-expanded attributes
-    if (heading.hasAttribute('content-expanded')) {
-      close(heading);
-    } else {
-      if (this.openOneOnly) this._closeAll();
-      open(heading);
-    }
-  }
-
-  private _closeAll(options: CloseAllOptions = {}): void {
-    const { exceptFirst = false } = options;
-    let els = [...this.children].filter((el) =>
-      el.matches('[content-expanded]'),
-    ) as HTMLElement[];
-
-    if (exceptFirst) {
-      els = els.slice(1);
-    }
-
-    for (const el of els) close(el);
-  }
-
-  // children of multi-panel should always be even number (heading/content pair)
-  private _childrenChange() {
-    let preserveTabIndex = false;
-    let heading = this.firstElementChild;
-
-    while (heading) {
-      const content = heading.nextElementSibling;
-      const randomId = Math.random().toString(36).substr(2, 9);
-
-      // if at the end of this loop, runout of element for content,
-      // it means it has odd number of elements. log error and set heading to end the loop.
-      if (!content) {
-        console.error(
-          '<multi-panel> requires an even number of element children.',
-        );
-        break;
-      }
-
-      // When odd number of elements were inserted in the middle,
-      // what was heading before may become content after the insertion.
-      // Remove classes and attributes to prepare for this change.
-      heading.classList.remove(style.panelContent);
-      content.classList.remove(style.panelHeading);
-      heading.removeAttribute('aria-expanded');
-      heading.removeAttribute('content-expanded');
-
-      // If appreciable, remove tabindex from content which used to be header.
-      content.removeAttribute('tabindex');
-
-      // Assign heading and content classes
-      heading.classList.add(style.panelHeading);
-      content.classList.add(style.panelContent);
-
-      // Assign ids and aria-X for heading/content pair.
-      heading.id = `panel-heading-${randomId}`;
-      heading.setAttribute('aria-controls', `panel-content-${randomId}`);
-      content.id = `panel-content-${randomId}`;
-      content.setAttribute('aria-labelledby', `panel-heading-${randomId}`);
-
-      // If tabindex 0 is assigned to a heading, flag to preserve tab index position.
-      // Otherwise, make sure tabindex -1 is set to heading elements.
-      if (heading.getAttribute('tabindex') === '0') {
-        preserveTabIndex = true;
-      } else {
-        heading.setAttribute('tabindex', '-1');
-      }
-
-      // It's possible that the heading & content expanded attributes are now out of sync. Resync
-      // them using the heading as the source of truth.
-      content.setAttribute(
-        'aria-expanded',
-        heading.hasAttribute('content-expanded') ? 'true' : 'false',
-      );
-
-      // next sibling of content = next heading
-      heading = content.nextElementSibling;
-    }
-
-    // if no flag, make 1st heading as tabindex 0 (otherwise keep previous tab index position).
-    if (!preserveTabIndex && this.firstElementChild) {
-      this.firstElementChild.setAttribute('tabindex', '0');
-    }
-
-    // In case we're openOneOnly, and an additional open item has been added:
-    if (this.openOneOnly) this._closeAll({ exceptFirst: true });
-  }
-
-  // returns heading that is before currently selected one.
-  private _prevHeading() {
-    // activeElement would be the currently selected heading
-    // 2 elements before that would be the previous heading unless it is the first element.
-    if (this.firstElementChild === document.activeElement) {
-      return this.firstElementChild as HTMLElement;
-    }
-    // previous Element of active Element is previous Content,
-    // previous Element of previous Content is previousHeading
-    const previousContent = document.activeElement!.previousElementSibling;
-    if (previousContent) {
-      return previousContent.previousElementSibling as HTMLElement;
-    }
-  }
-
-  // returns heading that is after currently selected one.
-  private _nextHeading() {
-    // activeElement would be the currently selected heading
-    // 2 elemements after that would be the next heading.
-    const nextContent = document.activeElement!.nextElementSibling;
-    if (nextContent) {
-      return nextContent.nextElementSibling as HTMLElement;
-    }
-  }
-
-  // returns first heading in multi-panel.
-  private _firstHeading() {
-    // first element is always first heading
-    return this.firstElementChild as HTMLElement;
-  }
-
-  // returns last heading in multi-panel.
-  private _lastHeading() {
-    // if the last element is heading, return last element
-    const lastEl = this.lastElementChild as HTMLElement;
-    if (lastEl && lastEl.classList.contains(style.panelHeading)) {
-      return lastEl;
-    }
-    // otherwise return 2nd from the last
-    const lastContent = this.lastElementChild;
-    if (lastContent) {
-      return lastContent.previousElementSibling as HTMLElement;
-    }
-  }
-
-  /**
-   * If true, only one panel can be open at once. When one opens, others close.
-   */
-  get openOneOnly() {
-    return this.hasAttribute(openOneOnlyAttr);
-  }
-
-  set openOneOnly(val: boolean) {
-    if (val) {
-      this.setAttribute(openOneOnlyAttr, '');
-    } else {
-      this.removeAttribute(openOneOnlyAttr);
-    }
-  }
-}
-
-customElements.define('multi-panel', MultiPanel);
diff --git a/src_old/components/compress/custom-els/MultiPanel/missing-types.d.ts b/src_old/components/compress/custom-els/MultiPanel/missing-types.d.ts
deleted file mode 100644
index b775fa8a..00000000
--- a/src_old/components/compress/custom-els/MultiPanel/missing-types.d.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-interface MultiPanelAttributes extends JSX.HTMLAttributes {
-  'open-one-only'?: boolean;
-}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'multi-panel': MultiPanelAttributes;
-  }
-}
diff --git a/src_old/components/compress/custom-els/MultiPanel/styles.css b/src_old/components/compress/custom-els/MultiPanel/styles.css
deleted file mode 100644
index 0efe86ce..00000000
--- a/src_old/components/compress/custom-els/MultiPanel/styles.css
+++ /dev/null
@@ -1,10 +0,0 @@
-.panel-heading {
-  background: gray;
-}
-.panel-content {
-  height: 0px;
-  overflow: auto;
-}
-.panel-content[aria-expanded='true'] {
-  height: auto;
-}
diff --git a/src_old/components/compress/index.tsx b/src_old/components/compress/index.tsx
deleted file mode 100644
index e332d5b9..00000000
--- a/src_old/components/compress/index.tsx
+++ /dev/null
@@ -1,774 +0,0 @@
-import { h, Component } from 'preact';
-
-import { bind, Fileish } from '../../lib/initial-util';
-import { blobToImg, drawableToImageData, blobToText } from '../../lib/util';
-import * as style from './style.scss';
-import Output from '../Output';
-import Options from '../Options';
-import ResultCache from './result-cache';
-import * as identity from '../../codecs/identity/encoder-meta';
-import * as oxiPNG from '../../codecs/oxipng/encoder-meta';
-import * as mozJPEG from '../../codecs/mozjpeg/encoder-meta';
-import * as webP from '../../codecs/webp/encoder-meta';
-import * as avif from '../../codecs/avif/encoder-meta';
-import * as browserPNG from '../../codecs/browser-png/encoder-meta';
-import * as browserJPEG from '../../codecs/browser-jpeg/encoder-meta';
-import * as browserWebP from '../../codecs/browser-webp/encoder-meta';
-import * as browserGIF from '../../codecs/browser-gif/encoder-meta';
-import * as browserTIFF from '../../codecs/browser-tiff/encoder-meta';
-import * as browserJP2 from '../../codecs/browser-jp2/encoder-meta';
-import * as browserBMP from '../../codecs/browser-bmp/encoder-meta';
-import * as browserPDF from '../../codecs/browser-pdf/encoder-meta';
-import {
-  EncoderState,
-  EncoderType,
-  EncoderOptions,
-  encoderMap,
-} from '../../codecs/encoders';
-import {
-  PreprocessorState,
-  defaultPreprocessorState,
-} from '../../codecs/preprocessors';
-import { decodeImage } from '../../codecs/decoders';
-import { cleanMerge, cleanSet } from '../../lib/clean-modify';
-import Processor from '../../codecs/processor';
-import {
-  BrowserResizeOptions,
-  isWorkerOptions as isWorkerResizeOptions,
-  isHqx,
-  WorkerResizeOptions,
-} from '../../codecs/resize/processor-meta';
-import './custom-els/MultiPanel';
-import Results from '../results';
-import { ExpandIcon, CopyAcrossIconProps } from '../../lib/icons';
-import SnackBarElement from '../../lib/SnackBar';
-import {
-  InputProcessorState,
-  defaultInputProcessorState,
-} from '../../codecs/input-processors';
-
-export interface SourceImage {
-  file: File | Fileish;
-  decoded: ImageData;
-  processed: ImageData;
-  vectorImage?: HTMLImageElement;
-  inputProcessorState: InputProcessorState;
-}
-
-interface SideSettings {
-  preprocessorState: PreprocessorState;
-  encoderState: EncoderState;
-}
-
-interface Side {
-  preprocessed?: ImageData;
-  file?: Fileish;
-  downloadUrl?: string;
-  data?: ImageData;
-  latestSettings: SideSettings;
-  encodedSettings?: SideSettings;
-  loading: boolean;
-  /** Counter of the latest bmp currently encoding */
-  loadingCounter: number;
-  /** Counter of the latest bmp encoded */
-  loadedCounter: number;
-}
-
-interface Props {
-  file: File | Fileish;
-  showSnack: SnackBarElement['showSnackbar'];
-  onBack: () => void;
-}
-
-interface State {
-  source?: SourceImage;
-  sides: [Side, Side];
-  /** Source image load */
-  loading: boolean;
-  loadingCounter: number;
-  error?: string;
-  mobileView: boolean;
-}
-
-interface UpdateImageOptions {
-  skipPreprocessing?: boolean;
-}
-
-async function processInput(
-  data: ImageData,
-  inputProcessData: InputProcessorState,
-  processor: Processor,
-) {
-  let processedData = data;
-
-  if (inputProcessData.rotate.rotate !== 0) {
-    processedData = await processor.rotate(
-      processedData,
-      inputProcessData.rotate,
-    );
-  }
-
-  return processedData;
-}
-
-async function preprocessImage(
-  source: SourceImage,
-  preprocessData: PreprocessorState,
-  processor: Processor,
-): Promise<ImageData> {
-  let result = source.processed;
-
-  if (preprocessData.resize.enabled) {
-    if (preprocessData.resize.method === 'vector' && source.vectorImage) {
-      result = processor.vectorResize(
-        source.vectorImage,
-        preprocessData.resize,
-      );
-    } else if (isHqx(preprocessData.resize)) {
-      // Hqx can only do x2, x3 or x4.
-      result = await processor.workerResize(result, preprocessData.resize);
-      // If the target size is not a clean x2, x3 or x4, use Catmull-Rom
-      // for the remaining scaling.
-      const pixelOpts = { ...preprocessData.resize, method: 'catrom' };
-      result = await processor.workerResize(
-        result,
-        pixelOpts as WorkerResizeOptions,
-      );
-    } else if (isWorkerResizeOptions(preprocessData.resize)) {
-      result = await processor.workerResize(result, preprocessData.resize);
-    } else {
-      result = processor.resize(
-        result,
-        preprocessData.resize as BrowserResizeOptions,
-      );
-    }
-  }
-  if (preprocessData.quantizer.enabled) {
-    result = await processor.imageQuant(result, preprocessData.quantizer);
-  }
-  return result;
-}
-
-async function compressImage(
-  image: ImageData,
-  encodeData: EncoderState,
-  sourceFilename: string,
-  processor: Processor,
-): Promise<Fileish> {
-  const compressedData = await (() => {
-    switch (encodeData.type) {
-      case oxiPNG.type:
-        return processor.oxiPngEncode(image, encodeData.options);
-      case mozJPEG.type:
-        return processor.mozjpegEncode(image, encodeData.options);
-      case webP.type:
-        return processor.webpEncode(image, encodeData.options);
-      case avif.type:
-        return processor.avifEncode(image, encodeData.options);
-      case browserPNG.type:
-        return processor.browserPngEncode(image);
-      case browserJPEG.type:
-        return processor.browserJpegEncode(image, encodeData.options);
-      case browserWebP.type:
-        return processor.browserWebpEncode(image, encodeData.options);
-      case browserGIF.type:
-        return processor.browserGifEncode(image);
-      case browserTIFF.type:
-        return processor.browserTiffEncode(image);
-      case browserJP2.type:
-        return processor.browserJp2Encode(image);
-      case browserBMP.type:
-        return processor.browserBmpEncode(image);
-      case browserPDF.type:
-        return processor.browserPdfEncode(image);
-      default:
-        throw Error(`Unexpected encoder ${JSON.stringify(encodeData)}`);
-    }
-  })();
-
-  const encoder = encoderMap[encodeData.type];
-
-  return new Fileish(
-    [compressedData],
-    sourceFilename.replace(/.[^.]*$/, `.${encoder.extension}`),
-    { type: encoder.mimeType },
-  );
-}
-
-function stateForNewSourceData(state: State, newSource: SourceImage): State {
-  let newState = { ...state };
-
-  for (const i of [0, 1]) {
-    // Ditch previous encodings
-    const downloadUrl = state.sides[i].downloadUrl;
-    if (downloadUrl) URL.revokeObjectURL(downloadUrl);
-
-    newState = cleanMerge(state, `sides.${i}`, {
-      preprocessed: undefined,
-      file: undefined,
-      downloadUrl: undefined,
-      data: undefined,
-      encodedSettings: undefined,
-    });
-  }
-
-  return newState;
-}
-
-async function processSvg(blob: Blob): Promise<HTMLImageElement> {
-  // Firefox throws if you try to draw an SVG to canvas that doesn't have width/height.
-  // In Chrome it loads, but drawImage behaves weirdly.
-  // This function sets width/height if it isn't already set.
-  const parser = new DOMParser();
-  const text = await blobToText(blob);
-  const document = parser.parseFromString(text, 'image/svg+xml');
-  const svg = document.documentElement!;
-
-  if (svg.hasAttribute('width') && svg.hasAttribute('height')) {
-    return blobToImg(blob);
-  }
-
-  const viewBox = svg.getAttribute('viewBox');
-  if (viewBox === null) throw Error('SVG must have width/height or viewBox');
-
-  const viewboxParts = viewBox.split(/\s+/);
-  svg.setAttribute('width', viewboxParts[2]);
-  svg.setAttribute('height', viewboxParts[3]);
-
-  const serializer = new XMLSerializer();
-  const newSource = serializer.serializeToString(document);
-  return blobToImg(new Blob([newSource], { type: 'image/svg+xml' }));
-}
-
-// These are only used in the mobile view
-const resultTitles = ['Top', 'Bottom'];
-// These are only used in the desktop view
-const buttonPositions = ['download-left', 'download-right'] as (
-  | 'download-left'
-  | 'download-right'
-)[];
-
-const originalDocumentTitle = document.title;
-
-export default class Compress extends Component<Props, State> {
-  widthQuery = window.matchMedia('(max-width: 599px)');
-
-  state: State = {
-    source: undefined,
-    loading: false,
-    loadingCounter: 0,
-    sides: [
-      {
-        latestSettings: {
-          preprocessorState: defaultPreprocessorState,
-          encoderState: {
-            type: identity.type,
-            options: identity.defaultOptions,
-          },
-        },
-        loadingCounter: 0,
-        loadedCounter: 0,
-        loading: false,
-      },
-      {
-        latestSettings: {
-          preprocessorState: defaultPreprocessorState,
-          encoderState: { type: mozJPEG.type, options: mozJPEG.defaultOptions },
-        },
-        loadingCounter: 0,
-        loadedCounter: 0,
-        loading: false,
-      },
-    ],
-    mobileView: this.widthQuery.matches,
-  };
-
-  private readonly encodeCache = new ResultCache();
-  private readonly leftProcessor = new Processor();
-  private readonly rightProcessor = new Processor();
-  // For debouncing calls to updateImage for each side.
-  private readonly updateImageTimeoutIds: [number?, number?] = [
-    undefined,
-    undefined,
-  ];
-
-  constructor(props: Props) {
-    super(props);
-    this.widthQuery.addListener(this.onMobileWidthChange);
-    this.updateFile(props.file);
-
-    import('../../lib/sw-bridge').then(({ mainAppLoaded }) => mainAppLoaded());
-  }
-
-  @bind
-  private onMobileWidthChange() {
-    this.setState({ mobileView: this.widthQuery.matches });
-  }
-
-  private onEncoderTypeChange(index: 0 | 1, newType: EncoderType): void {
-    this.setState({
-      sides: cleanSet(
-        this.state.sides,
-        `${index}.latestSettings.encoderState`,
-        {
-          type: newType,
-          options: encoderMap[newType].defaultOptions,
-        },
-      ),
-    });
-  }
-
-  private onPreprocessorOptionsChange(
-    index: 0 | 1,
-    options: PreprocessorState,
-  ): void {
-    this.setState({
-      sides: cleanSet(
-        this.state.sides,
-        `${index}.latestSettings.preprocessorState`,
-        options,
-      ),
-    });
-  }
-
-  private onEncoderOptionsChange(index: 0 | 1, options: EncoderOptions): void {
-    this.setState({
-      sides: cleanSet(
-        this.state.sides,
-        `${index}.latestSettings.encoderState.options`,
-        options,
-      ),
-    });
-  }
-
-  private updateDocumentTitle(filename: string = ''): void {
-    document.title = filename
-      ? `${filename} - ${originalDocumentTitle}`
-      : originalDocumentTitle;
-  }
-
-  componentWillReceiveProps(nextProps: Props): void {
-    if (nextProps.file !== this.props.file) {
-      this.updateFile(nextProps.file);
-    }
-  }
-
-  componentWillUnmount(): void {
-    this.updateDocumentTitle();
-  }
-
-  componentDidUpdate(prevProps: Props, prevState: State): void {
-    const { source, sides } = this.state;
-
-    const sourceDataChanged =
-      // Has the source object become set/unset?
-      !!source !== !!prevState.source ||
-      // Or has the processed data changed?
-      (source &&
-        prevState.source &&
-        source.processed !== prevState.source.processed);
-
-    for (const [i, side] of sides.entries()) {
-      const prevSettings = prevState.sides[i].latestSettings;
-      const encoderChanged =
-        side.latestSettings.encoderState !== prevSettings.encoderState;
-      const preprocessorChanged =
-        side.latestSettings.preprocessorState !==
-        prevSettings.preprocessorState;
-
-      // The image only needs updated if the encoder/preprocessor settings have changed, or the
-      // source has changed.
-      if (sourceDataChanged || encoderChanged || preprocessorChanged) {
-        this.queueUpdateImage(i, {
-          skipPreprocessing: !sourceDataChanged && !preprocessorChanged,
-        });
-      }
-    }
-  }
-
-  private async onCopyToOtherClick(index: 0 | 1) {
-    const otherIndex = (index + 1) % 2;
-    const oldSettings = this.state.sides[otherIndex];
-    const newSettings = { ...this.state.sides[index] };
-
-    // Create a new object URL for the new settings. This avoids both sides sharing a URL, which
-    // means it can be safely revoked without impacting the other side.
-    if (newSettings.file)
-      newSettings.downloadUrl = URL.createObjectURL(newSettings.file);
-
-    this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, newSettings),
-    });
-
-    const result = await this.props.showSnack('Settings copied across', {
-      timeout: 5000,
-      actions: ['undo', 'dismiss'],
-    });
-
-    if (result !== 'undo') return;
-
-    this.setState({
-      sides: cleanSet(this.state.sides, otherIndex, oldSettings),
-    });
-  }
-
-  @bind
-  private async onInputProcessorChange(
-    options: InputProcessorState,
-  ): Promise<void> {
-    const source = this.state.source;
-    if (!source) return;
-
-    const oldRotate = source.inputProcessorState.rotate.rotate;
-    const newRotate = options.rotate.rotate;
-    const orientationChanged = oldRotate % 180 !== newRotate % 180;
-    const loadingCounter = this.state.loadingCounter + 1;
-    // Either processor is good enough here.
-    const processor = this.leftProcessor;
-
-    this.setState({
-      loadingCounter,
-      loading: true,
-      source: cleanSet(source, 'inputProcessorState', options),
-    });
-
-    // Abort any current encode jobs, as they're redundant now.
-    this.leftProcessor.abortCurrent();
-    this.rightProcessor.abortCurrent();
-
-    try {
-      const processed = await processInput(source.decoded, options, processor);
-
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-
-      let newState = { ...this.state, loading: false };
-      newState = cleanSet(newState, 'source.processed', processed);
-      newState = stateForNewSourceData(newState, newState.source!);
-
-      if (orientationChanged) {
-        // If orientation has changed, we should flip the resize values.
-        for (const i of [0, 1]) {
-          const resizeSettings =
-            newState.sides[i].latestSettings.preprocessorState.resize;
-          newState = cleanMerge(
-            newState,
-            `sides.${i}.latestSettings.preprocessorState.resize`,
-            {
-              width: resizeSettings.height,
-              height: resizeSettings.width,
-            },
-          );
-        }
-      }
-      this.setState(newState);
-    } catch (err) {
-      if (err.name === 'AbortError') return;
-      console.error(err);
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-      this.props.showSnack('Processing error');
-      this.setState({ loading: false });
-    }
-  }
-
-  @bind
-  private async updateFile(file: File | Fileish) {
-    const loadingCounter = this.state.loadingCounter + 1;
-    // Either processor is good enough here.
-    const processor = this.leftProcessor;
-
-    this.setState({ loadingCounter, loading: true });
-
-    // Abort any current encode jobs, as they're redundant now.
-    this.leftProcessor.abortCurrent();
-    this.rightProcessor.abortCurrent();
-
-    try {
-      let decoded: ImageData;
-      let vectorImage: HTMLImageElement | undefined;
-
-      // Special-case SVG. We need to avoid createImageBitmap because of
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=606319.
-      // Also, we cache the HTMLImageElement so we can perform vector resizing later.
-      if (file.type.startsWith('image/svg+xml')) {
-        vectorImage = await processSvg(file);
-        decoded = drawableToImageData(vectorImage);
-      } else {
-        // Either processor is good enough here.
-        decoded = await decodeImage(file, processor);
-      }
-
-      const processed = await processInput(
-        decoded,
-        defaultInputProcessorState,
-        processor,
-      );
-
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-
-      let newState: State = {
-        ...this.state,
-        source: {
-          decoded,
-          file,
-          vectorImage,
-          processed,
-          inputProcessorState: defaultInputProcessorState,
-        },
-        loading: false,
-      };
-
-      newState = stateForNewSourceData(newState, newState.source!);
-
-      for (const i of [0, 1]) {
-        // Default resize values come from the image:
-        newState = cleanMerge(
-          newState,
-          `sides.${i}.latestSettings.preprocessorState.resize`,
-          {
-            width: processed.width,
-            height: processed.height,
-            method: vectorImage ? 'vector' : 'lanczos3',
-          },
-        );
-      }
-
-      this.updateDocumentTitle(file.name);
-      this.setState(newState);
-    } catch (err) {
-      if (err.name === 'AbortError') return;
-      console.error(err);
-      // Another file has been opened/processed before this one processed.
-      if (this.state.loadingCounter !== loadingCounter) return;
-      this.props.showSnack('Invalid image');
-      this.setState({ loading: false });
-    }
-  }
-
-  /**
-   * Debounce the heavy lifting of updateImage.
-   * Otherwise, the thrashing causes jank, and sometimes crashes iOS Safari.
-   */
-  private queueUpdateImage(
-    index: number,
-    options: UpdateImageOptions = {},
-  ): void {
-    // Call updateImage after this delay, unless queueUpdateImage is called again, in which case the
-    // timeout is reset.
-    const delay = 100;
-
-    clearTimeout(this.updateImageTimeoutIds[index]);
-
-    this.updateImageTimeoutIds[index] = self.setTimeout(() => {
-      this.updateImage(index, options).catch((err) => {
-        console.error(err);
-      });
-    }, delay);
-  }
-
-  private async updateImage(
-    index: number,
-    options: UpdateImageOptions = {},
-  ): Promise<void> {
-    const { skipPreprocessing = false } = options;
-    const { source } = this.state;
-    if (!source) return;
-
-    // Each time we trigger an async encode, the counter changes.
-    const loadingCounter = this.state.sides[index].loadingCounter + 1;
-
-    let sides = cleanMerge(this.state.sides, index, {
-      loadingCounter,
-      loading: true,
-    });
-
-    this.setState({ sides });
-
-    const side = sides[index];
-    const settings = side.latestSettings;
-
-    let file: File | Fileish | undefined;
-    let preprocessed: ImageData | undefined;
-    let data: ImageData | undefined;
-    const cacheResult = this.encodeCache.match(
-      source.processed,
-      settings.preprocessorState,
-      settings.encoderState,
-    );
-    const processor = index === 0 ? this.leftProcessor : this.rightProcessor;
-
-    // Abort anything the processor is currently doing.
-    // Although the processor will abandon current tasks when a new one is called,
-    // we might not call another task here. Eg, we might get the result from the cache.
-    processor.abortCurrent();
-
-    if (cacheResult) {
-      ({ file, preprocessed, data } = cacheResult);
-    } else {
-      try {
-        // Special case for identity
-        if (settings.encoderState.type === identity.type) {
-          file = source.file;
-          data = source.processed;
-        } else {
-          preprocessed =
-            skipPreprocessing && side.preprocessed
-              ? side.preprocessed
-              : await preprocessImage(
-                  source,
-                  settings.preprocessorState,
-                  processor,
-                );
-
-          file = await compressImage(
-            preprocessed,
-            settings.encoderState,
-            source.file.name,
-            processor,
-          );
-          data = await decodeImage(file, processor);
-
-          this.encodeCache.add({
-            data,
-            preprocessed,
-            file,
-            sourceData: source.processed,
-            encoderState: settings.encoderState,
-            preprocessorState: settings.preprocessorState,
-          });
-        }
-      } catch (err) {
-        if (err.name === 'AbortError') return;
-        this.props.showSnack(
-          `Processing error (type=${settings.encoderState.type}): ${err}`,
-        );
-        throw err;
-      }
-    }
-
-    const latestData = this.state.sides[index];
-    // If a later encode has landed before this one, return.
-    if (loadingCounter < latestData.loadedCounter) {
-      return;
-    }
-
-    if (latestData.downloadUrl) URL.revokeObjectURL(latestData.downloadUrl);
-
-    sides = cleanMerge(this.state.sides, index, {
-      file,
-      data,
-      preprocessed,
-      downloadUrl: URL.createObjectURL(file),
-      loading: sides[index].loadingCounter !== loadingCounter,
-      loadedCounter: loadingCounter,
-      encodedSettings: settings,
-    });
-
-    this.setState({ sides });
-  }
-
-  render({ onBack }: Props, { loading, sides, source, mobileView }: State) {
-    const [leftSide, rightSide] = sides;
-    const [leftImageData, rightImageData] = sides.map((i) => i.data);
-
-    const options = sides.map((side, index) => (
-      // tslint:disable-next-line:jsx-key
-      <Options
-        source={source}
-        mobileView={mobileView}
-        preprocessorState={side.latestSettings.preprocessorState}
-        encoderState={side.latestSettings.encoderState}
-        onEncoderTypeChange={this.onEncoderTypeChange.bind(
-          this,
-          index as 0 | 1,
-        )}
-        onEncoderOptionsChange={this.onEncoderOptionsChange.bind(
-          this,
-          index as 0 | 1,
-        )}
-        onPreprocessorOptionsChange={this.onPreprocessorOptionsChange.bind(
-          this,
-          index as 0 | 1,
-        )}
-      />
-    ));
-
-    const copyDirections = (mobileView
-      ? ['down', 'up']
-      : ['right', 'left']) as CopyAcrossIconProps['copyDirection'][];
-
-    const results = sides.map((side, index) => (
-      // tslint:disable-next-line:jsx-key
-      <Results
-        downloadUrl={side.downloadUrl}
-        imageFile={side.file}
-        source={source}
-        loading={loading || side.loading}
-        copyDirection={copyDirections[index]}
-        onCopyToOtherClick={this.onCopyToOtherClick.bind(this, index as 0 | 1)}
-        buttonPosition={mobileView ? 'stack-right' : buttonPositions[index]}
-      >
-        {!mobileView
-          ? null
-          : [
-              <ExpandIcon class={style.expandIcon} key="expand-icon" />,
-              `${resultTitles[index]} (${
-                encoderMap[side.latestSettings.encoderState.type].label
-              })`,
-            ]}
-      </Results>
-    ));
-
-    // For rendering, we ideally want the settings that were used to create the data, not the latest
-    // settings.
-    const leftDisplaySettings =
-      leftSide.encodedSettings || leftSide.latestSettings;
-    const rightDisplaySettings =
-      rightSide.encodedSettings || rightSide.latestSettings;
-    const leftImgContain =
-      leftDisplaySettings.preprocessorState.resize.enabled &&
-      leftDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
-    const rightImgContain =
-      rightDisplaySettings.preprocessorState.resize.enabled &&
-      rightDisplaySettings.preprocessorState.resize.fitMethod === 'contain';
-
-    return (
-      <div class={style.compress}>
-        <Output
-          source={source}
-          mobileView={mobileView}
-          leftCompressed={leftImageData}
-          rightCompressed={rightImageData}
-          leftImgContain={leftImgContain}
-          rightImgContain={rightImgContain}
-          onBack={onBack}
-          inputProcessorState={source && source.inputProcessorState}
-          onInputProcessorChange={this.onInputProcessorChange}
-        />
-        {mobileView ? (
-          <div class={style.options}>
-            <multi-panel class={style.multiPanel} open-one-only>
-              {results[0]}
-              {options[0]}
-              {results[1]}
-              {options[1]}
-            </multi-panel>
-          </div>
-        ) : (
-          [
-            <div class={style.options} key="options0">
-              {options[0]}
-              {results[0]}
-            </div>,
-            <div class={style.options} key="options1">
-              {options[1]}
-              {results[1]}
-            </div>,
-          ]
-        )}
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/compress/result-cache.ts b/src_old/components/compress/result-cache.ts
deleted file mode 100644
index 6474e325..00000000
--- a/src_old/components/compress/result-cache.ts
+++ /dev/null
@@ -1,78 +0,0 @@
-import { EncoderState } from '../../codecs/encoders';
-import { Fileish } from '../../lib/initial-util';
-import { shallowEqual } from '../../lib/util';
-import { PreprocessorState } from '../../codecs/preprocessors';
-
-import * as identity from '../../codecs/identity/encoder-meta';
-
-interface CacheResult {
-  preprocessed: ImageData;
-  data: ImageData;
-  file: Fileish;
-}
-
-interface CacheEntry extends CacheResult {
-  preprocessorState: PreprocessorState;
-  encoderState: EncoderState;
-  sourceData: ImageData;
-}
-
-const SIZE = 5;
-
-export default class ResultCache {
-  private readonly _entries: CacheEntry[] = [];
-
-  add(entry: CacheEntry) {
-    if (entry.encoderState.type === identity.type)
-      throw Error('Cannot cache identity encodes');
-    // Add the new entry to the start
-    this._entries.unshift(entry);
-    // Remove the last entry if we're now bigger than SIZE
-    if (this._entries.length > SIZE) this._entries.pop();
-  }
-
-  match(
-    sourceData: ImageData,
-    preprocessorState: PreprocessorState,
-    encoderState: EncoderState,
-  ): CacheResult | undefined {
-    const matchingIndex = this._entries.findIndex((entry) => {
-      // Check for quick exits:
-      if (entry.sourceData !== sourceData) return false;
-      if (entry.encoderState.type !== encoderState.type) return false;
-
-      // Check that each set of options in the preprocessor are the same
-      for (const prop in preprocessorState) {
-        if (
-          !shallowEqual(
-            (preprocessorState as any)[prop],
-            (entry.preprocessorState as any)[prop],
-          )
-        )
-          return false;
-      }
-
-      // Check detailed encoder options
-      if (!shallowEqual(encoderState.options, entry.encoderState.options))
-        return false;
-
-      return true;
-    });
-
-    if (matchingIndex === -1) return undefined;
-
-    const matchingEntry = this._entries[matchingIndex];
-
-    if (matchingIndex !== 0) {
-      // Move the matched result to 1st position (LRU)
-      this._entries.splice(matchingIndex, 1);
-      this._entries.unshift(matchingEntry);
-    }
-
-    return {
-      data: matchingEntry.data,
-      preprocessed: matchingEntry.preprocessed,
-      file: matchingEntry.file,
-    };
-  }
-}
diff --git a/src_old/components/compress/style.scss b/src_old/components/compress/style.scss
deleted file mode 100644
index 3afe8eda..00000000
--- a/src_old/components/compress/style.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-.compress {
-  width: 100%;
-  height: 100%;
-  contain: strict;
-  display: grid;
-  align-items: end;
-  align-content: end;
-  grid-template-rows: 1fr auto;
-
-  @media (min-width: 600px) {
-    grid-template-columns: 1fr auto;
-    grid-template-rows: 100%;
-  }
-}
-
-.options {
-  color: #fff;
-  opacity: 0.9;
-  font-size: 1.2rem;
-  display: flex;
-  flex-flow: column;
-  max-width: 400px;
-  margin: 0 auto;
-  width: calc(100% - 60px);
-  max-height: calc(100% - 104px);
-  overflow: hidden;
-
-  @media (min-width: 600px) {
-    max-height: calc(100% - 75px);
-    width: 300px;
-    margin: 0;
-  }
-
-  @media (min-width: 860px) {
-    max-height: calc(100% - 40px);
-  }
-}
-
-.multi-panel {
-  position: relative;
-  display: flex;
-  flex-flow: column;
-  overflow: hidden;
-
-  // Reorder so headings appear after content:
-  & > :nth-child(1) {
-    order: 2;
-    margin-bottom: 10px;
-  }
-
-  & > :nth-child(2) {
-    order: 1;
-  }
-
-  & > :nth-child(3) {
-    order: 4;
-  }
-
-  & > :nth-child(4) {
-    order: 3;
-  }
-}
-
-.expand-icon {
-  transform: rotate(180deg);
-  margin-left: -12px;
-}
-
-[content-expanded] .expand-icon {
-  transform: none;
-}
-
-:focus .expand-icon {
-  fill: #34B9EB;
-}
diff --git a/src_old/components/custom-els/LoadingSpinner/index.ts b/src_old/components/custom-els/LoadingSpinner/index.ts
deleted file mode 100644
index b8ce7bdd..00000000
--- a/src_old/components/custom-els/LoadingSpinner/index.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-import * as styles from './styles.css';
-
-/**
- * A simple spinner. This custom element has no JS API. Just put it in the document, and it'll
- * spin. You can configure the following using CSS custom properties:
- *
- * --size: Size of the spinner element (it's always square). Default: 28px.
- * --color: Color of the spinner. Default: #4285f4.
- * --stroke-width: Width of the stroke of the spinner. Default: 3px.
- * --delay: Once the spinner enters the DOM, how long until it shows. This prevents the spinner
- *          appearing on the screen for short operations. Default: 300ms.
- */
-export default class LoadingSpinner extends HTMLElement {
-  private _delayTimeout: number = 0;
-
-  constructor() {
-    super();
-
-    // Ideally we'd use shadow DOM here, but we're targeting browsers without shadow DOM support.
-    // You can't set attributes/content in a custom element constructor, so I'm waiting a microtask.
-    Promise.resolve().then(() => {
-      this.style.display = 'none';
-      this.innerHTML =
-        '' +
-        `<div class="${styles.spinnerContainer}">` +
-        `<div class="${styles.spinnerLayer}">` +
-        `<div class="${styles.spinnerCircleClipper} ${styles.spinnerLeft}">` +
-        `<div class="${styles.spinnerCircle}"></div>` +
-        '</div>' +
-        `<div class="${styles.spinnerGapPatch}">` +
-        `<div class="${styles.spinnerCircle}"></div>` +
-        '</div>' +
-        `<div class="${styles.spinnerCircleClipper} ${styles.spinnerRight}">` +
-        `<div class="${styles.spinnerCircle}"></div>` +
-        '</div>' +
-        '</div>' +
-        '</div>';
-    });
-  }
-
-  disconnectedCallback() {
-    this.style.display = 'none';
-    clearTimeout(this._delayTimeout);
-  }
-
-  connectedCallback() {
-    const delayStr = getComputedStyle(this).getPropertyValue('--delay').trim();
-    let delayNum = parseFloat(delayStr);
-
-    // If seconds…
-    if (/\ds$/.test(delayStr)) {
-      // Convert to ms.
-      delayNum *= 1000;
-    }
-
-    this._delayTimeout = self.setTimeout(() => {
-      this.style.display = '';
-    }, delayNum);
-  }
-}
-
-customElements.define('loading-spinner', LoadingSpinner);
diff --git a/src_old/components/custom-els/LoadingSpinner/missing-types.d.ts b/src_old/components/custom-els/LoadingSpinner/missing-types.d.ts
deleted file mode 100644
index b9f29dc3..00000000
--- a/src_old/components/custom-els/LoadingSpinner/missing-types.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-interface LoadingSpinner extends JSX.HTMLAttributes {}
-
-declare namespace JSX {
-  interface IntrinsicElements {
-    'loading-spinner': LoadingSpinner;
-  }
-}
diff --git a/src_old/components/custom-els/LoadingSpinner/styles.css b/src_old/components/custom-els/LoadingSpinner/styles.css
deleted file mode 100644
index 45017087..00000000
--- a/src_old/components/custom-els/LoadingSpinner/styles.css
+++ /dev/null
@@ -1,158 +0,0 @@
-@keyframes spinner-left-spin {
-  from {
-    transform: rotate(130deg);
-  }
-  50% {
-    transform: rotate(-5deg);
-  }
-  to {
-    transform: rotate(130deg);
-  }
-}
-
-@keyframes spinner-right-spin {
-  from {
-    transform: rotate(-130deg);
-  }
-  50% {
-    transform: rotate(5deg);
-  }
-  to {
-    transform: rotate(-130deg);
-  }
-}
-
-@keyframes spinner-fade-out {
-  to {
-    opacity: 0;
-  }
-}
-
-@keyframes spinner-container-rotate {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@keyframes spinner-fill-unfill-rotate {
-  12.5% {
-    transform: rotate(135deg);
-  } /* 0.5 * ARCSIZE */
-  25% {
-    transform: rotate(270deg);
-  } /* 1   * ARCSIZE */
-  37.5% {
-    transform: rotate(405deg);
-  } /* 1.5 * ARCSIZE */
-  50% {
-    transform: rotate(540deg);
-  } /* 2   * ARCSIZE */
-  62.5% {
-    transform: rotate(675deg);
-  } /* 2.5 * ARCSIZE */
-  75% {
-    transform: rotate(810deg);
-  } /* 3   * ARCSIZE */
-  87.5% {
-    transform: rotate(945deg);
-  } /* 3.5 * ARCSIZE */
-  to {
-    transform: rotate(1080deg);
-  } /* 4   * ARCSIZE */
-}
-
-loading-spinner {
-  --size: 28px;
-  --color: #4285f4;
-  --stroke-width: 3px;
-  --delay: 300ms;
-
-  pointer-events: none;
-  display: inline-block;
-  position: relative;
-  width: var(--size);
-  height: var(--size);
-  border-color: var(--color);
-}
-
-loading-spinner .spinner-circle {
-  position: absolute;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  box-sizing: border-box;
-  height: 100%;
-  width: 200%;
-  border-width: var(--stroke-width);
-  border-style: solid;
-  border-color: inherit;
-  border-bottom-color: transparent !important;
-  border-radius: 50%;
-}
-
-/*
-  Patch the gap that appear between the two adjacent div.circle-clipper while the
-  spinner is rotating (appears on Chrome 38, Safari 7.1, and IE 11).
-*/
-loading-spinner .spinner-gap-patch {
-  position: absolute;
-  box-sizing: border-box;
-  top: 0;
-  left: 45%;
-  width: 10%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-}
-
-loading-spinner .spinner-gap-patch .spinner-circle {
-  width: 1000%;
-  left: -450%;
-}
-
-loading-spinner .spinner-circle-clipper {
-  display: inline-block;
-  position: relative;
-  width: 50%;
-  height: 100%;
-  overflow: hidden;
-  border-color: inherit;
-}
-
-loading-spinner .spinner-left .spinner-circle {
-  border-right-color: transparent !important;
-  transform: rotate(129deg);
-  animation: spinner-left-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite both;
-}
-
-loading-spinner .spinner-right .spinner-circle {
-  left: -100%;
-  border-left-color: transparent !important;
-  transform: rotate(-129deg);
-  animation: spinner-right-spin 1333ms cubic-bezier(0.4, 0, 0.2, 1) infinite
-    both;
-}
-
-loading-spinner.spinner-fadeout {
-  animation: spinner-fade-out 400ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
-}
-
-loading-spinner .spinner-container {
-  width: 100%;
-  height: 100%;
-  border-color: inherit;
-
-  /* duration: 360 * ARCTIME / (ARCSTARTROT + (360-ARCSIZE)) */
-  animation: spinner-container-rotate 1568ms linear infinite;
-}
-
-loading-spinner .spinner-layer {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  border-color: inherit;
-  /* durations: 4 * ARCTIME */
-  animation: spinner-fill-unfill-rotate 5332ms cubic-bezier(0.4, 0, 0.2, 1)
-    infinite both;
-}
diff --git a/src_old/components/expander/index.tsx b/src_old/components/expander/index.tsx
deleted file mode 100644
index 34ece8fe..00000000
--- a/src_old/components/expander/index.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import { h, Component, ComponentChild, ComponentChildren } from 'preact';
-import * as style from './style.scss';
-import { transitionHeight } from '../../lib/util';
-
-interface Props {
-  children: ComponentChildren;
-}
-interface State {
-  outgoingChildren: ComponentChild[];
-}
-
-export default class Expander extends Component<Props, State> {
-  state: State = {
-    outgoingChildren: [],
-  };
-  private lastElHeight: number = 0;
-
-  componentWillReceiveProps(nextProps: Props) {
-    const children = this.props.children as ComponentChild[];
-    const nextChildren = nextProps.children as ComponentChild[];
-
-    if (!nextChildren[0] && children[0]) {
-      // Cache the current children for the shrink animation.
-      this.setState({ outgoingChildren: children });
-    }
-  }
-
-  componentWillUpdate(nextProps: Props) {
-    const children = this.props.children as ComponentChild[];
-    const nextChildren = nextProps.children as ComponentChild[];
-
-    // Only interested if going from empty to not-empty, or not-empty to empty.
-    if ((children[0] && nextChildren[0]) || (!children[0] && !nextChildren[0]))
-      return;
-    this.lastElHeight = this.base!.getBoundingClientRect().height;
-  }
-
-  async componentDidUpdate(previousProps: Props) {
-    const children = this.props.children as ComponentChild[];
-    const previousChildren = previousProps.children as ComponentChild[];
-
-    // Only interested if going from empty to not-empty, or not-empty to empty.
-    if (
-      (children[0] && previousChildren[0]) ||
-      (!children[0] && !previousChildren[0])
-    )
-      return;
-
-    // What height do we need to transition to?
-    this.base!.style.height = '';
-    this.base!.style.overflow = 'hidden';
-    const newHeight = children[0]
-      ? this.base!.getBoundingClientRect().height
-      : 0;
-
-    await transitionHeight(this.base!, {
-      duration: 300,
-      from: this.lastElHeight,
-      to: newHeight,
-    });
-
-    // Unset the height & overflow, so element changes do the right thing.
-    this.base!.style.height = '';
-    this.base!.style.overflow = '';
-    if (this.state.outgoingChildren[0]) this.setState({ outgoingChildren: [] });
-  }
-
-  render(props: Props, { outgoingChildren }: State) {
-    const children = props.children as ComponentChild[];
-    const childrenExiting = !children[0] && outgoingChildren[0];
-
-    return (
-      <div class={childrenExiting ? style.childrenExiting : ''}>
-        {children[0] ? children : outgoingChildren}
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/expander/style.scss b/src_old/components/expander/style.scss
deleted file mode 100644
index 5eeaeeb4..00000000
--- a/src_old/components/expander/style.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-.children-exiting {
-  & > * {
-    pointer-events: none;
-  }
-}
diff --git a/src_old/components/intro/imgs/demos/demo-artwork.jpg b/src_old/components/intro/imgs/demos/demo-artwork.jpg
deleted file mode 100644
index 8da9183b..00000000
Binary files a/src_old/components/intro/imgs/demos/demo-artwork.jpg and /dev/null differ
diff --git a/src_old/components/intro/imgs/demos/demo-device-screen.png b/src_old/components/intro/imgs/demos/demo-device-screen.png
deleted file mode 100644
index b4c237c5..00000000
Binary files a/src_old/components/intro/imgs/demos/demo-device-screen.png and /dev/null differ
diff --git a/src_old/components/intro/imgs/demos/demo-large-photo.jpg b/src_old/components/intro/imgs/demos/demo-large-photo.jpg
deleted file mode 100644
index 6f77519b..00000000
Binary files a/src_old/components/intro/imgs/demos/demo-large-photo.jpg and /dev/null differ
diff --git a/src_old/components/intro/imgs/demos/icon-demo-artwork.jpg b/src_old/components/intro/imgs/demos/icon-demo-artwork.jpg
deleted file mode 100644
index 79d05f02..00000000
Binary files a/src_old/components/intro/imgs/demos/icon-demo-artwork.jpg and /dev/null differ
diff --git a/src_old/components/intro/imgs/demos/icon-demo-device-screen.jpg b/src_old/components/intro/imgs/demos/icon-demo-device-screen.jpg
deleted file mode 100644
index 5f140f0f..00000000
Binary files a/src_old/components/intro/imgs/demos/icon-demo-device-screen.jpg and /dev/null differ
diff --git a/src_old/components/intro/imgs/demos/icon-demo-large-photo.jpg b/src_old/components/intro/imgs/demos/icon-demo-large-photo.jpg
deleted file mode 100644
index f418b268..00000000
Binary files a/src_old/components/intro/imgs/demos/icon-demo-large-photo.jpg and /dev/null differ
diff --git a/src_old/components/intro/imgs/demos/icon-demo-logo.png b/src_old/components/intro/imgs/demos/icon-demo-logo.png
deleted file mode 100644
index 44ff9216..00000000
Binary files a/src_old/components/intro/imgs/demos/icon-demo-logo.png and /dev/null differ
diff --git a/src_old/components/intro/imgs/logo.svg b/src_old/components/intro/imgs/logo.svg
deleted file mode 100644
index 72a3656e..00000000
--- a/src_old/components/intro/imgs/logo.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 414 414"><style>.i{mix-blend-mode:overlay}.k{opacity:.3}.n{fill:#f7ddc4}.o{fill:#eaceb1}.p{fill:#f8e9db}</style><circle cx="207" cy="207" r="203.5" fill="#40403f" stroke="#4a494a" stroke-width="7"/><path fill="#e17926" d="M69.9 122l-6-7.8 11.8-7.3a41.8 41.8 0 0 0-5.8 15.1zm52.1 91.3l-2.8.2c-1.9.2-5.1-.6-7.3.1l1.4 7.1 9.6-2.9a35.8 35.8 0 0 0-.9-4.5zm-3.5 65.1l-1.8 2.2-.4 5.4 1.8-.5a64.5 64.5 0 0 1 8.4-2.1l.6-11.2a29.5 29.5 0 0 0-8.6 6.2zM315.4 81.3a268.6 268.6 0 0 0-94.3-17.7c-40.6 0-79.5 10-116.8 27.9a66.2 66.2 0 0 1 15.8 3.8c7.8-3.4 15.5-6.3 23.3-8.9a247.1 247.1 0 0 1 77.7-12.8A256.8 256.8 0 0 1 301.6 87c-19.6 42-31.5 80-36.3 115.9a255.8 255.8 0 0 0-1.2 60.4 228.7 228.7 0 0 0 11.4 50.4c-34 19.8-66.7 29.4-99.7 29.4a174.2 174.2 0 0 1-55.5-9.3 33.4 33.4 0 0 1-12.1 2.4l-.9 3.5a185.7 185.7 0 0 0 68.5 13.4c38.9 0 76.2-12.9 112-35.1-28.9-73-14-151.5 27.6-236.7zM97.9 158.4c-1.9-3.9-3.9-7.7-6-11.5-.7 1.2-1.5 4-2.9 5.1l3.7 7.1a43.4 43.4 0 0 1 5.2-.7z"/><path fill="#f78f20" d="M270.2 203.5c5-36.7 17.5-75.9 38.3-119.4a263.4 263.4 0 0 0-87.4-15.5c-35.9 0-72.2 8.2-108.2 24.5a64.2 64.2 0 0 1 29.6 16.6l1.4 1.5a12.6 12.6 0 0 1 3.3 4.7 12.7 12.7 0 0 1-.4 6.7 30.3 30.3 0 0 1-14.6 17.9c-8.2 4.4-17.5 3.5-26.4 1.6-2.5-.5-5.2-1-7.8-.4s-4.6 2.6-6.1 5.1c2.1 3.8 4.1 7.6 6 11.5a114.4 114.4 0 0 1 11.8-.4c10.1-.1 20.2-.8 30.2.8a56.9 56.9 0 0 1 13.5 3.4 14.7 14.7 0 0 1 4.7 2.7h.1a16 16 0 0 1 3.5 5.7c6.5 17.8-6.8 33.5-22.8 39.2a70 70 0 0 1-19.7 3.7 8.5 8.5 0 0 1-2.2-.1l1.1 5.8c3.7-1.1 7.4-2.2 11.2-3.1a126.7 126.7 0 0 1 16.3-3.1c4.2-.4 10.8-1.9 14.2 1.3 1.8 1.6 2.8 4 3.8 6.3a128.1 128.1 0 0 1 4.7 12.2 24.2 24.2 0 0 1 1.2 10.3c-.9 5.8-5.3 10.6-10.3 13.8-9.3 6-20.1 9.3-29.9 14.1a59.6 59.6 0 0 0-7.4 4.3l-.5 9.2a87.2 87.2 0 0 1 36.3-1.5 18 18 0 0 1 6.4 2.2c3.6 2.2 5.4 6.5 5.4 10.7s-1.7 8.2-3.8 11.8a50.1 50.1 0 0 1-25.9 20.5c-5.1 1.8-10.4 2.5-15.4 4.2a100.2 100.2 0 0 1-11 3.4 3.1 3.1 0 0 1-.2.8 182.4 182.4 0 0 0 62.6 11.5c35.1 0 69.7-10.5 105.8-32.2a227.4 227.4 0 0 1-11.4-112.3z"/><path fill="#fdcda0" d="M206.8 168.3c7.4-1.2 14.8-11.1 17-22.9s-5.1-21.6-16.4-20.6-18 12.4-16.3 24.3 8.3 20.3 15.7 19.2z"/><path fill="#e17827" d="M246 233.2c-20.9-13.4-30.4-36.2-46.7-59.1-15.5 28-21.7 56.9-41.2 79.1 32.3 1.6 61-7.7 87.9-20z"/><path fill="#c86228" d="M220.6 272.7c-26.7-24.5-36.9-61.6-76.5-83.3 6 34.1 6.9 63.9-14.8 88.9 33.8 8.1 63.7 3.9 91.3-5.6z"/><path fill="none" stroke="#e17827" stroke-miterlimit="10" stroke-width="4" d="M253.3 244c-40.4 17.8-82.8 29-129.6 21.2 7.6-44.3 1.1-86.8-29.1-125.5 51.5-23.9 109.6-38.6 177.2-27.3C250.5 159.3 241 203 253.3 244z"/><g fill="#c96328" opacity=".5"><path d="M151 116.7a4.1 4.1 0 0 0-.5-1.9l-.4-.5c-1-.8-2.5-.9-3.7-1.3l-1.7-.7-.6-.6a64.6 64.6 0 0 0-38.1-19 27.4 27.4 0 0 0-10.3.3c-14.9 3.8-26.8 23.5-24.8 38.3 1.3 9.5 8.2 15.2 15.4 20.7a4.7 4.7 0 0 0 2 1c2.3.3 3.4-4 4.4-5.4s3-4.4 6.1-5a19.3 19.3 0 0 1 7.9.6c8.8 2.1 18.1 3.1 26.4-1.1a26.6 26.6 0 0 0 6.8-4.7 4.2 4.2 0 0 0 1.4-.9 36.2 36.2 0 0 0 4.2-3.6l2.1-2.1a15.4 15.4 0 0 0 3.1-7.7 27.5 27.5 0 0 0 .3-6.4zM207.2 195.8a16 16 0 0 1 1-2.3c5.7-13.4 15.5-24.4 25.4-34.9s19.5-19.1 32.8-22.4a68 68 0 0 1 27.7.4c5.5 1 11.7 1.4 16.8 4s8.9 8 12 12.7a417 417 0 0 1 24.9 44.2c4.7 9.3 10.1 18.7 10.1 29.3a72 72 0 0 1-3.4 19.6c-5.1 17.1-12.5 33.8-19.9 49.9s-16.3 30.5-30.8 40c-21.2 14-48.1 11.4-71.9 8-4-.6-37.8-3.9-38.1-7.1-.2-1.6 10.7-5.2 12.2-5.9a91 91 0 0 0 36.4-28.2 39.8 39.8 0 0 0 6.8-15.8c1.5-8.4 4.1-16.6 8.8-23.7s11.1-12.1 11.1-21.2c0-3.2-.7-6.3-.4-9.5s1.8-6.5 4.8-7.6 4-.5 5-2.1a4 4 0 0 0 .6-2.2 58.4 58.4 0 0 1 8.9-23 67 67 0 0 1-34.8 26.9c-8.8 3.5-18.5 5.8-27.8 4s-18.2-8.5-20.1-17.8a27 27 0 0 1 1.9-15.3zM165.2 180.8a16.2 16.2 0 0 0 .1-2.2 24.3 24.3 0 0 0-1.3-8.9 5.3 5.3 0 0 0-2.8-3.4 2.8 2.8 0 0 0-1.3-.3 15.1 15.1 0 0 0-4.6-2.7 68.5 68.5 0 0 0-13.5-3.4c-10-1.6-20.1-.8-30.2-.8s-19.3 0-27.7 5-12.9 14.6-14.6 23.4-.2 17.2 4.7 24a29.6 29.6 0 0 0 34.1 9.3 6.1 6.1 0 0 0 2.2-1.3c.8-.9 1-2.2 1.6-3.3 1.5-2.9 6.5-1.4 9.1-1.5a77.1 77.1 0 0 0 19.7-3.7c8.9-3.2 17-9.5 21.3-17.5a3.1 3.1 0 0 0 1.6-1.4 8.5 8.5 0 0 0 .6-1.7 45.2 45.2 0 0 0 .8-6.3 18.3 18.3 0 0 0 .2-3.3zM177.8 234.6a24.9 24.9 0 0 0-3.5-11.6c-1.5-2.3-2.3-4.8-5.1-5.2a19.9 19.9 0 0 0-5 .7 9.7 9.7 0 0 0-1.9-2.6c-3.2-3.2-9.9-2-14.1-1.7a130.1 130.1 0 0 0-16.4 2.6 217.7 217.7 0 0 0-31.7 9.4c-9 3.5-18.8 6.8-25.5 14.1-2.5 2.8-6.8 8-7.6 11.7-2.7 12.1.7 27.1 12.6 33.3 7.1 3.7 15.7 3.2 23.7 2.1 4.2-.6 8.5-1.4 11.7-4.1 1.5-1.4 2.7-3.1 4.1-4.5 3-3.2 7-5.3 11-7.1 10-4.5 20.9-7.5 30.3-13.2 5.1-3.1 9.6-7.7 10.7-13.5a8.5 8.5 0 0 0 .3-2.3l2.7-1.3a8.4 8.4 0 0 0 3.2-2.7 6.4 6.4 0 0 0 .5-4.1zM174.7 294.9c-.8-3.2-2.2-6.9-5.7-7.8a6.4 6.4 0 0 0-2-.3l-1.4-1.1a20.2 20.2 0 0 0-6.4-2.2 85.6 85.6 0 0 0-39.6 2.4c-11.1 3.3-30.9 10.3-32.1 23.8a22.7 22.7 0 0 0 4.1 14.7c3.8 5.9 10.3 11.9 17.7 12.2 5.8.2 11.1-2 16.4-3.8s10.4-2.3 15.4-4.2a51 51 0 0 0 24.6-18.3l.8-.2a13.8 13.8 0 0 0 6.7-3.4 9.2 9.2 0 0 0 1.5-2.5c1.3-3 .8-6.3 0-9.3z"/></g><path d="M143.1 110.7a64.4 64.4 0 0 0-38-19 26 26 0 0 0-10.4.3c-14.8 3.7-26.8 23.5-24.8 38.3 1.4 9.5 8.2 15.2 15.4 20.6a4.9 4.9 0 0 0 2 1.1c2.3.3 3.4-4 4.4-5.5s3.1-4.3 6.2-4.9a18.7 18.7 0 0 1 7.8.6c8.8 2.1 18.1 3.1 26.5-1.1a30.1 30.1 0 0 0 14.9-17.4 11.8 11.8 0 0 0 .5-6.7 12.4 12.4 0 0 0-3.1-4.8z" class="n"/><path d="M132.2 141.1l2.8-1.6c-8.6-1.3-12.2-.1-14-.7s-9.4-.2-12-.9-6.1-.5-8.3-1a51.4 51.4 0 0 0-9.8-1.4c-5.1-.5-9.4-2.5-12.3-.3s-4 2.6-5.6 3.6c3 4.8 7.6 8.5 12.3 12.1a4.9 4.9 0 0 0 2 1.1c2.3.3 3.4-4 4.4-5.5s3.1-4.3 6.2-4.9a18.7 18.7 0 0 1 7.8.6c8.8 2.1 18.1 3.1 26.5-1.1z" class="o"/><path d="M147.6 117a12.4 12.4 0 0 0-3.1-4.8l-1.4-1.5a64.4 64.4 0 0 0-38-19 26 26 0 0 0-10.4.3s-13.2 6.8-12.2 21.9c1.3 19 5.1 18.9 15.4 27.7a18.7 18.7 0 0 1 7.8.6c8.8 2.1 18.1 3.1 26.5-1.1a30.1 30.1 0 0 0 14.9-17.4 11.8 11.8 0 0 0 .5-6.7z" class="k p"/><path fill="#34b9eb" d="M149.5 114.8l-.4-.5c-1-.8-2.5-.9-3.7-1.3l-4.7-1.8-8.2-2.4c-6.5-1.7-14.1-3.4-20.3.2a12.3 12.3 0 0 0-6.2 8.4 10.2 10.2 0 0 0 2.8 8.8c2.5 2.4 6.4 3.7 9.7 4.9a71.8 71.8 0 0 0 19.3 5.3 5.4 5.4 0 0 0 2.2 0 3.8 3.8 0 0 0 1.3-.9 29.7 29.7 0 0 0 5.3-4.7 15.4 15.4 0 0 0 3.1-7.7 27.5 27.5 0 0 0 .3-6.4 3.8 3.8 0 0 0-.5-1.9z"/><path d="M347.5 196.5c-4.8-9.6-9.8-19.1-15.1-28.4l-2.6-4.4-1.1-1.8-2-3.3a8.6 8.6 0 0 1-1-1.6l-3.1-4.7c-3.2-4.7-6.8-10-12.1-12.7s-11.2-3-16.7-4a68 68 0 0 0-27.7-.4c-13.4 3.3-23.7 12.7-32.9 22.4s-19.6 21.5-25.4 34.9l-.9 2.3c-1.9 4.9-3 10.2-1.9 15.3 1.8 9.3 10.7 16.1 20.1 17.9l1.7.2H237a68.1 68.1 0 0 0 15.9-4.3 67.3 67.3 0 0 0 34.8-26.9 86.4 86.4 0 0 0-5.8 11.3 44.8 44.8 0 0 0-3.1 11.7 5.1 5.1 0 0 1-.6 2.2c-1 1.6-3.3 1.5-5 2.1a3.8 3.8 0 0 0-1.5.9 217.1 217.1 0 0 0 15.5 93.5 249.7 249.7 0 0 1-51.1 25.2c22.7 3.1 47.5 4.5 67.4-8.5 14.5-9.6 23.7-24.7 30.8-40.1s14.8-32.8 19.8-49.9a68.3 68.3 0 0 0 3.4-19.6c.1-10.6-5.4-20-10-29.3z" class="n"/><path d="M271.8 234.5a12.1 12.1 0 0 0-.1 1.9v1.6l.1 4.2v1.6l.2 4.3.1 1.5.3 4.5a4.9 4.9 0 0 0 .1 1.2l.5 5.5v.2c.4 3.8.9 7.7 1.6 11.5a5.9 5.9 0 0 0 .2 1.3l.7 4.2a16.2 16.2 0 0 1 .4 1.9l.8 3.7.4 2.1.8 3.4.6 2.2.9 3.4.6 2.2 1 3.3a18.7 18.7 0 0 0 .7 2.2l1.1 3.4a17.2 17.2 0 0 0 .7 2.1 52 52 0 0 0 1.3 3.6l.6 1.8 2.1 5.4-5.9 3.7-.5.3-5.7 3.3-.7.4-5.6 3-.8.5-5.6 2.8-.9.5-5.6 2.7-.8.3-5.7 2.6-.8.3-5.8 2.3-.5.2-6.2 2.3c22.7 3.1 47.5 4.5 67.4-8.6a65.9 65.9 0 0 0 15.9-14.8 139.2 139.2 0 0 0-47.9-86zm47.3-65.8c5.8-10.3 4.7-8.6 1.3-19.6-2.7-3.8-5.8-7.4-9.9-9.5s-11.2-3-16.7-4c-3.4-.6-6.7-1.1-10.1-1.4 12.5 11 15.8 21.9 15.9 31.2s-7.9 24.2-11.9 31.6-20 39.9 3.1 10.4c7.2-9.1 15.7-14.5 20.9-23.5s.9-3.5 7.4-15.2z" class="o"/><path d="M293.6 142c-2.4-2.4-6.5-7.1-10-7.9a51.9 51.9 0 0 0-16.2 1.1c-13.3 3.3-23.7 12.7-32.8 22.4s-19.7 21.5-25.4 34.9a16 16 0 0 0-1 2.3c-1.9 4.9-3 10.2-1.9 15.3 1.8 8.9 9.9 15.4 18.7 17.5 13.9.1 35.1-7.3 51-23.6 22.6-23.1 29.8-50.1 17.6-62z" class="k p"/><path fill="#9f87bf" d="M232.5 178.7a16.6 16.6 0 0 0-4.9 3c-4.1 3-7.7 6.6-11.4 9.9s-9.4 6.5-10.8 11.9a14.6 14.6 0 0 0 .6 8.5c1.5 4.8 4.2 9.4 8.4 12.2 7.7 5.1 16.1.7 22.5-4.4s13.1-8.8 16.4-15.7-1.3-13.2-5-17.9-8.9-9.2-14.9-7.8z"/><path fill="#fff" d="M249.3 187.5l-39.5 32.2a19.7 19.7 0 0 0 4.6 4.5c7.7 5.1 16.1.7 22.5-4.4s13.1-8.8 16.4-15.7c2.6-5.4-.6-11.9-4-16.6z" opacity=".1"/><path d="M158.1 165.1h-.1a16.9 16.9 0 0 0-4.7-2.7 68.5 68.5 0 0 0-13.5-3.4c-10-1.6-20.1-.8-30.2-.8s-19.3 0-27.7 5-12.9 14.5-14.6 23.3-.2 17.2 4.7 24a29.7 29.7 0 0 0 34.1 9.3 6.1 6.1 0 0 0 2.2-1.3c.8-.9 1-2.2 1.6-3.3 1.5-2.9 6.5-1.4 9.1-1.5a77.1 77.1 0 0 0 19.7-3.7c16.1-5.8 29.4-21.5 22.9-39.2a15.2 15.2 0 0 0-3.5-5.7z" class="n"/><path d="M115 226.6c2.6-.8-.5-7.5-2.8-11.9a1.4 1.4 0 0 0-1.3-.6c2.1-1.3 6-.3 8.1-.4a77.1 77.1 0 0 0 19.7-3.7 41.7 41.7 0 0 0 18.2-12.8c-14.4-1.6-20.9 12-42.4 9.7-9.4-1-17.5 1.3-25.7 1.5s-14.9-3.8-17.5 1l.7 1.1c4.3 6 11.2 9.7 18.5 10.9h.3a25.6 25.6 0 0 0 4.7.4c5.9.9 11.6 3.2 17.4 4.6a3.8 3.8 0 0 0 2.1.2z" class="o"/><path d="M158.1 165.1h-.1a16.9 16.9 0 0 0-4.7-2.7 68.5 68.5 0 0 0-13.5-3.4c-10-1.6-20.1-.8-30.2-.8s-24 4.9-25.4 21.5c-2.5 30.8 44.5 31.4 56.8 28.9a27.7 27.7 0 0 0 20.6-37.7 15.2 15.2 0 0 0-3.5-5.8z" class="k p"/><path fill="#5d509e" d="M119 180.8a12.7 12.7 0 0 1 3.1-8.4c3-3.4 6.8-4.1 11.1-4.8l6.5-.9c5.9-.7 11.9-1.5 18-1.7a7.2 7.2 0 0 1 2.5.3 5.3 5.3 0 0 1 2.8 3.4 24.3 24.3 0 0 1 1.3 8.9 58.9 58.9 0 0 1-1.1 11.8 8.5 8.5 0 0 1-.6 1.7c-1.1 1.9-3.8 2.1-5.7 2.4a115.4 115.4 0 0 1-23.5.5 21.5 21.5 0 0 1-6.7-1.3 12.4 12.4 0 0 1-7.7-11.9z"/><g fill="#ddc1a8"><path d="M89 149c-1.6 0-1.6-.3-4.2-.7s-1.7-.2-2.8-.1h-.2l3.5 2.7 1.1.8 1.2.3a2.5 2.5 0 0 0 1.5-.8l1-1.4.3-.7zM90.2 221.4h-.1c7.9-.3 15.3 3.2 22.8 5a3.8 3.8 0 0 0 2.1.2c2.6-.8-.5-7.5-2.8-11.9a1.3 1.3 0 0 0-2.2-.1c-3.2 4.4-17.7 6.6-19.8 6.8zM272.5 255.8l-.1-.8a1.9 1.9 0 0 0 .1.8zm-.7-12.8l-.1-5.7.1 5.7zm1.6-18.9c1.8-.6 4.1-.5 5.1-2a6 6 0 0 0 .6-2.2 44.5 44.5 0 0 1 3.1-11.8 85.5 85.5 0 0 1 5.7-11.3 52.7 52.7 0 0 1-15.1 16.4l-.9 11.8zm-1.4 25.1l.4 5.5-.4-5.5zm-.2-6.2l.2 5.8-.2-5.8zm.1-17.8c-.2 3.9-.2 7.8-.2 11.7 0-3.9 0-7.8.2-11.7z"/></g><path d="M66 250.9c.9-3.7 5.1-8.9 7.6-11.6 6.7-7.3 16.5-10.6 25.6-14.1a216.5 216.5 0 0 1 31.6-9.4 114.2 114.2 0 0 1 16.4-2.6c4.2-.3 10.9-1.6 14.2 1.7a18.3 18.3 0 0 1 3.6 6.4 106.8 106.8 0 0 1 4.3 12.4 24 24 0 0 1 .9 10.3c-1.1 5.8-5.7 10.4-10.7 13.4-9.5 5.7-20.4 8.7-30.4 13.3-4 1.8-7.9 3.9-10.9 7-1.5 1.5-2.6 3.2-4.2 4.5a21.7 21.7 0 0 1-11.6 4.1c-8 1.2-16.6 1.7-23.8-2.1-11.8-6.2-15.3-21.1-12.6-33.3z" class="n"/><path d="M111.7 282.9c3.2-1.4 5.9-5.2 8-7.8a1.6 1.6 0 0 1 .8-.6.8.8 0 0 1 .8.3c2.4 1.5-3.6 6.3-3.1 9.2a6.3 6.3 0 0 1-.2 2.7c-.4.9-1.9.5-2.8.6-7 1.1-4-2.5-10.8-1.3 2.9-1.4 4.7-1.9 7.3-3.1zm46.9-31.9c-3.1.4-41.4 15.3-46.8 17.1s-14.2 5.4-23.1 5.4-11 .6-13.4 3.6l-2.5 2.8a20.9 20.9 0 0 0 5.8 4.3c7.2 3.8 15.8 3.3 23.8 2.1 4.1-.5 8.4-1.4 11.6-4.1 1.6-1.3 2.7-3 4.2-4.5 3-3.1 6.9-5.2 10.9-7 10-4.6 20.9-7.6 30.4-13.3a24.9 24.9 0 0 0 7.8-7z" class="o"/><path d="M169.3 233.7a106.8 106.8 0 0 0-4.3-12.4 18.3 18.3 0 0 0-3.6-6.4c-3.3-3.3-10-2-14.2-1.7a114.2 114.2 0 0 0-16.4 2.6 208.6 208.6 0 0 0-24.6 6.9c-15.7 10-20.6 21.9-17 32.2C93.7 268 114 271 136 265.8c8-3.2 16-3.9 23.5-8.4 5-3 9.6-7.6 10.7-13.4a24 24 0 0 0-.9-10.3z" class="k p"/><path fill="#41439a" d="M132.9 227.8c2.9-3.7 8.6-5.6 12.9-6.8s10.2-2 15.3-3.1c1.8-.4 5.3-1.4 7.2-1.1s3.5 2.9 5.1 5.2 3.1 7.6 3.5 11.6a7.4 7.4 0 0 1-.6 4.1 8.4 8.4 0 0 1-3.2 2.7 58.2 58.2 0 0 1-8.1 3.5 118.4 118.4 0 0 1-13.3 3.6c-5.2 1.2-11.5 2.9-16.1-.8a12.5 12.5 0 0 1-4.1-7c-.8-3.4-1-8.1.9-11.2z"/><path fill="#fff" d="M176 228.1l-44.3 12.5a12 12 0 0 0 3.9 6.1c4.6 3.7 10.9 2 16.1.8a118.4 118.4 0 0 0 13.3-3.6 58.2 58.2 0 0 0 8.1-3.5 8.4 8.4 0 0 0 3.2-2.7 7.4 7.4 0 0 0 .6-4.1 52.5 52.5 0 0 0-.9-5.5z" class="i" opacity=".4"/><path d="M164.6 284.7a20.2 20.2 0 0 0-6.4-2.2 85.6 85.6 0 0 0-39.6 2.4c-11.1 3.3-30.9 10.3-32.1 23.8a22.7 22.7 0 0 0 4.1 14.7c3.8 5.9 10.3 11.9 17.7 12.2 5.8.2 11.1-2 16.4-3.8s10.4-2.3 15.4-4.2a50.2 50.2 0 0 0 26-20.4 22.9 22.9 0 0 0 3.8-11.8c.1-4.1-1.8-8.5-5.3-10.7z" class="n"/><path d="M144.4 319.9c-9 3-16.7 3.9-24.8 6.2s-16.5-6.4-21.4 5.6a18.4 18.4 0 0 0 10.1 3.9c5.8.2 11.1-2 16.4-3.8s10.4-2.3 15.4-4.2c9-3.3 17.3-8.7 23.1-16.3-7.3 3.5-14.3 7.1-18.8 8.6z" class="o"/><path d="M164.6 284.7a20.2 20.2 0 0 0-6.4-2.2 86.7 86.7 0 0 0-38.9 2.1c-8.6 7.6-12.9 16.4-10.6 24.2 3.4 11.6 16 23 41.2 14.1a46.8 46.8 0 0 0 16.2-15.7 22.9 22.9 0 0 0 3.8-11.8c.1-4.1-1.8-8.5-5.3-10.7z" class="k p"/><path fill="#005c9f" d="M132.6 303.9c1.8 4.7 6.9 7.4 11.6 8.1a31.6 31.6 0 0 0 9.7-.3c3.9-.7 7.8-1.6 11.6-2.6a13.4 13.4 0 0 0 6.7-3.4 9.2 9.2 0 0 0 1.5-2.5c1.3-3 .8-6.3 0-9.3s-2.2-6.9-5.7-7.8a12.8 12.8 0 0 0-5.5 0c-5.3.8-10.4 2.7-15.7 3.7-3.2.7-6.5 1.3-9.3 3s-5.3 4.5-5.5 7.7a9.7 9.7 0 0 0 .6 3.4z"/><g fill="#fff" class="i k"><path d="M106.3 116.2l-.3 1.2a10.2 10.2 0 0 0 2.8 8.8c2.5 2.4 6.4 3.7 9.7 4.9a71.8 71.8 0 0 0 19.3 5.3 5.4 5.4 0 0 0 2.2 0 3.8 3.8 0 0 0 1.3-.9 29.7 29.7 0 0 0 5.3-4.7 14.4 14.4 0 0 0 1.9-3.1zM119.1 182.4a12.4 12.4 0 0 0 7.6 10.3 21.5 21.5 0 0 0 6.7 1.3 115.4 115.4 0 0 0 23.5-.5c1.9-.3 4.6-.5 5.7-2.4a8.5 8.5 0 0 0 .6-1.7 61 61 0 0 0 1.1-11.3zM132.9 304.7c2.1 4.2 6.8 6.7 11.3 7.3a31.6 31.6 0 0 0 9.7-.3c3.9-.7 7.8-1.6 11.6-2.6a13.4 13.4 0 0 0 6.7-3.4 9.2 9.2 0 0 0 1.5-2.5 12.8 12.8 0 0 0 .3-8z"/></g></svg>
\ No newline at end of file
diff --git a/src_old/components/intro/index.tsx b/src_old/components/intro/index.tsx
deleted file mode 100644
index 06f6a566..00000000
--- a/src_old/components/intro/index.tsx
+++ /dev/null
@@ -1,260 +0,0 @@
-import { h, Component } from 'preact';
-
-import { bind, linkRef, Fileish } from '../../lib/initial-util';
-import '../custom-els/LoadingSpinner';
-
-import logo from './imgs/logo.svg';
-import largePhoto from './imgs/demos/demo-large-photo.jpg';
-import artwork from './imgs/demos/demo-artwork.jpg';
-import deviceScreen from './imgs/demos/demo-device-screen.png';
-import largePhotoIcon from './imgs/demos/icon-demo-large-photo.jpg';
-import artworkIcon from './imgs/demos/icon-demo-artwork.jpg';
-import deviceScreenIcon from './imgs/demos/icon-demo-device-screen.jpg';
-import logoIcon from './imgs/demos/icon-demo-logo.png';
-import * as style from './style.scss';
-import SnackBarElement from '../../lib/SnackBar';
-
-const demos = [
-  {
-    description: 'Large photo (2.8mb)',
-    filename: 'photo.jpg',
-    url: largePhoto,
-    iconUrl: largePhotoIcon,
-  },
-  {
-    description: 'Artwork (2.9mb)',
-    filename: 'art.jpg',
-    url: artwork,
-    iconUrl: artworkIcon,
-  },
-  {
-    description: 'Device screen (1.6mb)',
-    filename: 'pixel3.png',
-    url: deviceScreen,
-    iconUrl: deviceScreenIcon,
-  },
-  {
-    description: 'SVG icon (13k)',
-    filename: 'squoosh.svg',
-    url: logo,
-    iconUrl: logoIcon,
-  },
-];
-
-const installButtonSource = 'introInstallButton-Purple';
-
-interface Props {
-  onFile: (file: File | Fileish) => void;
-  showSnack: SnackBarElement['showSnackbar'];
-}
-interface State {
-  fetchingDemoIndex?: number;
-  beforeInstallEvent?: BeforeInstallPromptEvent;
-}
-
-export default class Intro extends Component<Props, State> {
-  state: State = {};
-  private fileInput?: HTMLInputElement;
-  private installingViaButton = false;
-
-  constructor() {
-    super();
-
-    // Listen for beforeinstallprompt events, indicating Squoosh is installable.
-    window.addEventListener(
-      'beforeinstallprompt',
-      this.onBeforeInstallPromptEvent,
-    );
-
-    // Listen for the appinstalled event, indicating Squoosh has been installed.
-    window.addEventListener('appinstalled', this.onAppInstalled);
-  }
-
-  @bind
-  private resetFileInput() {
-    this.fileInput!.value = '';
-  }
-
-  @bind
-  private onFileChange(event: Event): void {
-    const fileInput = event.target as HTMLInputElement;
-    const file = fileInput.files && fileInput.files[0];
-    if (!file) return;
-    this.resetFileInput();
-    this.props.onFile(file);
-  }
-
-  @bind
-  private onButtonClick() {
-    this.fileInput!.click();
-  }
-
-  @bind
-  private async onDemoClick(index: number, event: Event) {
-    try {
-      this.setState({ fetchingDemoIndex: index });
-      const demo = demos[index];
-      const blob = await fetch(demo.url).then((r) => r.blob());
-
-      // Firefox doesn't like content types like 'image/png; charset=UTF-8', which Webpack's dev
-      // server returns. https://bugzilla.mozilla.org/show_bug.cgi?id=1497925.
-      const type = /[^;]*/.exec(blob.type)![0];
-      const file = new Fileish([blob], demo.filename, { type });
-      this.props.onFile(file);
-    } catch (err) {
-      this.setState({ fetchingDemoIndex: undefined });
-      this.props.showSnack("Couldn't fetch demo image");
-    }
-  }
-
-  @bind
-  private onBeforeInstallPromptEvent(event: BeforeInstallPromptEvent) {
-    // Don't show the mini-infobar on mobile
-    event.preventDefault();
-
-    // Save the beforeinstallprompt event so it can be called later.
-    this.setState({ beforeInstallEvent: event });
-
-    // Log the event.
-    const gaEventInfo = {
-      eventCategory: 'pwa-install',
-      eventAction: 'promo-shown',
-      nonInteraction: true,
-    };
-    ga('send', 'event', gaEventInfo);
-  }
-
-  @bind
-  private async onInstallClick(event: Event) {
-    // Get the deferred beforeinstallprompt event
-    const beforeInstallEvent = this.state.beforeInstallEvent;
-    // If there's no deferred prompt, bail.
-    if (!beforeInstallEvent) return;
-
-    this.installingViaButton = true;
-
-    // Show the browser install prompt
-    beforeInstallEvent.prompt();
-
-    // Wait for the user to accept or dismiss the install prompt
-    const { outcome } = await beforeInstallEvent.userChoice;
-    // Send the analytics data
-    const gaEventInfo = {
-      eventCategory: 'pwa-install',
-      eventAction: 'promo-clicked',
-      eventLabel: installButtonSource,
-      eventValue: outcome === 'accepted' ? 1 : 0,
-    };
-    ga('send', 'event', gaEventInfo);
-
-    // If the prompt was dismissed, we aren't going to install via the button.
-    if (outcome === 'dismissed') {
-      this.installingViaButton = false;
-    }
-  }
-
-  @bind
-  private onAppInstalled() {
-    // We don't need the install button, if it's shown
-    this.setState({ beforeInstallEvent: undefined });
-
-    // Don't log analytics if page is not visible
-    if (document.hidden) {
-      return;
-    }
-
-    // Try to get the install, if it's not set, use 'browser'
-    const source = this.installingViaButton ? installButtonSource : 'browser';
-    ga('send', 'event', 'pwa-install', 'installed', source);
-
-    // Clear the install method property
-    this.installingViaButton = false;
-  }
-
-  render({}: Props, { fetchingDemoIndex, beforeInstallEvent }: State) {
-    return (
-      <div class={style.intro}>
-        <div>
-          <div class={style.logoSizer}>
-            <div class={style.logoContainer}>
-              <img
-                src={logo}
-                class={style.logo}
-                alt="Squoosh"
-                decoding="async"
-              />
-            </div>
-          </div>
-          <p class={style.openImageGuide}>
-            Drag &amp; drop or{' '}
-            <button class={style.selectButton} onClick={this.onButtonClick}>
-              select an image
-            </button>
-            <input
-              class={style.hide}
-              ref={linkRef(this, 'fileInput')}
-              type="file"
-              onChange={this.onFileChange}
-            />
-          </p>
-          <p>Or try one of these:</p>
-          <ul class={style.demos}>
-            {demos.map((demo, i) => (
-              <li key={demo.url} class={style.demoItem}>
-                <button
-                  class={style.demoButton}
-                  onClick={this.onDemoClick.bind(this, i)}
-                >
-                  <div class={style.demo}>
-                    <div class={style.demoImgContainer}>
-                      <div class={style.demoImgAspect}>
-                        <img
-                          class={style.demoIcon}
-                          src={demo.iconUrl}
-                          alt=""
-                          decoding="async"
-                        />
-                        {fetchingDemoIndex === i && (
-                          <div class={style.demoLoading}>
-                            <loading-spinner class={style.demoLoadingSpinner} />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                    <div class={style.demoDescription}>{demo.description}</div>
-                  </div>
-                </button>
-              </li>
-            ))}
-          </ul>
-        </div>
-        {beforeInstallEvent && (
-          <button
-            type="button"
-            class={style.installButton}
-            onClick={this.onInstallClick}
-          >
-            Install
-          </button>
-        )}
-        <ul class={style.relatedLinks}>
-          <li>
-            <a href="https://github.com/GoogleChromeLabs/squoosh/">
-              View the code
-            </a>
-          </li>
-          <li>
-            <a href="https://github.com/GoogleChromeLabs/squoosh/issues">
-              Report a bug
-            </a>
-          </li>
-          <li>
-            <a href="https://github.com/GoogleChromeLabs/squoosh/blob/dev/README.md#privacy">
-              Privacy
-            </a>
-          </li>
-        </ul>
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/intro/missing-types.d.ts b/src_old/components/intro/missing-types.d.ts
deleted file mode 100644
index a35205c5..00000000
--- a/src_old/components/intro/missing-types.d.ts
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * The BeforeInstallPromptEvent is fired at the Window.onbeforeinstallprompt handler
- * before a user is prompted to "install" a web site to a home screen on mobile.
- */
-interface BeforeInstallPromptEvent extends Event {
-  /**
-   * Returns an array of DOMString items containing the platforms on which the event was dispatched.
-   * This is provided for user agents that want to present a choice of versions to the user such as,
-   * for example, "web" or "play" which would allow the user to chose between a web version or
-   * an Android version.
-   */
-  readonly platforms: Array<string>;
-
-  /**
-   * Returns a Promise that resolves to a DOMString containing either "accepted" or "dismissed".
-   */
-  readonly userChoice: Promise<{
-    outcome: 'accepted' | 'dismissed';
-    platform: string;
-  }>;
-
-  /**
-   * Allows a developer to show the install prompt at a time of their own choosing.
-   * This method returns a Promise.
-   */
-  prompt(): Promise<void>;
-}
-
-interface WindowEventMap {
-  beforeinstallprompt: BeforeInstallPromptEvent;
-}
diff --git a/src_old/components/intro/style.scss b/src_old/components/intro/style.scss
deleted file mode 100644
index 21f3946f..00000000
--- a/src_old/components/intro/style.scss
+++ /dev/null
@@ -1,223 +0,0 @@
-@font-face {
-  font-family: 'intro-text';
-  font-style: normal;
-  font-weight: 300;
-  font-display: block;
-  // This only contains the chars for "Drag & drop or"
-  src: url('data:font/woff2;base64,d09GMgABAAAAAAXcAA4AAAAACowAAAWJAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbg2gcMAZgAGwRCAqIQIcnCxYAATYCJAMoBCAFgwAHIBvqCFEU84FMI2Xh/P3g+Tfn532yQ/IgYz4BrJyhtkkZwFBYAZ49sI63e5v/NnqzIfbADyE0qxOqK8ESLoNNdULHihxbW0W86/qHEk4wT/eHShPRZJYYqUGkQdLSWCeSemZBzwpKyX/LRoAhMEQhqCFBw5RHNCc4hbVn35FsxtTXVHYyo7miu5VN2AW1fwzVauRgXnIGo2IWsYdViUoLu6mms5VFAn+SeQ4eBazfj7QodrMt4oyQHaGADEPRpTbDqJaoTENNK6DpOralUszf6gI/QsAhWZSMKVOirikSJxZRLBVD0S4mB0kTBRwopjZ/mt/2/25+bcSipgiHRmwiFI1g+XhwlshyEAsbJzGiGH+U5whHNgiXooplafI1rMFbmIqjGAPhmcSkVFxeu9hw87aXsGyL+dPE05qUpK2WyaVQcZVW+aDmw3aalLJKNmQORcpZYtBIuTrncN4xXoVZY617TBSsx2T1DHgGU6u4etE04wha1GEwjVkEaDttOrl1FCOwUMxgHnuooJo62ukcWEuc1/aT+dZ8b142t5tbzc3mGnP1EJqVTEGMYTjG14YxtGEEG+0E2axhe6Oa1E8UrDHDFjhTRywYNWrU9JHTlw7RmaslkrrGcTJ+znW4EzzP0zovE4Z5d0hqVhBobftBIKkwL09SOv3hhCuv1Dp9taTeCJ2Mj3KDT8iDng5DkWzPw/UdP8idNDkMnUyOwEauwnYLQeLC7GskNe72QKe97AmuA42E5FjfyYTM+HTdQ+Xqb+q4JvptyKZN1w47qMMwL58fyKZM1U6NXgWlOFdxx7DpXHDTz4UB89WMK3HH3uY7mavFopGF+u36lGlqZsL4ugmbqvZxveycMO+a4uyN3o7GT2qdHpfr6W++kNTn1crdx7Z+FW7PfffTmfnXV/2ivsh5UX93zdlzct6QlSuHSumG3oGNNT9/m9yXnDcnKfsmDx8xUaoKi+uvGs99H2ieUJUg8bTnVwQcDd/SPKwYWDUv+QkpT6MulMrcPTXNWYnIowxvoiwnX+opTMkvzOMGgpNpqnK32CNVwCnassw0BwQwTa0rLS3m1DfIoxx5PIE8SvEmSk3pHSWZiRVKjOOQSylJSHGXkhT/u/tg/Vm9UZQcS59TGb1qjcuuT0925iaaU1vaWpZJM4ukqWWlrdWSIcVNlOImvnrzLn53UpnSLzbGT5lUlpTiKiPJFEmyqywFLtOhcaYJkWkaGe/oGBlnmiIiIiKYpqHxLmdaWg5JpxxHSXpajsuVlkPSvb1JelqOC0pubbAn2A2UsDdYmTmjvbVlgTRhVBSSxpbF1nZD+jvkUR4rcJeSFBp2d19SUsVW5DjkUkoSoITHJ7iJEpZnZaL4OiF7g92DN1mz8b1RiM9RDk9ps9pcanamlnj2ftqbJpHJ0wpkRn2+RJ6qsGflpYrPnxG6A4r9zqGY3qCcqDuhsWGQhoXpQ0663cWFM4qNR0Jxj1R0UBT36pahMneH4NYV27jElOeyAAAACACAABy4uvGyOsj21Y9h3gIA3PuxYAYAuC/7vftf7L+PXunMAQDwBQIAAAIA5vR/HwCvOQ//TzLL7cPIHUC0zMI5v7+tHiVfzWOeSrJKZbFabWGNSnJE+jmsnmTjTZm6kBi9r0aLgm8qNk6t67ATuPlEitG+g+E7in1GMYxCxmIF9YzNJK7lRoSPc6PCD+8fxhp+YjdttDNAJw3UUU83M1jFClaylkpkU08NVZqkh0oaaBLPnaCTNhqpoaok2UkPZqy/JyfpKnVLkhrq6KGZCjpZxTJWqN9uJofD5HGMzSXHLaVbOmuTSnOp6cTQgJlaB6oF7RIITul8N+1sYjnL6aJqqoZ2inaxDIY2s2zwlXUs5zj7OPJmAPao+ZhVHy0A') format('woff2');
-}
-
-@font-face {
-  font-family: 'intro-text';
-  font-style: normal;
-  font-weight: 500;
-  font-display: block;
-  // Only contains the chars for "select an image"
-  src: url('data:font/woff2;base64,d09GMgABAAAAAAXMAA4AAAAACwQAAAV5AAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAGhYbg1IcMAZgAGwRCAqJUId/CxoAATYCJAMwBCAFgnAHIBskCcjEh6dNff8Ou/9Tj9VZGnUhJeqFzWGiVVOkxkTthr9f6kWkRdsBbkIj3YuLaloFZWr7aBg22z7IOoWqBWCW5cZU3GBrh0n+dAcBYAUlzYHAzWTYchqKXEyAT0zOLIS1qqm+B8q2ur4OhEMy0PHHUH8KklaSr8T0mp/EU7kRvXlI1E09HXA1qLN8Djxa0AsSDOg3cJARb9mtQJoSK3gvEn372/gcAigg/gOnbsT/MYv491GTReW4rJC5LA+h5FFclF6QQgoZ5Kx7GbsuGeytUgFClkOomY2Gdake3m9HegkHieAx/a0hBTALsy4jvpxBcnFXUnjC+2ZS5zHnDeEaJVwi+ZWqzOm4Uvgy4k6kGv4kFDVkfjk1gkVRRkk2zlo42PBbRJmG30cClJQjak7BnfQqHza4ITKftQZ/ZMUaEiyy1+mYCh4clKhDA5rQglZ0oG9jw+qiNvT+SfxIXCeuFdeIq8VV4gpxyRaGOl0JiChiCocfc7e93DwZIPvWgPiZJLcJugxyjW7UQyl4TJk6dWqYU7Cn0WQiWnNJCdGeprqjW63fpVS3mKy4YGZ6I3ya4nbIVgM1mwkpNEBzixlNxfPmH7owvdE4973OM9quvk11dwvnzDUy/Zn5S5Ywpn/PeqXBQI2m4lna05CRtsI6+GIENjS9K4jWRHUGYA2ozdZm2Smmf0DI3aqpeNbsJfxe7YdFmcZAn5gXLCFa2/Umqiu017APFhMZ0rfQp4sJX0ZrJ+n9UtAljr5VYWb6oj1MrpvX3qe6u8WRJg0bj7aPkDOa7m+E0Oa9Y8eY/gbRbr+efH7hcO49bMd28fbDVHcUmm3XkozQGKjeBHSJ4TQnI879LIFmF2v/BJuEQlffJPfE9oKayS/PsPE44fvM4MsBESxbuEEV39d5pw6oW4vD6S1WQC3UpSbHNbK0Jikl0bphSs+0CGW8Ew4Kzw7zarmcVz873JHTFhKYay18R8vY0ozPiHPAGyROAqlW5fLj5+HbWBn9TpgekKsOy8N+4dlFfL9i/Nk3+gY1bwzZUAvLVNiFpvqHRenetSoVrgn2obGtPsltEVxEeHJAQFhyBIcHT9rDvTJm06e0TLgase2gd2RffGJNg0o1zrdRyi9s1bYE5bi85cK+o/nUwvBR5+jweEBaSMoCub29fEFISmib9Dn5yl5kVFpoGrPQSmZhafQ7WimttNCH7Cktohb6kFpoEfIsdDF7SgvZTbaY3mKFyLXQh+wpzWE3mUNQQkWnR+lgiW9Afkunej49Nz3sYlI8XFTRdkNhUR5d6h4oOpJc8OjcItMXVqoHW2fSW6ycWuiM8NDYoICouLAZ9BYrwwmhycvKlt4Q8hUlCV5nZ7vOm2ut2rizcFpuWpSrT3K1Z3xinbuHnXBTyGAljV/XzHZaNGu6y7vLDziMpIyUdOBBRXXlxznUQiOoheZsZk9njG8er1mNmz2eOCQ3x9BbLP+Zxt+VrbEz9aWxmimRvyl4/sumyoM/nw+LNzV4/uP0/9T/P5f08cvhl38USAS/xTYs2fL/VNFF0vd+SVsRB/khPwW4SCi5SHhx8fDgVPAiAqIJRQL/EuK5bsRzNnAiezD1i7u2VyHHAKRU+E2YUaA5DUsE2ZfbApAmsJcxjBwmQ2Xk4Y2BqZJ+oxSzsNEogz1O3/xkBMKEBHSiC8PoQStaoEIflPCHL/wQBCUKoUITlMhHP+olt5ojykUPOrEQTWgY+f449KMPKnSiB72jGrLQhEZO24925LtbkG5DndTkD2/4um+NQBEyUIJsRBxX24tcDGmbWtGJjq05jhzTaMgCcR+6EA4f+KAXDay5u6RsL7xJsm3w3mzvFvggB8nI/AYBdVnxNvx/2wA=') format('woff2');
-}
-
-@keyframes fade-in {
-  from { opacity: 0 }
-}
-
-.intro {
-  display: grid;
-  grid-template-rows: 1fr min-content;
-  align-items: center;
-  background: rgba(255, 255, 255, 0.25);
-  text-align: center;
-  font-size: 2rem;
-  -webkit-overflow-scrolling: touch;
-  overflow: auto;
-  padding: 20px 0 0;
-  height: 100%;
-  box-sizing: border-box;
-  overscroll-behavior: contain;
-  position: relative;
-}
-
-.logo-container {
-  position: relative;
-  padding-top: 100%;
-}
-
-.logo-sizer {
-  width: 90%;
-  max-width: 52vh;
-  margin: 0 auto;
-}
-
-.logo {
-  composes: abs-fill from '../../lib/util.scss';
-  pointer-events: none;
-}
-
-.open-image-guide {
-  font: 300 11vw intro-text, sans-serif;
-  margin-bottom: 0;
-
-  @media (min-width: 460px) {
-    font-size: 50.6px;
-    padding: 0 40px;
-  }
-}
-
-.select-button {
-  composes: unbutton from '../../lib/util.scss';
-  font-weight: 500;
-  color: #5D509E;
-
-  &:hover,
-  &:focus {
-    text-decoration: underline;
-  }
-}
-
-.hide {
-  display: none;
-}
-
-.demos {
-  display: block;
-  padding: 0;
-  border-top: 1px solid #e8e8e8;
-  margin: 0 auto;
-
-  @media (min-width: 400px) {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-  }
-
-  @media (min-width: 580px) {
-    border-top: none;
-    width: 523px;
-  }
-
-  @media (min-width: 900px) {
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    width: 773px;
-  }
-}
-
-.demo-item {
-  background: #fff;
-  display: flex;
-  border-bottom: 1px solid #e8e8e8;
-
-  @media (min-width: 580px) {
-    border: 1px solid #e8e8e8;
-    border-radius: 4px;
-    margin: 3px;
-  }
-}
-
-.demo-button {
-  composes: unbutton from '../../lib/util.scss';
-  flex: 1;
-
-  &:hover,
-  &:focus {
-    background: #f5f5f5;
-  }
-}
-
-.demo {
-  display: flex;
-  align-items: center;
-  padding: 7px;
-  font-size: 1.3rem;
-}
-
-.demo-img-container {
-  overflow: hidden;
-  display: block;
-  width: 47px;
-  background: #ccc;
-  border-radius: 3px;
-  flex: 0 0 auto;
-}
-
-.demo-img-aspect {
-  position: relative;
-  padding-top: 100%;
-
-}
-
-.demo-icon {
-  composes: abs-fill from '../../lib/util.scss';
-  pointer-events: none;
-}
-
-.demo-description {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  text-align: left;
-  flex: 1;
-  padding: 0 10px;
-}
-
-.demo-loading {
-  composes: abs-fill from '../../lib/util.scss';
-  background: rgba(0, 0, 0, 0.6);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  animation: fade-in 300ms ease-in-out;
-}
-
-.demo-loading-spinner {
-  --color: #fff;
-}
-
-.install-button {
-  composes: unbutton from '../../lib/util.scss';
-
-  &:hover,
-  &:focus {
-    background: #504488;
-  }
-
-  background: #5D509E;
-  border: 1px solid #e8e8e8;
-  color: #fff;
-  padding: 14px;
-  font-size: 1.3rem;
-
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
-
-  animation: fade-in .3s ease-in-out;
-}
-
-@keyframes fade-in {
-	from { opacity: 0; }
-}
-
-.related-links {
-  display: flex;
-  padding: 0;
-  justify-content: center;
-  font-size: 1.3rem;
-
-  & li {
-    display: block;
-    border-left: 1px solid #000;
-    padding: 0 0.6em;
-
-    &:first-child {
-      border-left: none;
-    }
-  }
-
-  & a:link {
-    color: #5D509E;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
-}
diff --git a/src_old/components/range/index.tsx b/src_old/components/range/index.tsx
deleted file mode 100644
index 16f0573c..00000000
--- a/src_old/components/range/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import { h, Component } from 'preact';
-import * as style from './style.scss';
-import RangeInputElement from '../../custom-els/RangeInput';
-import '../../custom-els/RangeInput';
-import { linkRef, bind } from '../../lib/initial-util';
-
-interface Props extends JSX.HTMLAttributes {}
-interface State {}
-
-export default class Range extends Component<Props, State> {
-  rangeWc?: RangeInputElement;
-
-  @bind
-  private onTextInput(event: Event) {
-    const input = event.target as HTMLInputElement;
-    const value = input.value.trim();
-    if (!value) return;
-    this.rangeWc!.value = input.value;
-    const { onInput } = this.props;
-    if (onInput) onInput(event);
-  }
-
-  render(props: Props) {
-    const { children, ...otherProps } = props;
-
-    const { value, min, max, step } = props;
-
-    return (
-      <label class={style.range}>
-        <span class={style.labelText}>{children}</span>
-        {/* On interaction, Safari gives focus to the first element in the label, so the
-        <range-input> is deliberately first. */}
-        <div class={style.rangeWcContainer}>
-          <range-input
-            ref={linkRef(this, 'rangeWc')}
-            class={style.rangeWc}
-            {...otherProps}
-          />
-        </div>
-        <input
-          type="number"
-          class={style.textInput}
-          value={value}
-          min={min}
-          max={max}
-          step={step}
-          onInput={this.onTextInput}
-        />
-      </label>
-    );
-  }
-}
diff --git a/src_old/components/range/style.scss b/src_old/components/range/style.scss
deleted file mode 100644
index ffe0d54e..00000000
--- a/src_old/components/range/style.scss
+++ /dev/null
@@ -1,55 +0,0 @@
-.range {
-  position: relative;
-  z-index: 0;
-  display: grid;
-  grid-template-columns: 1fr auto;
-}
-
-.label-text {
-  color: #fff; /* TEMP */
-}
-
-.range-wc-container {
-  position: relative;
-  z-index: 1;
-  grid-row: 2 / 3;
-  grid-column: 1 / 3;
-}
-
-.range-wc {
-  width: 100%;
-}
-
-.text-input {
-  grid-row: 1 / 2;
-  grid-column: 2 / 3;
-
-  text-align: right;
-  background: transparent;
-  color: inherit;
-  font: inherit;
-  border: none;
-  padding: 2px 5px;
-  box-sizing: border-box;
-  text-decoration: underline;
-  text-decoration-style: dotted;
-  text-underline-position: under;
-  width: 48px;
-  position: relative;
-  left: 5px;
-
-  &:focus {
-    background: #fff;
-    color: #000;
-  }
-
-  // Remove the number controls
-  -moz-appearance: textfield;
-
-  &::-webkit-outer-spin-button,
-  &::-webkit-inner-spin-button {
-    -moz-appearance: none;
-    -webkit-appearance: none;
-    margin: 0;
-  }
-}
diff --git a/src_old/components/results/FileSize.tsx b/src_old/components/results/FileSize.tsx
deleted file mode 100644
index ce718052..00000000
--- a/src_old/components/results/FileSize.tsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { h, Component } from 'preact';
-import * as prettyBytes from 'pretty-bytes';
-import * as style from './style.scss';
-
-interface Props {
-  blob: Blob;
-  compareTo?: Blob;
-}
-
-interface State {}
-
-export default class FileSize extends Component<Props, State> {
-  render({ blob, compareTo }: Props) {
-    let comparison: JSX.Element | undefined;
-
-    if (compareTo) {
-      const delta = blob.size / compareTo.size;
-      if (delta > 1) {
-        const percent = Math.round((delta - 1) * 100) + '%';
-        comparison = (
-          <span class={`${style.sizeDelta} ${style.sizeIncrease}`}>
-            {percent === '0%' ? 'slightly' : percent} bigger
-          </span>
-        );
-      } else if (delta < 1) {
-        const percent = Math.round((1 - delta) * 100) + '%';
-        comparison = (
-          <span class={`${style.sizeDelta} ${style.sizeDecrease}`}>
-            {percent === '0%' ? 'slightly' : percent} smaller
-          </span>
-        );
-      } else {
-        comparison = <span class={style.sizeDelta}>no change</span>;
-      }
-    }
-
-    return (
-      <span>
-        {prettyBytes(blob.size)} {comparison}
-      </span>
-    );
-  }
-}
diff --git a/src_old/components/results/index.tsx b/src_old/components/results/index.tsx
deleted file mode 100644
index af22b511..00000000
--- a/src_old/components/results/index.tsx
+++ /dev/null
@@ -1,139 +0,0 @@
-import { h, Component, ComponentChildren, ComponentChild } from 'preact';
-
-import * as style from './style.scss';
-import FileSize from './FileSize';
-import {
-  DownloadIcon,
-  CopyAcrossIcon,
-  CopyAcrossIconProps,
-} from '../../lib/icons';
-import '../custom-els/LoadingSpinner';
-import { SourceImage } from '../compress';
-import { Fileish, bind } from '../../lib/initial-util';
-
-interface Props {
-  loading: boolean;
-  source?: SourceImage;
-  imageFile?: Fileish;
-  downloadUrl?: string;
-  children: ComponentChildren;
-  copyDirection: CopyAcrossIconProps['copyDirection'];
-  buttonPosition: keyof typeof buttonPositionClass;
-  onCopyToOtherClick(): void;
-}
-
-interface State {
-  showLoadingState: boolean;
-}
-
-const buttonPositionClass = {
-  'stack-right': style.stackRight,
-  'download-right': style.downloadRight,
-  'download-left': style.downloadLeft,
-};
-
-const loadingReactionDelay = 500;
-
-export default class Results extends Component<Props, State> {
-  state: State = {
-    showLoadingState: false,
-  };
-
-  /** The timeout ID between entering the loading state, and changing UI */
-  private loadingTimeoutId: number = 0;
-
-  componentDidUpdate(prevProps: Props, prevState: State) {
-    if (prevProps.loading && !this.props.loading) {
-      // Just stopped loading
-      clearTimeout(this.loadingTimeoutId);
-      this.setState({ showLoadingState: false });
-    } else if (!prevProps.loading && this.props.loading) {
-      // Just started loading
-      this.loadingTimeoutId = self.setTimeout(
-        () => this.setState({ showLoadingState: true }),
-        loadingReactionDelay,
-      );
-    }
-  }
-
-  @bind
-  private onCopyToOtherClick(event: Event) {
-    event.preventDefault();
-    this.props.onCopyToOtherClick();
-  }
-
-  @bind
-  onDownload() {
-    // GA can’t do floats. So we round to ints. We're deliberately rounding to nearest kilobyte to
-    // avoid cases where exact image sizes leak something interesting about the user.
-    const before = Math.round(this.props.source!.file.size / 1024);
-    const after = Math.round(this.props.imageFile!.size / 1024);
-    const change = Math.round((after / before) * 1000);
-
-    ga('send', 'event', 'compression', 'download', {
-      metric1: before,
-      metric2: after,
-      metric3: change,
-    });
-  }
-
-  render(
-    {
-      source,
-      imageFile,
-      downloadUrl,
-      children,
-      copyDirection,
-      buttonPosition,
-    }: Props,
-    { showLoadingState }: State,
-  ) {
-    return (
-      <div class={`${style.results} ${buttonPositionClass[buttonPosition]}`}>
-        <div class={style.resultData}>
-          {(children as ComponentChild[])[0] ? (
-            <div class={style.resultTitle}>{children}</div>
-          ) : null}
-          {!imageFile || showLoadingState ? (
-            'Working…'
-          ) : (
-            <FileSize
-              blob={imageFile}
-              compareTo={
-                source && imageFile !== source.file ? source.file : undefined
-              }
-            />
-          )}
-        </div>
-
-        <button
-          class={style.copyToOther}
-          title="Copy settings to other side"
-          onClick={this.onCopyToOtherClick}
-        >
-          <CopyAcrossIcon
-            class={style.copyIcon}
-            copyDirection={copyDirection}
-          />
-        </button>
-
-        <div class={style.download}>
-          {downloadUrl && imageFile && (
-            <a
-              class={`${style.downloadLink} ${
-                showLoadingState ? style.downloadLinkDisable : ''
-              }`}
-              href={downloadUrl}
-              download={imageFile.name}
-              title="Download"
-              onClick={this.onDownload}
-            >
-              <DownloadIcon class={style.downloadIcon} />
-            </a>
-          )}
-          {showLoadingState && <loading-spinner class={style.spinner} />}
-        </div>
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/results/style.scss b/src_old/components/results/style.scss
deleted file mode 100644
index 43acc732..00000000
--- a/src_old/components/results/style.scss
+++ /dev/null
@@ -1,131 +0,0 @@
-@keyframes action-enter {
-  from {
-    transform: rotate(-90deg);
-    opacity: 0;
-    animation-timing-function: ease-out;
-  }
-}
-
-@keyframes action-leave {
-  from {
-    transform: rotate(0deg);
-    opacity: 1;
-    animation-timing-function: ease-out;
-  }
-}
-
-.results {
-  display: grid;
-  grid-template-columns: [text] 1fr [copy-button] auto [download-button] auto;
-  background: rgba(0, 0, 0, 0.9);
-  font-size: 1rem;
-
-  @media (min-width: 400px) {
-    font-size: 1.2rem;
-  }
-
-  @media (min-width: 600px) {
-    font-size: 1.4rem;
-  }
-
-  &:focus {
-    outline: none;
-  }
-}
-
-.result-data {
-  grid-row: 1;
-  grid-column: text;
-  display: flex;
-  align-items: center;
-  padding: 0 10px;
-  white-space: nowrap;
-  overflow: hidden;
-}
-
-.download-right {
-  grid-template-columns: [copy-button] auto [text] 1fr [download-button] auto;
-}
-
-.download-left {
-  grid-template-columns: [download-button] auto [text] 1fr [copy-button] auto;
-}
-
-.stack-right {
-  & .result-data {
-    padding: 0 15px;
-  }
-}
-
-.result-title {
-  display: flex;
-  align-items: center;
-  margin-right: 0.4em;
-}
-
-.size-delta {
-  font-size: 0.8em;
-  font-style: italic;
-  position: relative;
-  top: -1px;
-  margin-left: 0.3em;
-}
-
-.size-increase {
-  color: #e35050;
-}
-
-.size-decrease {
-  color: #50e3c2;
-}
-
-.download {
-  grid-row: 1;
-  grid-column: download-button;
-  background: #34B9EB;
-  --size: 38px;
-  width: var(--size);
-  height: var(--size);
-  display: grid;
-  align-items: center;
-  justify-items: center;
-}
-
-.download-link {
-  animation: action-enter 0.2s;
-  grid-area: 1/1;
-}
-
-.download-link-disable {
-  pointer-events: none;
-  opacity: 0;
-  transform: rotate(90deg);
-  animation: action-leave 0.2s;
-}
-
-.download-icon,
-.copy-icon {
-  color: #fff;
-  display: block;
-  --size: 24px;
-  width: var(--size);
-  height: var(--size);
-  padding: 7px;
-  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.7));
-}
-
-.spinner {
-  --color: #fff;
-  --delay: 0;
-  --size: 22px;
-  grid-area: 1/1;
-}
-
-.copy-to-other {
-  grid-row: 1;
-  grid-column: copy-button;
-  composes: unbutton from '../../lib/util.scss';
-  composes: download;
-
-  background: #656565;
-}
diff --git a/src_old/components/select/index.tsx b/src_old/components/select/index.tsx
deleted file mode 100644
index 49699a12..00000000
--- a/src_old/components/select/index.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { h, Component } from 'preact';
-import * as style from './style.scss';
-
-interface Props extends JSX.HTMLAttributes {
-  large?: boolean;
-}
-interface State {}
-
-export default class Select extends Component<Props, State> {
-  render(props: Props) {
-    const { large, ...otherProps } = props;
-
-    return (
-      <div class={style.select}>
-        <select
-          class={`${style.builtinSelect} ${large ? style.large : ''}`}
-          {...otherProps}
-        />
-        <svg class={style.arrow} viewBox="0 0 10 5">
-          <path d="M0 0l5 5 5-5z" />
-        </svg>
-      </div>
-    );
-  }
-}
diff --git a/src_old/components/select/style.scss b/src_old/components/select/style.scss
deleted file mode 100644
index 82f21a02..00000000
--- a/src_old/components/select/style.scss
+++ /dev/null
@@ -1,33 +0,0 @@
-.select {
-  position: relative;
-}
-
-.builtin-select {
-  background: #2f2f2f;
-  border-radius: 4px;
-  font: inherit;
-  padding: 4px 25px 4px 10px;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  border: none;
-  color: #fff;
-  width: 100%;
-}
-
-.arrow {
-  position: absolute;
-  right: 8px;
-  top: 50%;
-  transform: translateY(-50%);
-  fill: #fff;
-  width: 10px;
-}
-
-.large {
-  padding: 10px 35px 10px 10px;
-  background: #151515;
-
-  & .arrow {
-    right: 13px;
-  }
-}
diff --git a/src_old/custom-els/RangeInput/index.ts b/src_old/custom-els/RangeInput/index.ts
deleted file mode 100644
index d2f4cf12..00000000
--- a/src_old/custom-els/RangeInput/index.ts
+++ /dev/null
@@ -1,167 +0,0 @@
-import PointerTracker from 'pointer-tracker';
-import { bind } from '../../lib/initial-util';
-import * as style from './styles.css';
-
-const RETARGETED_EVENTS = ['focus', 'blur'];
-const UPDATE_EVENTS = ['input', 'change'];
-const REFLECTED_PROPERTIES = [
-  'name',
-  'min',
-  'max',
-  'step',
-  'value',
-  'disabled',
-];
-const REFLECTED_ATTRIBUTES = [
-  'name',
-  'min',
-  'max',
-  'step',
-  'value',
-  'disabled',
-];
-
-function getPrescision(value: string): number {
-  const afterDecimal = value.split('.')[1];
-  return afterDecimal ? afterDecimal.length : 0;
-}
-
-class RangeInputElement extends HTMLElement {
-  private _input: HTMLInputElement;
-  private _valueDisplay?: HTMLDivElement;
-  private _ignoreChange = false;
-
-  static get observedAttributes() {
-    return REFLECTED_ATTRIBUTES;
-  }
-
-  constructor() {
-    super();
-    this._input = document.createElement('input');
-    this._input.type = 'range';
-    this._input.className = style.input;
-
-    const tracker = new PointerTracker(this._input, {
-      start: (): boolean => {
-        if (tracker.currentPointers.length !== 0) return false;
-        this._input.classList.add(style.touchActive);
-        return true;
-      },
-      end: () => {
-        this._input.classList.remove(style.touchActive);
-      },
-    });
-
-    for (const event of RETARGETED_EVENTS) {
-      this._input.addEventListener(event, this._retargetEvent, true);
-    }
-
-    for (const event of UPDATE_EVENTS) {
-      this._input.addEventListener(event, this._update, true);
-    }
-  }
-
-  connectedCallback() {
-    if (this.contains(this._input)) return;
-    this.innerHTML =
-      `<div class="${style.thumbWrapper}">` +
-      `<div class="${style.thumb}"></div>` +
-      `<div class="${style.valueDisplay}"></div>` +
-      '</div>';
-
-    this.insertBefore(this._input, this.firstChild);
-    this._valueDisplay = this.querySelector(
-      '.' + style.valueDisplay,
-    ) as HTMLDivElement;
-    // Set inline styles (this is useful when used with frameworks which might clear inline styles)
-    this._update();
-  }
-
-  get labelPrecision(): string {
-    return this.getAttribute('label-precision') || '';
-  }
-
-  set labelPrecision(precision: string) {
-    this.setAttribute('label-precision', precision);
-  }
-
-  attributeChangedCallback(
-    name: string,
-    oldValue: string,
-    newValue: string | null,
-  ) {
-    if (this._ignoreChange) return;
-    if (newValue === null) {
-      this._input.removeAttribute(name);
-    } else {
-      this._input.setAttribute(name, newValue);
-    }
-    this._reflectAttributes();
-    this._update();
-  }
-
-  @bind
-  private _retargetEvent(event: Event) {
-    event.stopImmediatePropagation();
-    const retargetted = new Event(event.type, event);
-    this.dispatchEvent(retargetted);
-  }
-
-  @bind
-  private _update() {
-    const value = Number(this.value) || 0;
-    const min = Number(this.min) || 0;
-    const max = Number(this.max) || 100;
-    const labelPrecision =
-      Number(this.labelPrecision) || getPrescision(this.step) || 0;
-    const percent = (100 * (value - min)) / (max - min);
-    const displayValue = labelPrecision
-      ? value.toFixed(labelPrecision)
-      : Math.round(value).toString();
-
-    this._valueDisplay!.textContent = displayValue;
-    this.style.setProperty('--value-percent', percent + '%');
-    this.style.setProperty('--value-width', '' + displayValue.length);
-  }
-
-  private _reflectAttributes() {
-    this._ignoreChange = true;
-    for (const attributeName of REFLECTED_ATTRIBUTES) {
-      if (this._input.hasAttribute(attributeName)) {
-        this.setAttribute(
-          attributeName,
-          this._input.getAttribute(attributeName)!,
-        );
-      } else {
-        this.removeAttribute(attributeName);
-      }
-    }
-    this._ignoreChange = false;
-  }
-}
-
-interface RangeInputElement {
-  name: string;
-  min: string;
-  max: string;
-  step: string;
-  value: string;
-  disabled: boolean;
-}
-
-for (const prop of REFLECTED_PROPERTIES) {
-  Object.defineProperty(RangeInputElement.prototype, prop, {
-    get() {
-      return this._input[prop];
-    },
-    set(val) {
-      this._input[prop] = val;
-      this._reflectAttributes();
-      this._update();
-    },
-  });
-}
-
-export default RangeInputElement;
-
-customElements.define('range-input', RangeInputElement);
diff --git a/src_old/custom-els/RangeInput/missing-types.d.ts b/src_old/custom-els/RangeInput/missing-types.d.ts
deleted file mode 100644
index d566207d..00000000
--- a/src_old/custom-els/RangeInput/missing-types.d.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-declare namespace JSX {
-  interface IntrinsicElements {
-    'range-input': HTMLAttributes;
-  }
-}
diff --git a/src_old/custom-els/RangeInput/styles.css b/src_old/custom-els/RangeInput/styles.css
deleted file mode 100644
index 0b18ea33..00000000
--- a/src_old/custom-els/RangeInput/styles.css
+++ /dev/null
@@ -1,98 +0,0 @@
-range-input {
-  position: relative;
-  display: flex;
-  height: 18px;
-  width: 130px;
-  margin: 2px;
-  font: inherit;
-  line-height: 16px;
-  overflow: visible;
-}
-
-/* Disabled inputs are greyed out */
-range-input[disabled] {
-  filter: grayscale(1);
-}
-
-range-input::before {
-  content: '';
-  display: block;
-  position: absolute;
-  top: 8px;
-  left: 0;
-  width: 100%;
-  height: 2px;
-  border-radius: 1px;
-  box-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.3),
-    inset 0 0.5px 0 rgba(255, 255, 255, 0.2), 0 0.5px 0 rgba(255, 255, 255, 0.3);
-  background: linear-gradient(#34b9eb, #218ab1) 0 / var(--value-percent, 0%)
-    100% no-repeat #eee;
-}
-
-.input {
-  position: relative;
-  width: 100%;
-  padding: 0;
-  margin: 0;
-  opacity: 0;
-}
-
-.thumb {
-  pointer-events: none;
-  position: absolute;
-  bottom: 3px;
-  left: var(--value-percent, 0%);
-  margin-left: -6px;
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10"><circle cx="5" cy="5" r="1" fill="%235D509E" /></svg>')
-    center no-repeat #34b9eb;
-  border-radius: 50%;
-  width: 12px;
-  height: 12px;
-  box-shadow: 0 0.5px 2px rgba(0, 0, 0, 0.3);
-}
-
-.thumb-wrapper {
-  position: absolute;
-  left: 6px;
-  right: 6px;
-  bottom: 0;
-  height: 0;
-  overflow: visible;
-}
-
-.value-display {
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="32" height="62" fill="none"><path fill="%2334B9EB" d="M27.3 27.3C25 29.6 17 35.8 17 43v3c0 3 2.5 5 3.2 5.8a6 6 0 1 1-8.5 0C12.6 51 15 49 15 46v-3c0-7.2-8-13.4-10.3-15.7A16 16 0 0 1 16 0a16 16 0 0 1 11.3 27.3z"/><circle cx="16" cy="56" r="1" fill="%235D509E"/></svg>')
-    top center no-repeat;
-  position: absolute;
-  box-sizing: border-box;
-  left: var(--value-percent, 0%);
-  bottom: 3px;
-  width: 32px;
-  height: 62px;
-  text-align: center;
-  padding: 8px 3px 0;
-  margin: 0 0 0 -16px;
-  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.3));
-  transform-origin: 50% 90%;
-  opacity: 0.0001;
-  transform: scale(0.2);
-  color: #fff;
-  font: inherit;
-  font-size: calc(100% - var(--value-width, 3) / 5 * 0.2em);
-  text-overflow: clip;
-  text-shadow: 0 -0.5px 0 rgba(0, 0, 0, 0.4);
-  transition: all 200ms ease;
-  transition-property: opacity, transform;
-  will-change: transform;
-  pointer-events: none;
-  overflow: hidden;
-}
-
-.touch-active + .thumb-wrapper .value-display {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.touch-active + .thumb-wrapper .thumb {
-  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
-}
diff --git a/src_old/index.html b/src_old/index.html
deleted file mode 100644
index d49d4854..00000000
--- a/src_old/index.html
+++ /dev/null
@@ -1,16 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <title>Squoosh</title>
-    <meta name="description" content="Compress and compare images with different codecs, right in your browser">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
-    <meta name="mobile-web-app-capable" content="yes">
-    <meta name="apple-mobile-web-app-capable" content="yes">
-    <link rel="shortcut icon" href="/assets/favicon.ico">
-    <meta name="theme-color" content="#f78f21">
-    <link rel="manifest" href="/manifest.json">
-  </head>
-  <body>
-  </body>
-</html>
diff --git a/src_old/index.ts b/src_old/index.ts
deleted file mode 100644
index 5da3cd3d..00000000
--- a/src_old/index.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-declare module '@webcomponents/custom-elements';
-
-function init() {
-  require('./init-app.tsx');
-}
-
-if (!('customElements' in self)) {
-  import(
-    /* webpackChunkName: "wc-polyfill" */
-    '@webcomponents/custom-elements'
-  ).then(init);
-} else {
-  init();
-}
-
-if (typeof PRERENDER === 'undefined') {
-  // Determine the current display mode.
-  let displayMode = 'browser';
-  const mqStandAlone = '(display-mode: standalone)';
-  if (navigator.standalone || window.matchMedia(mqStandAlone).matches) {
-    displayMode = 'standalone';
-  }
-  // Setup analytics
-  window.ga = window.ga || ((...args) => (ga.q = ga.q || []).push(args));
-  ga('create', 'UA-128752250-1', 'auto');
-  ga('set', 'transport', 'beacon');
-  ga('set', 'dimension1', displayMode);
-  ga('send', 'pageview', '/index.html', { title: 'Squoosh' });
-  // Load the GA script
-  const s = document.createElement('script');
-  s.src = 'https://www.google-analytics.com/analytics.js';
-  document.head!.appendChild(s);
-}
diff --git a/src_old/init-app.tsx b/src_old/init-app.tsx
deleted file mode 100644
index 9b0ce2ca..00000000
--- a/src_old/init-app.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { h, render } from 'preact';
-import './lib/fix-pmc';
-import './style';
-import App from './components/App';
-
-// Find the outermost Element in our server-rendered HTML structure.
-let root = document.getElementById('app_root') as Element;
-
-// "attach" the client-side rendering to it, updating the DOM in-place instead of replacing:
-root = render(<App />, document.body, root);
-root.setAttribute('id', 'app_root');
-
-if (process.env.NODE_ENV !== 'production') {
-  // Enable support for React DevTools and some helpful console warnings:
-  require('preact/debug');
-
-  // When an update to any module is received, re-import the app and trigger a full re-render:
-  module.hot.accept('./components/App', () => {
-    // The linter doesn't like the capital A in App. It is wrong.
-    // tslint:disable-next-line variable-name
-    import('./components/App').then(({ default: App }) => {
-      root = render(<App />, document.body, root);
-    });
-  });
-}
diff --git a/src_old/lib/SnackBar/index.ts b/src_old/lib/SnackBar/index.ts
deleted file mode 100644
index 0992fbcc..00000000
--- a/src_old/lib/SnackBar/index.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as style from './styles.css';
-
-export interface SnackOptions {
-  timeout?: number;
-  actions?: string[];
-}
-
-function createSnack(
-  message: string,
-  options: SnackOptions,
-): [Element, Promise<string>] {
-  const { timeout = 0, actions = ['dismiss'] } = options;
-
-  const el = document.createElement('div');
-  el.className = style.snackbar;
-  el.setAttribute('aria-live', 'assertive');
-  el.setAttribute('aria-atomic', 'true');
-  el.setAttribute('aria-hidden', 'false');
-
-  const text = document.createElement('div');
-  text.className = style.text;
-  text.textContent = message;
-  el.appendChild(text);
-
-  const result = new Promise<string>((resolve) => {
-    let timeoutId: number;
-
-    // Add action buttons
-    for (const action of actions) {
-      const button = document.createElement('button');
-      button.className = style.button;
-      button.textContent = action;
-      button.addEventListener('click', () => {
-        clearTimeout(timeoutId);
-        resolve(action);
-      });
-      el.appendChild(button);
-    }
-
-    // Add timeout
-    if (timeout) {
-      timeoutId = self.setTimeout(() => resolve(''), timeout);
-    }
-  });
-
-  return [el, result];
-}
-
-export default class SnackBarElement extends HTMLElement {
-  private _snackbars: [
-    string,
-    SnackOptions,
-    (action: Promise<string>) => void,
-  ][] = [];
-  private _processingQueue = false;
-
-  /**
-   * Show a snackbar. Returns a promise for the name of the action clicked, or an empty string if no
-   * action is clicked.
-   */
-  showSnackbar(message: string, options: SnackOptions = {}): Promise<string> {
-    return new Promise<string>((resolve) => {
-      this._snackbars.push([message, options, resolve]);
-      if (!this._processingQueue) this._processQueue();
-    });
-  }
-
-  private async _processQueue() {
-    this._processingQueue = true;
-
-    while (this._snackbars[0]) {
-      const [message, options, resolver] = this._snackbars[0];
-      const [el, result] = createSnack(message, options);
-      // Pass the result back to the original showSnackbar call.
-      resolver(result);
-      this.appendChild(el);
-
-      // Wait for the user to click an action, or for the snack to timeout.
-      await result;
-
-      // Transition the snack away.
-      el.setAttribute('aria-hidden', 'true');
-      await new Promise((resolve) => {
-        el.addEventListener('animationend', () => resolve());
-      });
-      el.remove();
-
-      this._snackbars.shift();
-    }
-
-    this._processingQueue = false;
-  }
-}
-
-customElements.define('snack-bar', SnackBarElement);
diff --git a/src_old/lib/SnackBar/missing-types.d.ts b/src_old/lib/SnackBar/missing-types.d.ts
deleted file mode 100644
index 38bea912..00000000
--- a/src_old/lib/SnackBar/missing-types.d.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import { SnackOptions, SnackShowResult } from '.';
-
-declare global {
-  namespace JSX {
-    interface IntrinsicElements {
-      'snack-bar': SnackBarAttributes;
-    }
-
-    interface SnackBarAttributes extends HTMLAttributes {
-      showSnackbar?: (options: SnackOptions) => Promise<SnackShowResult>;
-    }
-  }
-}
diff --git a/src_old/lib/SnackBar/styles.css b/src_old/lib/SnackBar/styles.css
deleted file mode 100644
index f20552cb..00000000
--- a/src_old/lib/SnackBar/styles.css
+++ /dev/null
@@ -1,105 +0,0 @@
-snack-bar {
-  display: block;
-  position: fixed;
-  left: 0;
-  bottom: 0;
-  width: 100%;
-  height: 0;
-  overflow: visible;
-}
-
-.snackbar {
-  position: fixed;
-  display: flex;
-  box-sizing: border-box;
-  left: 50%;
-  bottom: 24px;
-  width: 344px;
-  margin-left: -172px;
-  background: #2a2a2a;
-  border-radius: 2px;
-  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
-  transform-origin: center;
-  color: #eee;
-  z-index: 100;
-  cursor: default;
-  will-change: transform;
-  animation: snackbar-show 300ms ease forwards 1;
-}
-.snackbar[aria-hidden='true'] {
-  animation: snackbar-hide 300ms ease forwards 1;
-}
-@keyframes snackbar-show {
-  from {
-    opacity: 0;
-    transform: scale(0.5);
-  }
-}
-@keyframes snackbar-hide {
-  to {
-    opacity: 0;
-    transform: translateY(100%);
-  }
-}
-
-@media (max-width: 400px) {
-  .snackbar {
-    width: 100%;
-    bottom: 0;
-    left: 0;
-    margin-left: 0;
-    border-radius: 0;
-  }
-}
-
-.text {
-  flex: 1 1 auto;
-  padding: 16px;
-  font-size: 100%;
-}
-
-.button {
-  position: relative;
-  flex: 0 1 auto;
-  padding: 8px;
-  height: 36px;
-  margin: auto 8px auto -8px;
-  min-width: 5em;
-  background: none;
-  border: none;
-  border-radius: 3px;
-  color: lightgreen;
-  font-weight: inherit;
-  letter-spacing: 0.05em;
-  font-size: 100%;
-  text-transform: uppercase;
-  text-align: center;
-  cursor: pointer;
-  overflow: hidden;
-  transition: background-color 200ms ease;
-  outline: none;
-}
-.button:hover {
-  background-color: rgba(0, 0, 0, 0.15);
-}
-.button:focus:before {
-  content: '';
-  position: absolute;
-  left: 50%;
-  top: 50%;
-  width: 120%;
-  height: 0;
-  padding: 0 0 120%;
-  margin: -60% 0 0 -60%;
-  background: rgba(255, 255, 255, 0.1);
-  border-radius: 50%;
-  transform-origin: center;
-  will-change: transform;
-  animation: focus-ring 300ms ease-out forwards 1;
-  pointer-events: none;
-}
-@keyframes focus-ring {
-  from {
-    transform: scale(0.01);
-  }
-}
diff --git a/src_old/lib/clean-modify.ts b/src_old/lib/clean-modify.ts
deleted file mode 100644
index aefb0370..00000000
--- a/src_old/lib/clean-modify.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-function cleanSetOrMerge<A extends any[] | object>(
-  source: A,
-  keys: string | number | string[],
-  toSetOrMerge: any[] | object,
-  merge: boolean,
-): A {
-  const splitKeys = Array.isArray(keys) ? keys : ('' + keys).split('.');
-
-  // Going off road in terms of types, otherwise TypeScript doesn't like the access-by-index.
-  // The assumptions in this code break if the object contains things which aren't arrays or
-  // plain objects.
-  let last = copy(source) as any;
-  const newObject = last;
-
-  const lastIndex = splitKeys.length - 1;
-
-  for (const [i, key] of splitKeys.entries()) {
-    if (i !== lastIndex) {
-      // Copy everything along the path.
-      last = last[key] = copy(last[key]);
-    } else {
-      // Merge or set.
-      last[key] = merge
-        ? Object.assign(copy(last[key]), toSetOrMerge)
-        : toSetOrMerge;
-    }
-  }
-
-  return newObject;
-}
-
-function copy<A extends any[] | object>(source: A): A {
-  // Some type cheating here, as TypeScript can't infer between generic types.
-  if (Array.isArray(source)) return [...source] as any;
-  return { ...(source as any) };
-}
-
-/**
- * @param source Object to copy from.
- * @param keys Path to modify, eg "foo.bar.baz".
- * @param toMerge A value to merge into the value at the path.
- */
-export function cleanMerge<A extends any[] | object>(
-  source: A,
-  keys: string | number | string[],
-  toMerge: any[] | object,
-): A {
-  return cleanSetOrMerge(source, keys, toMerge, true);
-}
-
-/**
- * @param source Object to copy from.
- * @param keys Path to modify, eg "foo.bar.baz".
- * @param newValue A value to set at the path.
- */
-export function cleanSet<A extends any[] | object>(
-  source: A,
-  keys: string | number | string[],
-  newValue: any,
-): A {
-  return cleanSetOrMerge(source, keys, newValue, false);
-}
diff --git a/src_old/lib/fix-pmc.mjs b/src_old/lib/fix-pmc.mjs
deleted file mode 100644
index ca62c17d..00000000
--- a/src_old/lib/fix-pmc.mjs
+++ /dev/null
@@ -1,26 +0,0 @@
-import { options } from 'preact';
-
-const classNameDescriptor = {
-  enumerable: false,
-  configurable: true,
-  get () {
-    return this.class;
-  },
-  set (value) {
-    this.class = value;
-  }
-};
-
-const old = options.vnode;
-options.vnode = vnode => {
-  const a = vnode.attributes;
-  if (a != null) {
-    if ('className' in a) {
-      a.class = a.className;
-    }
-    if ('class' in a) {
-      Object.defineProperty(a, 'className', classNameDescriptor);
-    }
-  }
-  if (old != null) old(vnode);
-};
diff --git a/src_old/lib/icons.tsx b/src_old/lib/icons.tsx
deleted file mode 100644
index f88b9ab1..00000000
--- a/src_old/lib/icons.tsx
+++ /dev/null
@@ -1,107 +0,0 @@
-import { h } from 'preact';
-
-// tslint:disable:max-line-length variable-name
-
-const Icon = (props: JSX.HTMLAttributes) => (
-  <svg
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    fill="currentColor"
-    {...props}
-  />
-);
-
-export const DownloadIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M19 12v7H5v-7H3v7c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-7h-2zm-6 .7l2.6-2.6 1.4 1.4-5 5-5-5 1.4-1.4 2.6 2.6V3h2z" />
-  </Icon>
-);
-
-export const ToggleBackgroundIcon = (props: 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" />
-  </Icon>
-);
-
-export const ToggleBackgroundActiveIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M9 7H7v2h2V7zm0 4H7v2h2v-2zm0-8a2 2 0 0 0-2 2h2V3zm4 12h-2v2h2v-2zm6-12v2h2a2 2 0 0 0-2-2zm-6 0h-2v2h2V3zM9 17v-2H7c0 1.1.9 2 2 2zm10-4h2v-2h-2v2zm0-4h2V7h-2v2zm0 8a2 2 0 0 0 2-2h-2v2zM5 7H3v12c0 1.1.9 2 2 2h12v-2H5V7zm10-2h2V3h-2v2zm0 12h2v-2h-2v2z" />
-  </Icon>
-);
-
-export const RotateIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M15.6 5.5L11 1v3a8 8 0 0 0 0 16v-2a6 6 0 0 1 0-12v4l4.5-4.5zm4.3 5.5a8 8 0 0 0-1.6-3.9L17 8.5c.5.8.9 1.6 1 2.5h2zM13 17.9v2a8 8 0 0 0 3.9-1.6L15.5 17c-.8.5-1.6.9-2.5 1zm3.9-2.4l1.4 1.4A8 8 0 0 0 20 13h-2c-.1.9-.5 1.7-1 2.5z" />
-  </Icon>
-);
-
-export const AddIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z" />
-  </Icon>
-);
-
-export const RemoveIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M19 13H5v-2h14v2z" />
-  </Icon>
-);
-
-export const UncheckedIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M21.3 2.7v18.6H2.7V2.7h18.6m0-2.7H2.7A2.7 2.7 0 0 0 0 2.7v18.6A2.7 2.7 0 0 0 2.7 24h18.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 21.3 0z" />
-  </Icon>
-);
-
-export const CheckedIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M21.3 0H2.7A2.7 2.7 0 0 0 0 2.7v18.6A2.7 2.7 0 0 0 2.7 24h18.6a2.7 2.7 0 0 0 2.7-2.7V2.7A2.7 2.7 0 0 0 21.3 0zm-12 18.7L2.7 12l1.8-1.9L9.3 15 19.5 4.8l1.8 1.9z" />
-  </Icon>
-);
-
-export const ExpandIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M16.6 8.6L12 13.2 7.4 8.6 6 10l6 6 6-6z" />
-  </Icon>
-);
-
-export const BackIcon = (props: JSX.HTMLAttributes) => (
-  <Icon {...props}>
-    <path d="M20 11H7.8l5.6-5.6L12 4l-8 8 8 8 1.4-1.4L7.8 13H20v-2z" />
-  </Icon>
-);
-
-const copyAcrossRotations = {
-  up: 90,
-  right: 180,
-  down: -90,
-  left: 0,
-};
-
-export interface CopyAcrossIconProps extends JSX.HTMLAttributes {
-  copyDirection: keyof typeof copyAcrossRotations;
-}
-
-export const CopyAcrossIcon = (props: CopyAcrossIconProps) => {
-  const { copyDirection, ...otherProps } = props;
-  const id = 'point-' + copyDirection;
-  const rotation = copyAcrossRotations[copyDirection];
-
-  return (
-    <Icon {...otherProps}>
-      <defs>
-        <clipPath id={id}>
-          <path
-            d="M-12-12v24h24v-24zM4.5 2h-4v3l-5-5 5-5v3h4z"
-            transform={`translate(12 13) rotate(${rotation})`}
-          />
-        </clipPath>
-      </defs>
-      <path
-        clip-path={`url(#${id})`}
-        d="M19 3h-4.2c-.4-1.2-1.5-2-2.8-2s-2.4.8-2.8 2H5a2 2 0 0 0-2 2v14c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2zm-7 0a1 1 0 0 1 0 2c-.6 0-1-.4-1-1s.4-1 1-1z"
-      />
-    </Icon>
-  );
-};
diff --git a/src_old/lib/initial-util.ts b/src_old/lib/initial-util.ts
deleted file mode 100644
index da1ea46f..00000000
--- a/src_old/lib/initial-util.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-// This file contains the utils that are needed for the very first rendering of the page. They're
-// here because WebPack isn't quite smart enough to split things in the same file.
-
-/**
- * A decorator that binds values to their class instance.
- * @example
- * class C {
- *   @bind
- *   foo () {
- *     return this;
- *   }
- * }
- * let f = new C().foo;
- * f() instanceof C;    // true
- */
-export function bind(
-  target: any,
-  propertyKey: string,
-  descriptor: PropertyDescriptor,
-) {
-  return {
-    // the first time the prototype property is accessed for an instance,
-    // define an instance property pointing to the bound function.
-    // This effectively "caches" the bound prototype method as an instance property.
-    get() {
-      const bound = descriptor.value.bind(this);
-      Object.defineProperty(this, propertyKey, {
-        value: bound,
-      });
-      return bound;
-    },
-  };
-}
-
-/** Creates a function ref that assigns its value to a given property of an object.
- *  @example
- *  // element is stored as `this.foo` when rendered.
- *  <div ref={linkRef(this, 'foo')} />
- */
-export function linkRef<T>(obj: any, name: string) {
-  const refName = `$$ref_${name}`;
-  let ref = obj[refName];
-  if (!ref) {
-    ref = obj[refName] = (c: T) => {
-      obj[name] = c;
-    };
-  }
-  return ref;
-}
-
-// Edge doesn't support `new File`, so here's a hacky alternative.
-// https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/9551546/
-export class Fileish extends Blob {
-  constructor(data: any[], public name: string, opts?: BlobPropertyBag) {
-    super(data, opts);
-  }
-}
diff --git a/src_old/lib/missing-types.d.ts b/src_old/lib/missing-types.d.ts
deleted file mode 100644
index 1bc4ed1a..00000000
--- a/src_old/lib/missing-types.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-interface HTMLImageElement {
-  decode: (() => Promise<void>) | undefined;
-}
-
-interface CanvasRenderingContext2D {
-  imageSmoothingQuality: 'low' | 'medium' | 'high';
-}
diff --git a/src_old/lib/sw-bridge.ts b/src_old/lib/sw-bridge.ts
deleted file mode 100644
index 83d8e7aa..00000000
--- a/src_old/lib/sw-bridge.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-import { get, set } from 'idb-keyval';
-
-// Just for TypeScript
-import SnackBarElement from './SnackBar';
-
-/** Tell the service worker to skip waiting */
-async function skipWaiting() {
-  const reg = await navigator.serviceWorker.getRegistration();
-  if (!reg || !reg.waiting) return;
-  reg.waiting.postMessage('skip-waiting');
-}
-
-/** Find the service worker that's 'active' or closest to 'active' */
-async function getMostActiveServiceWorker() {
-  const reg = await navigator.serviceWorker.getRegistration();
-  if (!reg) return null;
-  return reg.active || reg.waiting || reg.installing;
-}
-
-/** Wait for an installing worker */
-async function installingWorker(
-  reg: ServiceWorkerRegistration,
-): Promise<ServiceWorker> {
-  if (reg.installing) return reg.installing;
-  return new Promise<ServiceWorker>((resolve) => {
-    reg.addEventListener('updatefound', () => resolve(reg.installing!), {
-      once: true,
-    });
-  });
-}
-
-/** Wait a service worker to become waiting */
-async function updateReady(reg: ServiceWorkerRegistration): Promise<void> {
-  if (reg.waiting) return;
-  const installing = await installingWorker(reg);
-  return new Promise<void>((resolve) => {
-    installing.addEventListener('statechange', () => {
-      if (installing.state === 'installed') resolve();
-    });
-  });
-}
-
-/** Wait for a shared image */
-export function getSharedImage(): Promise<File> {
-  return new Promise((resolve) => {
-    const onmessage = (event: MessageEvent) => {
-      if (event.data.action !== 'load-image') return;
-      resolve(event.data.file);
-      navigator.serviceWorker.removeEventListener('message', onmessage);
-    };
-
-    navigator.serviceWorker.addEventListener('message', onmessage);
-
-    // This message is picked up by the service worker - it's how it knows we're ready to receive
-    // the file.
-    navigator.serviceWorker.controller!.postMessage('share-ready');
-  });
-}
-
-/** Set up the service worker and monitor changes */
-export async function offliner(showSnack: SnackBarElement['showSnackbar']) {
-  // This needs to be a typeof because Webpack.
-  if (typeof PRERENDER === 'boolean') return;
-
-  if (process.env.NODE_ENV === 'production') {
-    navigator.serviceWorker.register('../sw');
-  }
-
-  const hasController = !!navigator.serviceWorker.controller;
-
-  // Look for changes in the controller
-  navigator.serviceWorker.addEventListener('controllerchange', async () => {
-    // Is it the first install?
-    if (!hasController) {
-      showSnack('Ready to work offline', { timeout: 5000 });
-      return;
-    }
-
-    // Otherwise reload (the user will have agreed to this).
-    location.reload();
-  });
-
-  // If we don't have a controller, we don't need to check for updates – we've just loaded from the
-  // network.
-  if (!hasController) return;
-
-  const reg = await navigator.serviceWorker.getRegistration();
-  // Service worker not registered yet.
-  if (!reg) return;
-  // Look for updates
-  await updateReady(reg);
-
-  // Ask the user if they want to update.
-  const result = await showSnack('Update available', {
-    actions: ['reload', 'dismiss'],
-  });
-
-  // Tell the waiting worker to activate, this will change the controller and cause a reload (see
-  // 'controllerchange')
-  if (result === 'reload') skipWaiting();
-}
-
-/**
- * Tell the service worker the main app has loaded. If it's the first time the service worker has
- * heard about this, cache the heavier assets like codecs.
- */
-export async function mainAppLoaded() {
-  // If the user has already interacted, no need to tell the service worker anything.
-  const userInteracted = await get<boolean | undefined>('user-interacted');
-  if (userInteracted) return;
-  set('user-interacted', true);
-  const serviceWorker = await getMostActiveServiceWorker();
-  if (!serviceWorker) return; // Service worker not installing yet.
-  serviceWorker.postMessage('cache-all');
-}
diff --git a/src_old/lib/util.scss b/src_old/lib/util.scss
deleted file mode 100644
index b8c7ba48..00000000
--- a/src_old/lib/util.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-.abs-fill {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  contain: strict;
-}
-
-.unbutton {
-  cursor: pointer;
-  background: none;
-  border: none;
-  font: inherit;
-  padding: 0;
-  margin: 0;
-
-  &:focus {
-    outline: none;
-  }
-}
diff --git a/src_old/lib/util.ts b/src_old/lib/util.ts
deleted file mode 100644
index fdd91fa7..00000000
--- a/src_old/lib/util.ts
+++ /dev/null
@@ -1,355 +0,0 @@
-/** Compare two objects, returning a boolean indicating if
- *  they have the same properties and strictly equal values.
- */
-export function shallowEqual(one: any, two: any) {
-  for (const i in one) if (one[i] !== two[i]) return false;
-  for (const i in two) if (!(i in one)) return false;
-  return true;
-}
-
-/** Replace the contents of a canvas with the given data */
-export function drawDataToCanvas(canvas: HTMLCanvasElement, data: ImageData) {
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw Error('Canvas not initialized');
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.putImageData(data, 0, 0);
-}
-
-/**
- * Encode some image data in a given format using the browser's encoders
- *
- * @param {ImageData} data
- * @param {string} type A mime type, eg image/jpeg.
- * @param {number} [quality] Between 0-1.
- */
-export async function canvasEncode(
-  data: ImageData,
-  type: string,
-  quality?: number,
-): Promise<Blob> {
-  const canvas = document.createElement('canvas');
-  canvas.width = data.width;
-  canvas.height = data.height;
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw Error('Canvas not initialized');
-  ctx.putImageData(data, 0, 0);
-
-  let blob: Blob | null;
-
-  if ('toBlob' in canvas) {
-    blob = await new Promise<Blob | null>((r) =>
-      canvas.toBlob(r, type, quality),
-    );
-  } else {
-    // Welcome to Edge.
-    // TypeScript thinks `canvas` is 'never', so it needs casting.
-    const dataUrl = (canvas as HTMLCanvasElement).toDataURL(type, quality);
-    const result = /data:([^;]+);base64,(.*)$/.exec(dataUrl);
-
-    if (!result) throw Error('Data URL reading failed');
-
-    const outputType = result[1];
-    const binaryStr = atob(result[2]);
-    const data = new Uint8Array(binaryStr.length);
-
-    for (let i = 0; i < data.length; i += 1) {
-      data[i] = binaryStr.charCodeAt(i);
-    }
-
-    blob = new Blob([data], { type: outputType });
-  }
-
-  if (!blob) throw Error('Encoding failed');
-  return blob;
-}
-
-async function decodeImage(url: string): Promise<HTMLImageElement> {
-  const img = new Image();
-  img.decoding = 'async';
-  img.src = url;
-  const loaded = new Promise((resolve, reject) => {
-    img.onload = () => resolve();
-    img.onerror = () => reject(Error('Image loading error'));
-  });
-
-  if (img.decode) {
-    // Nice off-thread way supported in Safari/Chrome.
-    // Safari throws on decode if the source is SVG.
-    // https://bugs.webkit.org/show_bug.cgi?id=188347
-    await img.decode().catch(() => null);
-  }
-
-  // Always await loaded, as we may have bailed due to the Safari bug above.
-  await loaded;
-  return img;
-}
-
-/** Caches results from canDecodeImageType */
-const canDecodeCache = new Map<string, Promise<boolean>>();
-
-/**
- * Tests whether the browser supports a particular image mime type.
- *
- * @param type Mimetype
- * @example await canDecodeImageType('image/avif')
- */
-export function canDecodeImageType(type: string): Promise<boolean> {
-  if (!canDecodeCache.has(type)) {
-    const resultPromise = (async () => {
-      const picture = document.createElement('picture');
-      const img = document.createElement('img');
-      const source = document.createElement('source');
-      source.srcset = 'data:,x';
-      source.type = type;
-      picture.append(source, img);
-
-      // Wait a single microtick just for the `img.currentSrc` to get populated.
-      await 0;
-      // At this point `img.currentSrc` will contain "data:,x" if format is supported and ""
-      // otherwise.
-      return !!img.currentSrc;
-    })();
-
-    canDecodeCache.set(type, resultPromise);
-  }
-
-  return canDecodeCache.get(type)!;
-}
-
-export function blobToArrayBuffer(blob: Blob): Promise<ArrayBuffer> {
-  return new Response(blob).arrayBuffer();
-}
-
-export function blobToText(blob: Blob): Promise<string> {
-  return new Response(blob).text();
-}
-
-const magicNumberToMimeType = new Map<RegExp, string>([
-  [/^%PDF-/, 'application/pdf'],
-  [/^GIF87a/, 'image/gif'],
-  [/^GIF89a/, 'image/gif'],
-  [/^\x89PNG\x0D\x0A\x1A\x0A/, 'image/png'],
-  [/^\xFF\xD8\xFF/, 'image/jpeg'],
-  [/^BM/, 'image/bmp'],
-  [/^I I/, 'image/tiff'],
-  [/^II*/, 'image/tiff'],
-  [/^MM\x00*/, 'image/tiff'],
-  [/^RIFF....WEBPVP8[LX ]/, 'image/webp'],
-  [/^\x00\x00\x00 ftypavif\x00\x00\x00\x00/, 'image/avif'],
-]);
-
-export async function sniffMimeType(blob: Blob): Promise<string> {
-  const firstChunk = await blobToArrayBuffer(blob.slice(0, 16));
-  const firstChunkString = Array.from(new Uint8Array(firstChunk))
-    .map((v) => String.fromCodePoint(v))
-    .join('');
-  for (const [detector, mimeType] of magicNumberToMimeType) {
-    if (detector.test(firstChunkString)) {
-      return mimeType;
-    }
-  }
-  return '';
-}
-
-export async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
-  const url = URL.createObjectURL(blob);
-
-  try {
-    return await decodeImage(url);
-  } finally {
-    URL.revokeObjectURL(url);
-  }
-}
-
-interface DrawableToImageDataOptions {
-  width?: number;
-  height?: number;
-  sx?: number;
-  sy?: number;
-  sw?: number;
-  sh?: number;
-}
-
-export function drawableToImageData(
-  drawable: ImageBitmap | HTMLImageElement,
-  opts: DrawableToImageDataOptions = {},
-): ImageData {
-  const {
-    width = drawable.width,
-    height = drawable.height,
-    sx = 0,
-    sy = 0,
-    sw = drawable.width,
-    sh = drawable.height,
-  } = opts;
-
-  // Make canvas same size as image
-  const canvas = document.createElement('canvas');
-  canvas.width = width;
-  canvas.height = height;
-  // Draw image onto canvas
-  const ctx = canvas.getContext('2d');
-  if (!ctx) throw new Error('Could not create canvas context');
-  ctx.drawImage(drawable, sx, sy, sw, sh, 0, 0, width, height);
-  return ctx.getImageData(0, 0, width, height);
-}
-
-export async function builtinDecode(blob: Blob): Promise<ImageData> {
-  // Prefer createImageBitmap as it's the off-thread option for Firefox.
-  const drawable =
-    'createImageBitmap' in self
-      ? await createImageBitmap(blob)
-      : await blobToImg(blob);
-
-  return drawableToImageData(drawable);
-}
-
-export type BuiltinResizeMethod = 'pixelated' | 'low' | 'medium' | 'high';
-
-export function builtinResize(
-  data: ImageData,
-  sx: number,
-  sy: number,
-  sw: number,
-  sh: number,
-  dw: number,
-  dh: number,
-  method: BuiltinResizeMethod,
-): ImageData {
-  const canvasSource = document.createElement('canvas');
-  canvasSource.width = data.width;
-  canvasSource.height = data.height;
-  drawDataToCanvas(canvasSource, data);
-
-  const canvasDest = document.createElement('canvas');
-  canvasDest.width = dw;
-  canvasDest.height = dh;
-  const ctx = canvasDest.getContext('2d');
-  if (!ctx) throw new Error('Could not create canvas context');
-
-  if (method === 'pixelated') {
-    ctx.imageSmoothingEnabled = false;
-  } else {
-    ctx.imageSmoothingQuality = method;
-  }
-
-  ctx.drawImage(canvasSource, sx, sy, sw, sh, 0, 0, dw, dh);
-  return ctx.getImageData(0, 0, dw, dh);
-}
-
-/**
- * @param field An HTMLInputElement, but the casting is done here to tidy up onChange.
- * @param defaultVal Value to return if 'field' doesn't exist.
- */
-export function inputFieldValueAsNumber(
-  field: any,
-  defaultVal: number = 0,
-): number {
-  if (!field) return defaultVal;
-  return Number(inputFieldValue(field));
-}
-
-/**
- * @param field An HTMLInputElement, but the casting is done here to tidy up onChange.
- * @param defaultVal Value to return if 'field' doesn't exist.
- */
-export function inputFieldCheckedAsNumber(
-  field: any,
-  defaultVal: number = 0,
-): number {
-  if (!field) return defaultVal;
-  return Number(inputFieldChecked(field));
-}
-
-/**
- * @param field An HTMLInputElement, but the casting is done here to tidy up onChange.
- * @param defaultVal Value to return if 'field' doesn't exist.
- */
-export function inputFieldChecked(
-  field: any,
-  defaultVal: boolean = false,
-): boolean {
-  if (!field) return defaultVal;
-  return (field as HTMLInputElement).checked;
-}
-
-/**
- * @param field An HTMLInputElement, but the casting is done here to tidy up onChange.
- * @param defaultVal Value to return if 'field' doesn't exist.
- */
-export function inputFieldValue(field: any, defaultVal: string = ''): string {
-  if (!field) return defaultVal;
-  return (field as HTMLInputElement).value;
-}
-
-/**
- * Creates a promise that resolves when the user types the konami code.
- */
-export function konami(): Promise<void> {
-  return new Promise((resolve) => {
-    // Keycodes for: ↑ ↑ ↓ ↓ ← → ← → B A
-    const expectedPattern = '38384040373937396665';
-    let rollingPattern = '';
-
-    const listener = (event: KeyboardEvent) => {
-      rollingPattern += event.keyCode;
-      rollingPattern = rollingPattern.slice(-expectedPattern.length);
-      if (rollingPattern === expectedPattern) {
-        window.removeEventListener('keydown', listener);
-        resolve();
-      }
-    };
-
-    window.addEventListener('keydown', listener);
-  });
-}
-
-interface TransitionOptions {
-  from?: number;
-  to?: number;
-  duration?: number;
-  easing?: string;
-}
-
-export async function transitionHeight(
-  el: HTMLElement,
-  opts: TransitionOptions,
-): Promise<void> {
-  const {
-    from = el.getBoundingClientRect().height,
-    to = el.getBoundingClientRect().height,
-    duration = 1000,
-    easing = 'ease-in-out',
-  } = opts;
-
-  if (from === to || duration === 0) {
-    el.style.height = to + 'px';
-    return;
-  }
-
-  el.style.height = from + 'px';
-  // Force a style calc so the browser picks up the start value.
-  getComputedStyle(el).transform;
-  el.style.transition = `height ${duration}ms ${easing}`;
-  el.style.height = to + 'px';
-
-  return new Promise<void>((resolve) => {
-    const listener = (event: Event) => {
-      if (event.target !== el) return;
-      el.style.transition = '';
-      el.removeEventListener('transitionend', listener);
-      el.removeEventListener('transitioncancel', listener);
-      resolve();
-    };
-
-    el.addEventListener('transitionend', listener);
-    el.addEventListener('transitioncancel', listener);
-  });
-}
-
-/**
- * Simple event listener that prevents the default.
- */
-export function preventDefault(event: Event) {
-  event.preventDefault();
-}
diff --git a/src_old/manifest.json b/src_old/manifest.json
deleted file mode 100644
index 605af071..00000000
--- a/src_old/manifest.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "Squoosh",
-  "short_name": "Squoosh",
-  "start_url": "/?utm_medium=PWA&utm_source=launcher",
-  "display": "standalone",
-  "orientation": "any",
-  "background_color": "#fff",
-  "theme_color": "#f78f21",
-  "icons": [
-    {
-      "src": "/assets/icon-large.png",
-      "type": "image/png",
-      "sizes": "1024x1024"
-    },
-    {
-      "src": "/assets/icon-large-maskable.png",
-      "type": "image/png",
-      "sizes": "1024x1024",
-      "purpose": "maskable"
-    }
-  ],
-  "share_target": {
-    "action": "/?utm_medium=PWA&utm_source=share-target&share-target",
-    "method": "POST",
-    "enctype": "multipart/form-data",
-    "params": {
-      "files": [
-        {
-          "name": "file",
-          "accept": ["image/*"]
-        }
-      ]
-    }
-  }
-}
diff --git a/src_old/missing-types.d.ts b/src_old/missing-types.d.ts
deleted file mode 100644
index fa9ad3cc..00000000
--- a/src_old/missing-types.d.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-interface CanvasRenderingContext2D {
-  filter: string;
-}
-
-// Handling file-loader imports:
-declare module '*.png' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.jpg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.gif' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.svg' {
-  const content: string;
-  export default content;
-}
-
-declare module '*.wasm' {
-  const content: string;
-  export default content;
-}
-
-declare module 'url-loader!*' {
-  const value: string;
-  export default value;
-}
-
-declare var VERSION: string;
-
-declare var ga: {
-  (...args: any[]): void;
-  q: any[];
-};
-
-interface Navigator {
-  readonly standalone: boolean;
-}
diff --git a/src_old/style/index.scss b/src_old/style/index.scss
deleted file mode 100644
index 6a638106..00000000
--- a/src_old/style/index.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@import './reset.scss';
-
-html, body {
-  height: 100%;
-  padding: 0;
-  margin: 0;
-  font: 12px/1.3 system-ui, -apple-system, BlinkMacSystemFont, Roboto, Helvetica, sans-serif;
-  overflow: hidden;
-  overscroll-behavior: none;
-  contain: strict;
-  background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 2 2"><path d="M1 2V0h1v1H0v1z" fill-opacity=".025"/></svg>');
-  background-size: 20px 20px;
-}
-
-:root {
-  --gray-dark: rgba(0,0,0,0.8);
-
-  --button-fg-color: 95, 180, 228;
-  --button-fg: rgb(95, 180, 228);
-
-  --negative: rgb(207, 113, 127);
-  --positive: rgb(149, 212, 159);
-}
diff --git a/src_old/style/reset.scss b/src_old/style/reset.scss
deleted file mode 100644
index c863fb75..00000000
--- a/src_old/style/reset.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-button, a, img, input, select, textarea {
-  -webkit-tap-highlight-color: rgba(0,0,0,0);
-}
-
-a, button, img, [inert], .inert {
-  user-select: none;
-  -webkit-user-select: none;
-  user-drag: none;
-  -webkit-user-drag: none;
-  touch-callout: none;
-  -webkit-touch-callout: none;
-}
diff --git a/src_old/sw/index.ts b/src_old/sw/index.ts
deleted file mode 100644
index 697a7a21..00000000
--- a/src_old/sw/index.ts
+++ /dev/null
@@ -1,91 +0,0 @@
-import {
-  cacheOrNetworkAndCache,
-  cleanupCache,
-  cacheOrNetwork,
-  cacheBasics,
-  cacheAdditionalProcessors,
-  serveShareTarget,
-} from './util';
-import { get } from 'idb-keyval';
-
-// Give TypeScript the correct global.
-declare var self: ServiceWorkerGlobalScope;
-// This is populated by webpack.
-declare var BUILD_ASSETS: string[];
-
-const versionedCache = 'static-' + VERSION;
-const dynamicCache = 'dynamic';
-const expectedCaches = [versionedCache, dynamicCache];
-
-self.addEventListener('install', (event) => {
-  event.waitUntil(
-    (async function () {
-      const promises = [];
-      promises.push(cacheBasics(versionedCache, BUILD_ASSETS));
-
-      // If the user has already interacted with the app, update the codecs too.
-      if (await get('user-interacted')) {
-        promises.push(cacheAdditionalProcessors(versionedCache, BUILD_ASSETS));
-      }
-
-      await Promise.all(promises);
-    })(),
-  );
-});
-
-self.addEventListener('activate', (event) => {
-  self.clients.claim();
-
-  event.waitUntil(
-    (async function () {
-      // Remove old caches.
-      const promises = (await caches.keys()).map((cacheName) => {
-        if (!expectedCaches.includes(cacheName))
-          return caches.delete(cacheName);
-      });
-
-      await Promise.all<any>(promises);
-    })(),
-  );
-});
-
-self.addEventListener('fetch', (event) => {
-  const url = new URL(event.request.url);
-
-  // Don't care about other-origin URLs
-  if (url.origin !== location.origin) return;
-
-  if (
-    url.pathname === '/' &&
-    url.searchParams.has('share-target') &&
-    event.request.method === 'POST'
-  ) {
-    serveShareTarget(event);
-    return;
-  }
-
-  // We only care about GET from here on in.
-  if (event.request.method !== 'GET') return;
-
-  if (
-    url.pathname.startsWith('/demo-') ||
-    url.pathname.startsWith('/wc-polyfill')
-  ) {
-    cacheOrNetworkAndCache(event, dynamicCache);
-    cleanupCache(event, dynamicCache, BUILD_ASSETS);
-    return;
-  }
-
-  cacheOrNetwork(event);
-});
-
-self.addEventListener('message', (event) => {
-  switch (event.data) {
-    case 'cache-all':
-      event.waitUntil(cacheAdditionalProcessors(versionedCache, BUILD_ASSETS));
-      break;
-    case 'skip-waiting':
-      self.skipWaiting();
-      break;
-  }
-});
diff --git a/src_old/sw/missing-types.d.ts b/src_old/sw/missing-types.d.ts
deleted file mode 100644
index ec041d77..00000000
--- a/src_old/sw/missing-types.d.ts
+++ /dev/null
@@ -1 +0,0 @@
-import '../missing-types';
diff --git a/src_old/sw/tsconfig.json b/src_old/sw/tsconfig.json
deleted file mode 100644
index a56d982f..00000000
--- a/src_old/sw/tsconfig.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-  "compileOnSave": false,
-  "compilerOptions": {
-    "strict": true,
-    "target": "esnext",
-    "module": "esnext",
-    "lib": ["webworker", "esnext"],
-    "moduleResolution": "node",
-    "experimentalDecorators": true,
-    "noUnusedLocals": true,
-    "sourceMap": true,
-    "allowJs": false,
-    "baseUrl": "."
-  }
-}
diff --git a/src_old/sw/util.ts b/src_old/sw/util.ts
deleted file mode 100644
index c24ded65..00000000
--- a/src_old/sw/util.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-import webpDataUrl from 'url-loader!./tiny.webp';
-import avifDataUrl from 'url-loader!./tiny.avif';
-
-// Give TypeScript the correct global.
-declare var self: ServiceWorkerGlobalScope;
-
-export function cacheOrNetwork(event: FetchEvent): void {
-  event.respondWith(
-    (async function () {
-      const cachedResponse = await caches.match(event.request, {
-        ignoreSearch: true,
-      });
-      return cachedResponse || fetch(event.request);
-    })(),
-  );
-}
-
-export function cacheOrNetworkAndCache(
-  event: FetchEvent,
-  cacheName: string,
-): void {
-  event.respondWith(
-    (async function () {
-      const { request } = event;
-      // Return from cache if possible.
-      const cachedResponse = await caches.match(request);
-      if (cachedResponse) return cachedResponse;
-
-      // Else go to the network.
-      const response = await fetch(request);
-      const responseToCache = response.clone();
-
-      event.waitUntil(
-        (async function () {
-          // Cache what we fetched.
-          const cache = await caches.open(cacheName);
-          await cache.put(request, responseToCache);
-        })(),
-      );
-
-      // Return the network response.
-      return response;
-    })(),
-  );
-}
-
-export function serveShareTarget(event: FetchEvent): void {
-  const dataPromise = event.request.formData();
-
-  // Redirect so the user can refresh the page without resending data.
-  // @ts-ignore It doesn't like me giving a response to respondWith, although it's allowed.
-  event.respondWith(Response.redirect('/?share-target'));
-
-  event.waitUntil(
-    (async function () {
-      // The page sends this message to tell the service worker it's ready to receive the file.
-      await nextMessage('share-ready');
-      const client = await self.clients.get(event.resultingClientId);
-      const data = await dataPromise;
-      const file = data.get('file');
-      client.postMessage({ file, action: 'load-image' });
-    })(),
-  );
-}
-
-export function cleanupCache(
-  event: FetchEvent,
-  cacheName: string,
-  keepAssets: string[],
-) {
-  event.waitUntil(
-    (async function () {
-      const cache = await caches.open(cacheName);
-
-      // Clean old entries from the dynamic cache.
-      const requests = await cache.keys();
-      const promises = requests.map((cachedRequest) => {
-        // Get pathname without leading /
-        const assetPath = new URL(cachedRequest.url).pathname.slice(1);
-        // If it isn't one of our keepAssets, we don't need it anymore.
-        if (!keepAssets.includes(assetPath)) return cache.delete(cachedRequest);
-      });
-
-      await Promise.all<any>(promises);
-    })(),
-  );
-}
-
-function getAssetsWithPrefix(assets: string[], prefixes: string[]) {
-  return assets.filter((asset) =>
-    prefixes.some((prefix) => asset.startsWith(prefix)),
-  );
-}
-
-export async function cacheBasics(cacheName: string, buildAssets: string[]) {
-  const toCache = ['/', '/assets/favicon.ico'];
-
-  const prefixesToCache = [
-    // Main app JS & CSS:
-    'main-app.',
-    // Service worker handler:
-    'offliner.',
-    // Little icons for the demo images on the homescreen:
-    'icon-demo-',
-    // Site logo:
-    'logo.',
-  ];
-
-  const prefixMatches = getAssetsWithPrefix(buildAssets, prefixesToCache);
-
-  toCache.push(...prefixMatches);
-
-  const cache = await caches.open(cacheName);
-  await cache.addAll(toCache);
-}
-
-export async function cacheAdditionalProcessors(
-  cacheName: string,
-  buildAssets: string[],
-) {
-  let toCache = [];
-
-  const prefixesToCache = [
-    // Worker which handles image processing:
-    'processor-worker.',
-    // processor-worker imports:
-    'process-',
-  ];
-
-  const prefixMatches = getAssetsWithPrefix(buildAssets, prefixesToCache);
-  const wasm = buildAssets.filter((asset) => asset.endsWith('.wasm'));
-
-  toCache.push(...prefixMatches, ...wasm);
-
-  const [supportsWebP, supportsAvif] = await Promise.all(
-    [webpDataUrl, avifDataUrl].map(async (dataUrl) => {
-      if (!self.createImageBitmap) return false;
-      const response = await fetch(dataUrl);
-      const blob = await response.blob();
-      return createImageBitmap(blob).then(
-        () => true,
-        () => false,
-      );
-    }),
-  );
-
-  // No point caching decoders the browser already supports:
-  toCache = toCache.filter(
-    (asset) =>
-      (supportsWebP ? !/webp[\-_]dec/.test(asset) : true) &&
-      (supportsAvif ? !/avif[\-_]dec/.test(asset) : true),
-  );
-
-  const cache = await caches.open(cacheName);
-  await cache.addAll(toCache);
-}
-
-const nextMessageResolveMap = new Map<string, (() => void)[]>();
-
-/**
- * Wait on a message with a particular event.data value.
- *
- * @param dataVal The event.data value.
- */
-function nextMessage(dataVal: string): Promise<void> {
-  return new Promise((resolve) => {
-    if (!nextMessageResolveMap.has(dataVal)) {
-      nextMessageResolveMap.set(dataVal, []);
-    }
-    nextMessageResolveMap.get(dataVal)!.push(resolve);
-  });
-}
-
-self.addEventListener('message', (event) => {
-  const resolvers = nextMessageResolveMap.get(event.data);
-  if (!resolvers) return;
-  nextMessageResolveMap.delete(event.data);
-  for (const resolve of resolvers) resolve();
-});