Update node-vibrant to v4 (#23718)

package.json

@@ -93,9 +93,7 @@
     "@thomasloven/round-slider": "0.6.0",
     "@vaadin/combo-box": "24.6.1",
     "@vaadin/vaadin-themable-mixin": "24.6.1",
-    "@vibrant/color": "3.2.1-alpha.1",
-    "@vibrant/core": "3.2.1-alpha.1",
-    "@vibrant/quantizer-mmcq": "3.2.1-alpha.1",
+    "@vibrant/color": "4.0.0",
     "@vue/web-component-wrapper": "1.3.0",
     "@webcomponents/scoped-custom-element-registry": "0.0.9",
     "@webcomponents/webcomponentsjs": "2.8.0",
@@ -128,7 +126,7 @@
     "luxon": "3.5.0",
     "marked": "15.0.6",
     "memoize-one": "6.0.0",
-    "node-vibrant": "3.2.1-alpha.1",
+    "node-vibrant": "4.0.1",
     "punycode": "2.3.1",
     "qr-scanner": "1.4.2",
     "qrcode": "1.5.4",

src/common/image/extract_color.ts

@@ -1,7 +1,7 @@
 // We import the minified bundle because the unminified bundle
 // has some quirks that break wds. See #7784 for unminified version.
 import type { Swatch, Vec3 } from "@vibrant/color";
-import Vibrant from "node-vibrant/dist/vibrant";
+import { Vibrant } from "node-vibrant/browser";
 import { getRGBContrastRatio } from "../color/rgb";
 
 const CONTRAST_RATIO = 4.5;
@@ -111,7 +111,7 @@ const customGenerator = (colors: Swatch[]) => {
   };
 };
 
-// Set our custom generator as the default.
+// @ts-expect-error
 Vibrant._pipeline.generator.register("default", customGenerator);
 
 export const extractColors = (url: string, downsampleColors = 16) =>