wip

# Conflicts:
#	codecs/cpp.Dockerfile
#	codecs/imagequant/example.html
#	codecs/webp/dec/webp_dec.d.ts
#	codecs/webp/dec/webp_dec.js
#	codecs/webp/dec/webp_dec.wasm
#	codecs/webp/enc/webp_enc.d.ts
#	codecs/webp/enc/webp_enc.js
#	codecs/webp/enc/webp_enc.wasm
#	package-lock.json
#	package.json
#	src/codecs/tiny.webp
#	src_old/codecs/encoders.ts
#	src_old/codecs/processor-worker/tiny.avif
#	src_old/codecs/processor-worker/tiny.webp
#	src_old/codecs/tiny.webp
#	src_old/components/compress/index.tsx
#	src_old/lib/util.ts
#	src_old/sw/util.ts

src_old/components/Output/custom-els/PinchZoom/index.ts

@@ -0,0 +1,376 @@
+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);

src_old/components/Output/custom-els/PinchZoom/missing-types.d.ts

@@ -0,0 +1,16 @@
+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;
+  }
+}

src_old/components/Output/custom-els/PinchZoom/styles.css

@@ -0,0 +1,14 @@
+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;
+}

src_old/components/Output/custom-els/TwoUp/index.ts

@@ -0,0 +1,171 @@
+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);

src_old/components/Output/custom-els/TwoUp/missing-types.d.ts

@@ -0,0 +1,52 @@
+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;
+};

src_old/components/Output/custom-els/TwoUp/styles.css

@@ -0,0 +1,131 @@
+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);
+  }
+}