@shopify/react-native-skia 2.5.0 → 2.5.2

package/android/CMakeLists.txt

@@ -4,7 +4,7 @@ cmake_minimum_required(VERSION 3.4.1)
 set (CMAKE_VERBOSE_MAKEFILE ON)
 set (CMAKE_CXX_STANDARD 20)
 
-# SKIA_LIBS_PATH is passed from Gradle (resolved via Node.js package resolution)
+# SKIA_LIBS_PATH is passed from Gradle (pointing to libs/android/, populated by npm postinstall)
 # Append the ABI to get the full path
 set (SKIA_LIBS_PATH "${SKIA_LIBS_PATH}/${ANDROID_ABI}")
 
@@ -17,14 +17,12 @@ if(NOT EXISTS "${SKIA_LIBS_PATH}/libskia.a")
     message("│                                                                             │")
     message("│  Could not find libskia.a at: ${SKIA_LIBS_PATH}                             │")
     message("│                                                                             │")
-    message("│  Make sure react-native-skia-android is installed:                          │")
-    message("│    yarn add react-native-skia-android                                       │")
-    message("│                                                                             │")
-    message("│  See: https://shopify.github.io/react-native-skia/docs/getting-started/installation │")
+    message("│  Run the following command to install them:                                  │")
+    message("│    npx install-skia                                                         │")
     message("│                                                                             │")
     message("└─────────────────────────────────────────────────────────────────────────────┘")
     message("")
-    message(FATAL_ERROR "Skia prebuilt binaries not found at ${SKIA_LIBS_PATH}")
+    message(FATAL_ERROR "Skia prebuilt binaries not found. Run `npx install-skia` to fix this.")
 endif()
 
 # Import libskia

package/android/build.gradle

@@ -56,41 +56,15 @@ static def findNodeModules(baseDir) {
   throw new GradleException("React-Native-Skia: Failed to find node_modules/ path!")
 }
 
-// Resolve npm package path using Node.js resolution (handles monorepos, pnpm, etc.)
-def resolveSkiaPackage(packageName) {
-  def cmdResult = providers.exec {
-    commandLine "node", "-e", "console.log(require.resolve('${packageName}/package.json'))"
-    ignoreExitValue = true
-  }
-
-  if (cmdResult.result.get().exitValue == 0) {
-    def packageJsonPath = cmdResult.standardOutput.asText.get().trim()
-    return new File(packageJsonPath).parent
-  }
-
-  // Fallback: walk up directories looking for node_modules
-  def basePath = projectDir.toPath().normalize()
-  while (basePath) {
-    def candidate = Paths.get(basePath.toString(), "node_modules", packageName)
-    if (candidate.toFile().exists() && new File(candidate.toString(), "package.json").exists()) {
-      return candidate.toString()
-    }
-    basePath = basePath.getParent()
-  }
-
-  throw new GradleException("React-Native-Skia: Could not find ${packageName}. Make sure you have run 'yarn install' or 'npm install'.")
-}
-
 def nodeModules = findNodeModules(projectDir)
 
-// Resolve Skia Android package
-def useGraphite = System.getenv("SK_GRAPHITE") == "1" || System.getenv("SK_GRAPHITE") == "true"
-def skiaPackageName = useGraphite ? "react-native-skia-graphite-android" : "react-native-skia-android"
-def skiaAndroidPackage = resolveSkiaPackage(skiaPackageName)
-def skiaLibsPath = "${skiaAndroidPackage}/libs"
+// Skia prebuilt libs are copied into libs/android/ by the npm postinstall script
+// Graphite is detected via marker file created by install-skia-graphite
+def useGraphite = file("${projectDir}/../libs/.graphite").exists()
+def skiaLibsPath = "${projectDir}/../libs/android"
 
 logger.warn("react-native-skia: SK_GRAPHITE: ${useGraphite}")
-logger.warn("react-native-skia: Skia Android package: ${skiaAndroidPackage}")
+logger.warn("react-native-skia: Skia libs: ${skiaLibsPath}")
 logger.warn("react-native-skia: node_modules/ found at: ${nodeModules}")
 
 def sourceBuild = false
@@ -292,7 +266,6 @@ repositories {
         }
     }
     google()
-    maven { url 'https://www.jitpack.io' }
 }
 
 dependencies {

package/android/cpp/rnskia-android/OpenGLContext.h

@@ -58,7 +58,8 @@ public:
     return instance;
   }
 
-  sk_sp<SkSurface> MakeOffscreen(int width, int height) {
+  sk_sp<SkSurface> MakeOffscreen(int width, int height,
+                                  bool useP3ColorSpace = false) {
     auto colorType = kRGBA_8888_SkColorType;
 
     SkSurfaceProps props(0, kUnknown_SkPixelGeometry);
@@ -89,10 +90,16 @@ public:
     auto releaseCtx = new ReleaseContext{.directContext = _directContext.get(),
                                          .texture = texture};
 
+    sk_sp<SkColorSpace> colorSpace =
+        useP3ColorSpace
+            ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                    SkNamedGamut::kDisplayP3)
+            : nullptr;
+
     // Create a SkSurface from the GrBackendTexture
     return SkSurfaces::WrapBackendTexture(
         _directContext.get(), texture, kTopLeft_GrSurfaceOrigin, 0, colorType,
-        nullptr, &props,
+        colorSpace, &props,
         [](void *addr) {
           auto releaseCtx = reinterpret_cast<ReleaseContext *>(addr);
           releaseCtx->directContext->deleteBackendTexture(releaseCtx->texture);

package/android/cpp/rnskia-android/RNSkAndroidPlatformContext.h

@@ -50,11 +50,14 @@ public:
     _jniPlatformContext->raiseError(err);
   }
 
-  sk_sp<SkSurface> makeOffscreenSurface(int width, int height) override {
+  sk_sp<SkSurface> makeOffscreenSurface(int width, int height,
+                                         bool useP3ColorSpace = false) override {
 #if defined(SK_GRAPHITE)
-    return DawnContext::getInstance().MakeOffscreen(width, height);
+    return DawnContext::getInstance().MakeOffscreen(width, height,
+                                                    useP3ColorSpace);
 #else
-    return OpenGLContext::getInstance().MakeOffscreen(width, height);
+    return OpenGLContext::getInstance().MakeOffscreen(width, height,
+                                                      useP3ColorSpace);
 #endif
   }
 

package/apple/MetalContext.h

@@ -13,6 +13,7 @@
 #import <include/gpu/ganesh/mtl/GrMtlBackendSurface.h>
 #import <include/gpu/ganesh/mtl/GrMtlDirectContext.h>
 #import <include/gpu/ganesh/mtl/SkSurfaceMetal.h>
+#include "include/core/SkColorSpace.h"
 
 struct OffscreenRenderContext {
   id<MTLTexture> texture;
@@ -44,7 +45,8 @@ public:
     return instance;
   }
 
-  sk_sp<SkSurface> MakeOffscreen(int width, int height) {
+  sk_sp<SkSurface> MakeOffscreen(int width, int height,
+                                  bool useP3ColorSpace = false) {
     auto device = _device;
     auto ctx = new OffscreenRenderContext(device, _directContext, _commandQueue,
                                           width, height);
@@ -55,10 +57,16 @@ public:
     GrBackendTexture backendTexture =
         GrBackendTextures::MakeMtl(width, height, skgpu::Mipmapped::kNo, info);
 
+    sk_sp<SkColorSpace> colorSpace =
+        useP3ColorSpace
+            ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                    SkNamedGamut::kDisplayP3)
+            : nullptr;
+
     // Create a SkSurface from the GrBackendTexture
     auto surface = SkSurfaces::WrapBackendTexture(
         _directContext.get(), backendTexture, kTopLeft_GrSurfaceOrigin, 0,
-        kBGRA_8888_SkColorType, nullptr, nullptr,
+        kBGRA_8888_SkColorType, colorSpace, nullptr,
         [](void *addr) { delete (OffscreenRenderContext *)addr; }, ctx);
 
     return surface;

package/apple/MetalWindowContext.h

@@ -36,4 +36,5 @@ private:
   CAMetalLayer *_layer;
 #pragma clang diagnostic pop
   id<CAMetalDrawable> _currentDrawable = nil;
+  bool _useP3ColorSpace = false;
 };

package/apple/MetalWindowContext.mm

@@ -2,6 +2,7 @@
 
 #include "MetalContext.h"
 #include "RNSkLog.h"
+#include "include/core/SkColorSpace.h"
 
 MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
                                        id<MTLDevice> device,
@@ -46,6 +47,7 @@ MetalWindowContext::MetalWindowContext(GrDirectContext *directContext,
         CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
     _layer.colorspace = colorSpace;
     CGColorSpaceRelease(colorSpace);
+    _useP3ColorSpace = true;
   }
 }
 
@@ -69,9 +71,14 @@ sk_sp<SkSurface> MetalWindowContext::getSurface() {
   GrBackendRenderTarget backendRT = GrBackendRenderTargets::MakeMtl(
       _layer.drawableSize.width, _layer.drawableSize.height, fbInfo);
 
+  sk_sp<SkColorSpace> skColorSpace =
+      _useP3ColorSpace
+          ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                  SkNamedGamut::kDisplayP3)
+          : nullptr;
   _skSurface = SkSurfaces::WrapBackendRenderTarget(
       _directContext, backendRT, kTopLeft_GrSurfaceOrigin,
-      kBGRA_8888_SkColorType, nullptr, nullptr);
+      kBGRA_8888_SkColorType, skColorSpace, nullptr);
 
   return _skSurface;
 }

package/apple/RNSkApplePlatformContext.h

@@ -69,7 +69,8 @@ public:
       const std::function<void(std::unique_ptr<SkStreamAsset>)> &op) override;
 
   void raiseError(const std::exception &err) override;
-  sk_sp<SkSurface> makeOffscreenSurface(int width, int height) override;
+  sk_sp<SkSurface> makeOffscreenSurface(int width, int height,
+                                         bool useP3ColorSpace = false) override;
 
   sk_sp<SkFontMgr> createFontMgr() override;
 

package/apple/RNSkApplePlatformContext.mm

@@ -251,12 +251,14 @@ void RNSkApplePlatformContext::raiseError(const std::exception &err) {
   RCTFatal(RCTErrorWithMessage([NSString stringWithUTF8String:err.what()]));
 }
 
-sk_sp<SkSurface> RNSkApplePlatformContext::makeOffscreenSurface(int width,
-                                                                int height) {
+sk_sp<SkSurface> RNSkApplePlatformContext::makeOffscreenSurface(
+    int width, int height, bool useP3ColorSpace) {
 #if defined(SK_GRAPHITE)
-  return DawnContext::getInstance().MakeOffscreen(width, height);
+  return DawnContext::getInstance().MakeOffscreen(width, height,
+                                                   useP3ColorSpace);
 #else
-  return MetalContext::getInstance().MakeOffscreen(width, height);
+  return MetalContext::getInstance().MakeOffscreen(width, height,
+                                                   useP3ColorSpace);
 #endif
 }
 

package/apple/SkiaPictureView.mm

@@ -58,6 +58,9 @@ using namespace facebook::react;
   if (newProps.colorSpace == "" || newProps.colorSpace == "srgb") {
     bool useP3 = false;
     [self setUseP3ColorSpace:useP3];
+  } else if (newProps.colorSpace == "p3") {
+    bool useP3 = true;
+    [self setUseP3ColorSpace:useP3];
   }
 }
 

package/cpp/api/JsiSkImage.h

@@ -35,6 +35,75 @@
 
 #include <jsi/jsi.h>
 
+#ifdef __APPLE__
+#include <CoreFoundation/CoreFoundation.h>
+#include <CoreGraphics/CoreGraphics.h>
+#include <cstring>
+
+// Replaces Skia's generated "Display P3 Gamut with sRGB Transfer" (Google/Skia
+// copyright) ICC profile in a JPEG with Apple's canonical Display P3 ICC bytes
+// from CGColorSpace.displayP3. This is needed because apps like Instagram only
+// recognise the canonical Apple profile, not Skia's mathematically equivalent
+// but non-standard one. Pixel values are untouched — zero quality loss.
+static sk_sp<SkData> replaceJpegICCWithAppleP3(sk_sp<SkData> jpegData) {
+  if (!jpegData || jpegData->size() < 4) return jpegData;
+
+  const uint8_t *src = jpegData->bytes();
+  size_t srcLen = jpegData->size();
+  if (src[0] != 0xFF || src[1] != 0xD8) return jpegData; // not a JPEG
+
+  CGColorSpaceRef p3 = CGColorSpaceCreateWithName(kCGColorSpaceDisplayP3);
+  if (!p3) return jpegData;
+  CFDataRef cfICC = CGColorSpaceCopyICCData(p3);
+  CGColorSpaceRelease(p3);
+  if (!cfICC) return jpegData;
+
+  const uint8_t *iccBytes = CFDataGetBytePtr(cfICC);
+  size_t iccLen = (size_t)CFDataGetLength(cfICC);
+
+  // "ICC_PROFILE\0" APP2 marker signature (12 bytes)
+  static const uint8_t iccSig[] = {0x49, 0x43, 0x43, 0x5F, 0x50, 0x52,
+                                    0x4F, 0x46, 0x49, 0x4C, 0x45, 0x00};
+
+  SkDynamicMemoryWStream out;
+
+  out.write(src, 2); // SOI
+
+  // Structure: marker(2) + length(2) + "ICC_PROFILE\0"(12) + chunk[1,1](2) + profile
+  size_t iccContentLen = sizeof(iccSig) + 2 + iccLen;
+  size_t segLen = iccContentLen + 2; // length field includes itself
+  uint8_t app2hdr[4] = {0xFF, 0xE2, (uint8_t)(segLen >> 8),
+                        (uint8_t)(segLen & 0xFF)};
+  uint8_t chunkInfo[2] = {0x01, 0x01}; // chunk 1 of 1
+  out.write(app2hdr, 4);
+  out.write(iccSig, sizeof(iccSig));
+  out.write(chunkInfo, 2);
+  out.write(iccBytes, iccLen);
+
+  // Copy all header segments except any existing ICC APP2
+  size_t i = 2;
+  while (i + 3 < srcLen) {
+    if (src[i] != 0xFF) break;
+    uint8_t marker = src[i + 1];
+    if (marker == 0xDA || marker == 0xD9) break; // SOS / EOI
+    size_t segLenVal = (size_t(src[i + 2]) << 8) | src[i + 3];
+    size_t end = i + 2 + segLenVal;
+    if (end > srcLen) break;
+    bool isICC = marker == 0xE2 && end > i + 4 + sizeof(iccSig) &&
+                 memcmp(src + i + 4, iccSig, sizeof(iccSig)) == 0;
+    if (!isICC) {
+      out.write(src + i, end - i);
+    }
+    i = end;
+  }
+
+  out.write(src + i, srcLen - i);
+
+  CFRelease(cfICC);
+  return out.detachAsData();
+}
+#endif // __APPLE__
+
 namespace RNSkia {
 
 namespace jsi = facebook::jsi;
@@ -138,6 +207,13 @@ public:
       SkJpegEncoder::Options options;
       options.fQuality = quality;
       data = SkJpegEncoder::Encode(nullptr, image.get(), options);
+#ifdef __APPLE__
+      // Replace Skia's generated ICC with Apple's canonical Display P3 profile
+      // so apps like Instagram recognise the wide-gamut colour space.
+      if (data && image->colorSpace() && !image->colorSpace()->isSRGB()) {
+        data = replaceJpegICCWithAppleP3(data);
+      }
+#endif
     } else if (format == SkEncodedImageFormat::kWEBP) {
       SkWebpEncoder::Options options;
       if (quality >= 100) {

package/cpp/api/JsiSkSurfaceFactory.h

@@ -39,8 +39,19 @@ public:
   JSI_HOST_FUNCTION(MakeOffscreen) {
     auto width = static_cast<int>(arguments[0].asNumber());
     auto height = static_cast<int>(arguments[1].asNumber());
+    bool useP3ColorSpace = false;
+    if (count >= 3 && arguments[2].isObject()) {
+      auto opts = arguments[2].asObject(runtime);
+      if (opts.hasProperty(runtime, "colorSpace")) {
+        auto colorSpaceVal = opts.getProperty(runtime, "colorSpace");
+        if (colorSpaceVal.isString()) {
+          useP3ColorSpace =
+              colorSpaceVal.asString(runtime).utf8(runtime) == "display-p3";
+        }
+      }
+    }
     auto context = getContext();
-    auto surface = context->makeOffscreenSurface(width, height);
+    auto surface = context->makeOffscreenSurface(width, height, useP3ColorSpace);
     if (surface == nullptr) {
       return jsi::Value::null();
     }

package/cpp/api/recorder/Drawings.h

@@ -935,7 +935,7 @@ public:
     convertProperty(runtime, object, "sprites", props.sprites, variables);
     convertProperty(runtime, object, "transforms", props.transforms, variables);
     convertProperty(runtime, object, "colors", props.colors, variables);
-    convertProperty(runtime, object, "blendMode", props.blendMode, variables);
+    convertProperty(runtime, object, "colorBlendMode", props.blendMode, variables);
     convertProperty(runtime, object, "sampling", props.sampling, variables);
   }
 

package/cpp/rnskia/RNDawnContext.h

@@ -7,6 +7,7 @@
 #include "RNDawnWindowContext.h"
 #include "RNImageProvider.h"
 
+#include "include/core/SkColorSpace.h"
 #include "include/core/SkData.h"
 #include "include/gpu/graphite/BackendTexture.h"
 #include "include/gpu/graphite/Context.h"
@@ -162,9 +163,16 @@ public:
   }
 
   // Create offscreen surface
-  sk_sp<SkSurface> MakeOffscreen(int width, int height) {
+  sk_sp<SkSurface> MakeOffscreen(int width, int height,
+                                  bool useP3ColorSpace = false) {
+    sk_sp<SkColorSpace> colorSpace =
+        useP3ColorSpace
+            ? SkColorSpace::MakeRGB(SkNamedTransferFn::kSRGB,
+                                    SkNamedGamut::kDisplayP3)
+            : nullptr;
     SkImageInfo info = SkImageInfo::Make(
-        width, height, DawnUtils::PreferedColorType, kPremul_SkAlphaType);
+        width, height, DawnUtils::PreferedColorType, kPremul_SkAlphaType,
+        colorSpace);
     sk_sp<SkSurface> surface = SkSurfaces::RenderTarget(getRecorder(), info);
 
     if (!surface) {
@@ -303,6 +311,20 @@ public:
         getRecorder(), backendContext.fDevice, surface, width, height);
   }
 
+  skgpu::graphite::Recorder *getRecorder() {
+    static thread_local skgpu::graphite::RecorderOptions recorderOptions;
+    if (!recorderOptions.fImageProvider) {
+      auto imageProvider = ImageProvider::Make();
+      recorderOptions.fImageProvider = imageProvider;
+    }
+    static thread_local auto recorder =
+        fGraphiteContext->makeRecorder(recorderOptions);
+    if (!recorder) {
+      throw std::runtime_error("Failed to create graphite context");
+    }
+    return recorder.get();
+  }
+
 private:
   std::unique_ptr<dawn::native::Instance> instance;
   std::unique_ptr<skgpu::graphite::Context> fGraphiteContext;
@@ -346,20 +368,6 @@ private:
       backendContext.fTick(backendContext.fInstance);
     }
   }
-
-  skgpu::graphite::Recorder *getRecorder() {
-    static thread_local skgpu::graphite::RecorderOptions recorderOptions;
-    if (!recorderOptions.fImageProvider) {
-      auto imageProvider = ImageProvider::Make();
-      recorderOptions.fImageProvider = imageProvider;
-    }
-    static thread_local auto recorder =
-        fGraphiteContext->makeRecorder(recorderOptions);
-    if (!recorder) {
-      throw std::runtime_error("Failed to create graphite context");
-    }
-    return recorder.get();
-  }
 };
 
 } // namespace RNSkia

package/cpp/rnskia/RNDawnUtils.h

@@ -177,6 +177,18 @@ createDawnBackendContext(dawn::native::Instance *instance) {
   if (adapter.HasFeature(wgpu::FeatureName::SharedTextureMemoryIOSurface)) {
     features.push_back(wgpu::FeatureName::SharedTextureMemoryIOSurface);
   }
+  if (adapter.HasFeature(wgpu::FeatureName::DawnMultiPlanarFormats)) {
+    features.push_back(wgpu::FeatureName::DawnMultiPlanarFormats);
+  }
+  if (adapter.HasFeature(wgpu::FeatureName::MultiPlanarFormatP010)) {
+    features.push_back(wgpu::FeatureName::MultiPlanarFormatP010);
+  }
+  if (adapter.HasFeature(wgpu::FeatureName::MultiPlanarFormatP210)) {
+    features.push_back(wgpu::FeatureName::MultiPlanarFormatP210);
+  }
+  if (adapter.HasFeature(wgpu::FeatureName::MultiPlanarFormatExtendedUsages)) {
+    features.push_back(wgpu::FeatureName::MultiPlanarFormatExtendedUsages);
+  }
 #else
   if (adapter.HasFeature(
           wgpu::FeatureName::SharedTextureMemoryAHardwareBuffer)) {

package/cpp/rnskia/RNSkPlatformContext.h

@@ -90,9 +90,11 @@ public:
    * Creates an offscreen surface
    * @param width Width of the offscreen surface
    * @param height Height of the offscreen surface
+   * @param useP3ColorSpace If true, surface will use Display P3 color space
    * @return sk_sp<SkSurface>
    */
-  virtual sk_sp<SkSurface> makeOffscreenSurface(int width, int height) = 0;
+  virtual sk_sp<SkSurface> makeOffscreenSurface(int width, int height,
+                                                 bool useP3ColorSpace = false) = 0;
 
   virtual std::shared_ptr<WindowContext>
   makeContextFromNativeSurface(void *surface, int width, int height) = 0;

package/lib/commonjs/dom/types/Drawings.d.ts

@@ -28,6 +28,7 @@ export interface AtlasProps extends DrawingNodeProps {
     sprites: SkRect[];
     transforms: SkRSXform[];
     colors?: SkColor[];
+    colorBlendMode?: SkEnum<typeof BlendMode>;
     sampling?: SamplingOptions;
 }
 export interface CubicBezierHandle {

package/lib/commonjs/dom/types/Drawings.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n  FillType,\n  SkImage,\n  StrokeOpts,\n  Vector,\n  Color,\n  SkPoint,\n  BlendMode,\n  PointMode,\n  VertexMode,\n  SkFont,\n  SkRRect,\n  SkTextBlob,\n  SkPicture,\n  SkSVG,\n  SkPaint,\n  SkRect,\n  SkRSXform,\n  SkColor,\n  SamplingOptions,\n  SkSkottieAnimation,\n  SkImageFilter,\n} from \"../../skia/types\";\n\nimport type {\n  CircleDef,\n  Fit,\n  GroupProps,\n  PathDef,\n  RectDef,\n  RRectDef,\n  SkEnum,\n} from \"./Common\";\n\nexport interface DrawingNodeProps extends GroupProps {\n  paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n  RectDef & {\n    fit?: Fit;\n    image: SkImage | null;\n    sampling?: SamplingOptions;\n  };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n  p1: Vector;\n  p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface AtlasProps extends DrawingNodeProps {\n  image: SkImage | null;\n  sprites: SkRect[];\n  transforms: SkRSXform[];\n  colors?: SkColor[];\n  sampling?: SamplingOptions;\n}\n\nexport interface CubicBezierHandle {\n  pos: Vector;\n  c1: Vector;\n  c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n  colors?: Color[];\n  patch: [\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n  ];\n  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n  blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n  colors?: string[];\n  vertices: SkPoint[];\n  textures?: SkPoint[];\n  mode: SkEnum<typeof VertexMode>;\n  blendMode?: SkEnum<typeof BlendMode>;\n  indices?: number[];\n}\n\nexport interface ImageSVGProps extends DrawingNodeProps {\n  svg: SkSVG | null;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  rect?: SkRect;\n}\n\nexport interface SkottieProps extends DrawingNodeProps {\n  animation: SkSkottieAnimation;\n  frame: number;\n}\n\nexport interface PictureProps extends DrawingNodeProps {\n  picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n  points: SkPoint[];\n  mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n  inner: SkRRect;\n  outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  path: PathDef;\n  initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n  blob: SkTextBlob;\n  x: number;\n  y: number;\n}\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n  font: SkFont | null;\n  x: number;\n  y: number;\n  glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n  box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n\nexport interface ImageFilterProps extends GroupProps {\n  filter: SkImageFilter;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":[],"sources":["Drawings.ts"],"sourcesContent":["import type {\n  FillType,\n  SkImage,\n  StrokeOpts,\n  Vector,\n  Color,\n  SkPoint,\n  BlendMode,\n  PointMode,\n  VertexMode,\n  SkFont,\n  SkRRect,\n  SkTextBlob,\n  SkPicture,\n  SkSVG,\n  SkPaint,\n  SkRect,\n  SkRSXform,\n  SkColor,\n  SamplingOptions,\n  SkSkottieAnimation,\n  SkImageFilter,\n} from \"../../skia/types\";\n\nimport type {\n  CircleDef,\n  Fit,\n  GroupProps,\n  PathDef,\n  RectDef,\n  RRectDef,\n  SkEnum,\n} from \"./Common\";\n\nexport interface DrawingNodeProps extends GroupProps {\n  paint?: SkPaint;\n}\n\nexport type ImageProps = DrawingNodeProps &\n  RectDef & {\n    fit?: Fit;\n    image: SkImage | null;\n    sampling?: SamplingOptions;\n  };\n\nexport type CircleProps = CircleDef & DrawingNodeProps;\n\nexport interface PathProps extends DrawingNodeProps {\n  path: PathDef;\n  start: number;\n  end: number;\n  stroke?: StrokeOpts;\n  fillType?: SkEnum<typeof FillType>;\n}\n\nexport interface LineProps extends DrawingNodeProps {\n  p1: Vector;\n  p2: Vector;\n}\n\nexport type OvalProps = RectDef & DrawingNodeProps;\n\nexport type RectProps = RectDef & DrawingNodeProps;\n\nexport type RoundedRectProps = RRectDef & DrawingNodeProps;\n\nexport interface AtlasProps extends DrawingNodeProps {\n  image: SkImage | null;\n  sprites: SkRect[];\n  transforms: SkRSXform[];\n  colors?: SkColor[];\n  colorBlendMode?: SkEnum<typeof BlendMode>;\n  sampling?: SamplingOptions;\n}\n\nexport interface CubicBezierHandle {\n  pos: Vector;\n  c1: Vector;\n  c2: Vector;\n}\n\nexport interface PatchProps extends DrawingNodeProps {\n  colors?: Color[];\n  patch: [\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n    CubicBezierHandle,\n  ];\n  texture?: readonly [SkPoint, SkPoint, SkPoint, SkPoint];\n  blendMode?: SkEnum<typeof BlendMode>;\n}\n\nexport interface VerticesProps extends DrawingNodeProps {\n  colors?: string[];\n  vertices: SkPoint[];\n  textures?: SkPoint[];\n  mode: SkEnum<typeof VertexMode>;\n  blendMode?: SkEnum<typeof BlendMode>;\n  indices?: number[];\n}\n\nexport interface ImageSVGProps extends DrawingNodeProps {\n  svg: SkSVG | null;\n  x?: number;\n  y?: number;\n  width?: number;\n  height?: number;\n  rect?: SkRect;\n}\n\nexport interface SkottieProps extends DrawingNodeProps {\n  animation: SkSkottieAnimation;\n  frame: number;\n}\n\nexport interface PictureProps extends DrawingNodeProps {\n  picture: SkPicture;\n}\n\nexport interface PointsProps extends DrawingNodeProps {\n  points: SkPoint[];\n  mode: SkEnum<typeof PointMode>;\n}\n\nexport interface DiffRectProps extends DrawingNodeProps {\n  inner: SkRRect;\n  outer: SkRRect;\n}\n\nexport interface TextProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  x: number;\n  y: number;\n}\n\nexport interface TextPathProps extends DrawingNodeProps {\n  font: SkFont | null;\n  text: string;\n  path: PathDef;\n  initialOffset: number;\n}\n\nexport interface TextBlobProps extends DrawingNodeProps {\n  blob: SkTextBlob;\n  x: number;\n  y: number;\n}\n\nexport interface Glyph {\n  id: number;\n  pos: SkPoint;\n}\n\nexport interface GlyphsProps extends DrawingNodeProps {\n  font: SkFont | null;\n  x: number;\n  y: number;\n  glyphs: Glyph[];\n}\n\nexport interface BoxProps extends DrawingNodeProps {\n  box: SkRRect | SkRect;\n}\n\nexport interface BoxShadowProps {\n  dx?: number;\n  dy?: number;\n  spread?: number;\n  blur: number;\n  color?: Color;\n  inner?: boolean;\n}\n\nexport interface ImageFilterProps extends GroupProps {\n  filter: SkImageFilter;\n}\n"],"mappings":"","ignoreList":[]}

package/lib/commonjs/skia/types/Surface/SurfaceFactory.d.ts

@@ -1,4 +1,12 @@
 import type { SkSurface } from "./Surface";
+export declare const ColorSpace: {
+    readonly SRGB: "srgb";
+    readonly DisplayP3: "display-p3";
+};
+export type ColorSpaceValue = (typeof ColorSpace)[keyof typeof ColorSpace];
+export interface SurfaceOptions {
+    colorSpace: ColorSpaceValue;
+}
 export interface SurfaceFactory {
     /**
      * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul
@@ -12,6 +20,7 @@ export interface SurfaceFactory {
      * Creates a GPU backed surface.
      * @param width - number of pixels of the width of the drawable area.
      * @param height - number of pixels of the height of the drawable area.
+     * @param opts - optional surface options (e.g. colorSpace: "display-p3" | "srgb").
      */
-    MakeOffscreen: (width: number, height: number) => SkSurface | null;
+    MakeOffscreen: (width: number, height: number, opts?: SurfaceOptions) => SkSurface | null;
 }

package/lib/commonjs/skia/types/Surface/SurfaceFactory.js

@@ -3,4 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.ColorSpace = void 0;
+const ColorSpace = exports.ColorSpace = {
+  SRGB: "srgb",
+  DisplayP3: "display-p3"
+};
 //# sourceMappingURL=SurfaceFactory.js.map

package/lib/commonjs/skia/types/Surface/SurfaceFactory.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["SurfaceFactory.ts"],"sourcesContent":["import type { SkSurface } from \"./Surface\";\n\nexport interface SurfaceFactory {\n  /**\n   * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul\n   * alphaType and 8888 color type. The pixels belonging to this surface  will be in memory and\n   * not visible.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  Make: (width: number, height: number) => SkSurface | null;\n\n  /**\n   * Creates a GPU backed surface.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  MakeOffscreen: (width: number, height: number) => SkSurface | null;\n}\n"],"mappings":"","ignoreList":[]}
+{"version":3,"names":["ColorSpace","exports","SRGB","DisplayP3"],"sources":["SurfaceFactory.ts"],"sourcesContent":["import type { SkSurface } from \"./Surface\";\n\nexport const ColorSpace = {\n  SRGB: \"srgb\",\n  DisplayP3: \"display-p3\",\n} as const;\n\nexport type ColorSpaceValue = (typeof ColorSpace)[keyof typeof ColorSpace];\n\nexport interface SurfaceOptions {\n  colorSpace: ColorSpaceValue;\n}\n\nexport interface SurfaceFactory {\n  /**\n   * Returns a CPU backed surface with the given dimensions, an SRGB colorspace, Unpremul\n   * alphaType and 8888 color type. The pixels belonging to this surface  will be in memory and\n   * not visible.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   */\n  Make: (width: number, height: number) => SkSurface | null;\n\n  /**\n   * Creates a GPU backed surface.\n   * @param width - number of pixels of the width of the drawable area.\n   * @param height - number of pixels of the height of the drawable area.\n   * @param opts - optional surface options (e.g. colorSpace: \"display-p3\" | \"srgb\").\n   */\n  MakeOffscreen: (width: number, height: number, opts?: SurfaceOptions) => SkSurface | null;\n}\n"],"mappings":";;;;;;AAEO,MAAMA,UAAU,GAAAC,OAAA,CAAAD,UAAA,GAAG;EACxBE,IAAI,EAAE,MAAM;EACZC,SAAS,EAAE;AACb,CAAU","ignoreList":[]}

package/lib/commonjs/sksg/Recorder/commands/Drawing.js

@@ -318,10 +318,10 @@ const drawAtlas = (ctx, props) => {
     sprites,
     transforms,
     colors,
-    blendMode,
+    colorBlendMode,
     sampling
   } = props;
-  const blend = blendMode ? _types.BlendMode[(0, _nodes.enumKey)(blendMode)] : undefined;
+  const blend = colorBlendMode ? _types.BlendMode[(0, _nodes.enumKey)(colorBlendMode)] : undefined;
   if (image) {
     ctx.canvas.drawAtlas(image, sprites, transforms, ctx.paint, blend, colors, sampling);
   }