Bump ansi-regex from 5.0.0 to 5.0.1 in /cli

Bumps [ansi-regex](https://github.com/chalk/ansi-regex) from 5.0.0 to 5.0.1.
- [Release notes](https://github.com/chalk/ansi-regex/releases)
- [Commits](https://github.com/chalk/ansi-regex/compare/v5.0.0...v5.0.1)

---
updated-dependencies:
- dependency-name: ansi-regex
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

cli/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # Squoosh CLI
 
 Squoosh CLI is an _experimental_ way to run all the codecs you know from the [Squoosh] web app on your command line using WebAssembly. The Squoosh CLI uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

cli/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/cli",
-      "version": "0.7.2",
+      "version": "0.7.3",
       "license": "Apache-2.0",
       "dependencies": {
         "@squoosh/lib": "^0.4.0",
@@ -36,9 +36,9 @@
       }
     },
     "node_modules/ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg==",
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==",
       "engines": {
         "node": ">=8"
       }
@@ -363,9 +363,9 @@
       }
     },
     "ansi-regex": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.0.tgz",
-      "integrity": "sha512-bY6fj56OUQ0hU1KjFNDQuJFezqKdrAyFdIevADiqrWHwSlbmBNMHp5ak2f40Pm8JTFyM2mqxkG6ngkHO11f/lg=="
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
+      "integrity": "sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ=="
     },
     "ansi-styles": {
       "version": "4.3.0",

cli/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/cli",
-  "version": "0.7.2",
+  "version": "0.7.3",
   "description": "A CLI for Squoosh",
   "public": true,
   "type": "module",

libsquoosh/README.md

@@ -1,3 +1,7 @@
+# Project no longer maintained
+
+Unfortunately, due to a few people leaving the team, and staffing issues resulting from the current economic climate (ugh), this package is no longer actively maintained. I know that sucks, but there simply isn't the time & people to work on this. If anyone from the community wants to fork it, you have my blessing. The [squoosh.app](https://squoosh.app) will continue to be supported and improved.
+
 # libSquoosh
 
 libSquoosh is an _experimental_ way to run all the codecs you know from the [Squoosh] web app directly inside your own JavaScript program. libSquoosh uses a worker pool to parallelize processing images. This way you can apply the same codec to many images at once.

libsquoosh/package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.4.0",
+  "version": "0.5.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@squoosh/lib",
-      "version": "0.4.0",
+      "version": "0.5.2",
       "license": "Apache-2.0",
       "dependencies": {
         "wasm-feature-detect": "^1.2.11",

libsquoosh/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squoosh/lib",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "A Node library for Squoosh",
   "public": true,
   "main": "./build/index.js",

src/client/lazy-app/Compress/Output/custom-els/TwoUp/styles.css

@@ -40,7 +40,8 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
 }
 
 .scrubber {
-  display: flex;
+  display: grid;
+  align-content: center;
   position: absolute;
   top: 50%;
   left: 50%;
@@ -54,10 +55,6 @@ two-up[legacy-clip-compat] > :not(.two-up-handle) {
   padding: 0 calc(var(--thumb-size) * 0.24);
 }
 
-.scrubber svg {
-  flex: 1;
-}
-
 .arrow-left {
   fill: var(--pink);
 }

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

@@ -49,6 +49,7 @@
   align-self: center;
   padding: 9px 66px;
   position: relative;
+  gap: 6px;
 
   /* Allow clicks to fall through to the pinch zoom area */
   pointer-events: none;
@@ -68,7 +69,6 @@
   display: flex;
   position: relative;
   z-index: 100;
-  margin: 0 3px;
 }
 
 .button,
@@ -95,6 +95,7 @@
 
 .button {
   color: #fff;
+  margin: 0;
 
   &:hover {
     background: rgba(50, 50, 50, 0.92);
@@ -114,7 +115,7 @@
 .last-button {
   composes: button;
   border-radius: 0 6px 6px 0;
-  border-left-width: 1px;
+  border-right-width: 1px;
 }
 
 .zoom {

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

@@ -114,7 +114,7 @@ async function decodeImage(
       }
     }
     // Otherwise fall through and try built-in decoding for a laugh.
-    return await builtinDecode(signal, blob, mimeType);
+    return await builtinDecode(signal, blob);
   } catch (err) {
     if (err instanceof Error && err.name === 'AbortError') throw err;
     console.log(err);

src/client/lazy-app/util/canvas.ts

@@ -63,35 +63,17 @@ interface DrawableToImageDataOptions {
   sh?: number;
 }
 
-function getWidth(
-  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
-): number {
-  if ('displayWidth' in drawable) {
-    return drawable.displayWidth;
-  }
-  return drawable.width;
-}
-
-function getHeight(
-  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
-): number {
-  if ('displayHeight' in drawable) {
-    return drawable.displayHeight;
-  }
-  return drawable.height;
-}
-
 export function drawableToImageData(
-  drawable: ImageBitmap | HTMLImageElement | VideoFrame,
+  drawable: ImageBitmap | HTMLImageElement,
   opts: DrawableToImageDataOptions = {},
 ): ImageData {
   const {
-    width = getWidth(drawable),
-    height = getHeight(drawable),
+    width = drawable.width,
+    height = drawable.height,
     sx = 0,
     sy = 0,
-    sw = getWidth(drawable),
-    sh = getHeight(drawable),
+    sw = drawable.width,
+    sh = drawable.height,
   } = opts;
 
   // Make canvas same size as image

src/client/lazy-app/util/index.ts

@@ -10,8 +10,6 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import * as WebCodecs from '../util/web-codecs';
 import { drawableToImageData } from './canvas';
 
 /** If render engine is Safari */
@@ -139,15 +137,7 @@ export async function blobToImg(blob: Blob): Promise<HTMLImageElement> {
 export async function builtinDecode(
   signal: AbortSignal,
   blob: Blob,
-  mimeType: string,
 ): Promise<ImageData> {
-  // If WebCodecs are supported, use that.
-  if (await WebCodecs.isTypeSupported(mimeType)) {
-    assertSignal(signal);
-    try {
-      return await abortable(signal, WebCodecs.decode(blob, mimeType));
-    } catch (e) {}
-  }
   assertSignal(signal);
 
   // Prefer createImageBitmap as it's the off-thread option for Firefox.

src/client/lazy-app/util/web-codecs/index.ts

@@ -1,33 +0,0 @@
-import { drawableToImageData } from '../canvas';
-
-const hasImageDecoder = typeof ImageDecoder !== 'undefined';
-
-export async function isTypeSupported(mimeType: string): Promise<boolean> {
-  if (!hasImageDecoder) return false;
-  // Some old versions of this API threw here.
-  // It only impacted folks with experimental web platform flags enabled in Chrome 90.
-  // The API was updated in Chrome 91.
-  try {
-    return await ImageDecoder.isTypeSupported(mimeType);
-  } catch (err) {
-    return false;
-  }
-}
-
-export async function decode(
-  blob: Blob | File,
-  mimeType: string,
-): Promise<ImageData> {
-  if (!hasImageDecoder) {
-    throw Error(
-      `This browser does not support ImageDecoder. This function should not have been called.`,
-    );
-  }
-  const decoder = new ImageDecoder({
-    type: mimeType,
-    // Non-obvious way to turn an Blob into a ReadableStream
-    data: new Response(blob).body!,
-  });
-  const { image } = await decoder.decode();
-  return drawableToImageData(image);
-}

src/client/lazy-app/util/web-codecs/missing-types.d.ts

@@ -1,60 +0,0 @@
-interface ImageDecoderInit {
-  type: string;
-  data: BufferSource | ReadableStream;
-  premultiplyAlpha?: PremultiplyAlpha;
-  colorSpaceConversion?: ColorSpaceConversion;
-  desiredWidth?: number;
-  desiredHeight?: number;
-  preferAnimation?: boolean;
-}
-
-interface ImageDecodeOptions {
-  frameIndex: number;
-  completeFramesOnly: boolean;
-}
-
-interface ImageDecodeResult {
-  image: VideoFrame;
-  complete: boolean;
-}
-
-// I didn’t do all the types because the class is kinda complex.
-// I focused on what we need.
-// See https://w3c.github.io/webcodecs/#videoframe
-declare class VideoFrame {
-  displayWidth: number;
-  displayHeight: number;
-}
-
-// Add VideoFrame to canvas’ drawImage()
-interface CanvasDrawImage {
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    dx: number,
-    dy: number,
-  ): void;
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    dx: number,
-    dy: number,
-    dw: number,
-    dh: number,
-  ): void;
-  drawImage(
-    image: CanvasImageSource | VideoFrame,
-    sx: number,
-    sy: number,
-    sw: number,
-    sh: number,
-    dx: number,
-    dy: number,
-    dw: number,
-    dh: number,
-  ): void;
-}
-
-declare class ImageDecoder {
-  static isTypeSupported(type: string): Promise<boolean>;
-  constructor(desc: ImageDecoderInit);
-  decode(opts?: Partial<ImageDecodeOptions>): Promise<ImageDecodeResult>;
-}

src/static-build/index.tsx

@@ -19,15 +19,39 @@ import * as iconLarge from 'img-url:static-build/assets/icon-large.png';
 import * as screenshot1 from 'img-url:static-build/assets/screenshot1.png';
 import * as screenshot2 from 'img-url:static-build/assets/screenshot2.jpg';
 import * as screenshot3 from 'img-url:static-build/assets/screenshot3.jpg';
+import * as screenshot4 from 'img-url:static-build/assets/screenshot4.png';
+import * as screenshot5 from 'img-url:static-build/assets/screenshot5.jpg';
+import * as screenshot6 from 'img-url:static-build/assets/screenshot6.jpg';
 import dedent from 'dedent';
 import { lookup as lookupMime } from 'mime-types';
 
-const manifestSize = ({ width, height }: { width: number; height: number }) =>
-  `${width}x${height}`;
+interface Dimensions {
+  width: number;
+  height: number;
+}
+
+const manifestSize = ({ width, height }: Dimensions) => `${width}x${height}`;
+const formFactor = ({ width, height }: Dimensions) =>
+  width > height ? 'wide' : 'narrow';
+
+const screenshots = [
+  screenshot1,
+  screenshot2,
+  screenshot3,
+  screenshot4,
+  screenshot5,
+  screenshot6,
+].map((screenshot) => ({
+  src: screenshot.default,
+  type: lookupMime(screenshot.default),
+  sizes: manifestSize(screenshot),
+  form_factor: formFactor(screenshot),
+}));
 
 interface Output {
   [outputPath: string]: string;
 }
+
 const toOutput: Output = {
   'index.html': renderPage(<IndexPage />),
   'manifest.json': JSON.stringify({
@@ -55,23 +79,7 @@ const toOutput: Output = {
       'Compress and compare images with different codecs, right in your browser.',
     lang: 'en',
     categories: ['photo', 'productivity', 'utilities'],
-    screenshots: [
-      {
-        src: screenshot1.default,
-        type: lookupMime(screenshot1.default),
-        sizes: manifestSize(screenshot1),
-      },
-      {
-        src: screenshot2.default,
-        type: lookupMime(screenshot2.default),
-        sizes: manifestSize(screenshot2),
-      },
-      {
-        src: screenshot3.default,
-        type: lookupMime(screenshot3.default),
-        sizes: manifestSize(screenshot3),
-      },
-    ],
+    screenshots,
     share_target: {
       action: '/?utm_medium=PWA&utm_source=share-target&share-target',
       method: 'POST',