@shopify/react-native-skia 0.1.171 → 0.1.172

package/cpp/rnskia/RNSkJsiViewApi.h

@@ -55,8 +55,8 @@ public:
     auto info = getEnsuredViewInfo(nativeId);
 
     std::lock_guard<std::mutex> lock(_mutex);
-    info->props.emplace(arguments[1].asString(runtime).utf8(runtime),
-                        RNJsi::JsiValueWrapper(runtime, arguments[2]));
+    info->props.insert_or_assign(arguments[1].asString(runtime).utf8(runtime),
+                                 RNJsi::JsiValueWrapper(runtime, arguments[2]));
 
     // Now let's see if we have a view that we can update
     if (info->view != nullptr) {

package/cpp/rnskia/dom/nodes/JsiCustomDrawingNode.h

@@ -7,6 +7,7 @@
 #include "JsiSkPaint.h"
 
 #include <memory>
+#include <mutex>
 #include <utility>
 
 namespace RNSkia {
@@ -76,7 +77,11 @@ protected:
                    static_cast<const jsi::Value *>(args.data()), 1);
 
           auto picture = recorder.finishRecordingAsPicture();
-          this->_drawingProp->setPicture(picture);
+          {
+            // Lock access to the picture property's setter
+            std::lock_guard<std::mutex> lock(_pictureLock);
+            this->_drawingProp->setPicture(picture);
+          }
 
           // Ask view to redraw itself
           _inRedrawCycle = true;
@@ -86,6 +91,7 @@ protected:
     }
 
     if (_drawingProp->isSet()) {
+      std::lock_guard<std::mutex> lock(_pictureLock);
       context->getCanvas()->drawPicture(_drawingProp->getDerivedValue());
       _inRedrawCycle = false;
     }
@@ -115,6 +121,7 @@ private:
   std::shared_ptr<JsiSkCanvas> _jsiCanvas;
 
   std::atomic<bool> _inRedrawCycle = {false};
+  std::mutex _pictureLock;
 };
 
 } // namespace RNSkia

package/ios/RNSkia-iOS/RNSkMetalCanvasProvider.mm

@@ -41,7 +41,7 @@ RNSkCanvasProvider(requestRedraw),
   _layer.opaque = false;
   _layer.contentsScale = _context->getPixelDensity();
   _layer.pixelFormat = MTLPixelFormatBGRA8Unorm;
-  _layer.contentsGravity = kCAGravityBottomRight;
+  _layer.contentsGravity = kCAGravityBottomLeft;
 }
 
 RNSkMetalCanvasProvider::~RNSkMetalCanvasProvider() {
@@ -73,6 +73,10 @@ void RNSkMetalCanvasProvider::renderToCanvas(const std::function<void(SkCanvas*)
   auto state = UIApplication.sharedApplication.applicationState;
   if (state == UIApplicationStateBackground || state == UIApplicationStateInactive)
   {
+    // Request a redraw in the next run loop callback
+    _requestRedraw();
+    // and don't draw now since it might cause errors in the metal renderer if 
+    // we try to render while in the background. (see above issue)
     return;
   }
   

package/lib/commonjs/animation/decay/decay.d.ts

@@ -0,0 +1,2 @@
+import type { DecayState, DefaultDecayConfig } from "./types";
+export declare const decay: (now: number, state: DecayState, config: DefaultDecayConfig) => DecayState;

package/lib/commonjs/animation/decay/index.d.ts

@@ -0,0 +1 @@
+export { runDecay } from "./runDecay";

package/lib/commonjs/animation/decay/runDecay.d.ts

@@ -0,0 +1,10 @@
+import type { SkiaMutableValue } from "../../values/types";
+import type { DecayConfig } from "./types";
+/**
+ * Runs a decay animation from the current value to zero with the given decay
+ * configuration.
+ * @param value value to animate
+ * @param config Configuration or default configuration
+ * @returns Animation
+ */
+export declare const runDecay: (value: SkiaMutableValue<number>, config?: DecayConfig) => import("../../values/types").SkiaAnimation;

package/lib/commonjs/animation/decay/types.d.ts

@@ -0,0 +1,21 @@
+import type { AnimationState } from "../../values/types";
+export interface DecayConfig {
+    from?: number;
+    deceleration?: number;
+    velocityFactor?: number;
+    clamp?: number[];
+    velocity?: number;
+}
+export interface DefaultDecayConfig {
+    from: number;
+    deceleration: number;
+    velocityFactor: number;
+    clamp?: number[];
+    velocity: number;
+}
+export interface DecayState extends AnimationState {
+    lastTimestamp: number;
+    startTimestamp: number;
+    initialVelocity: number;
+    velocity: number;
+}

package/lib/commonjs/animation/functions/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./interpolate";
+export * from "./interpolateColors";
+export * from "./interpolateVector";
+export * from "./interpolatePaths";

package/lib/commonjs/animation/functions/interpolate.d.ts

@@ -0,0 +1,17 @@
+export declare enum Extrapolate {
+    IDENTITY = "identity",
+    CLAMP = "clamp",
+    EXTEND = "extend"
+}
+export interface ExtrapolationConfig {
+    extrapolateLeft?: Extrapolate | string;
+    extrapolateRight?: Extrapolate | string;
+}
+interface RequiredExtrapolationConfig {
+    extrapolateLeft: Extrapolate;
+    extrapolateRight: Extrapolate;
+}
+export declare type ExtrapolationType = ExtrapolationConfig | Extrapolate | string | undefined;
+export declare function validateInterpolationOptions(type: ExtrapolationType): RequiredExtrapolationConfig;
+export declare function interpolate(x: number, input: readonly number[], output: readonly number[], type?: ExtrapolationType): number;
+export {};

package/lib/commonjs/animation/functions/interpolateColors.d.ts

@@ -0,0 +1,3 @@
+import type { Color } from "../../skia";
+export declare const interpolateColors: (value: number, inputRange: number[], _outputRange: Color[]) => Float32Array;
+export declare const mixColors: (value: number, x: Color, y: Color) => Float32Array;

package/lib/commonjs/animation/functions/interpolatePaths.d.ts

@@ -0,0 +1,19 @@
+import type { SkPath } from "../../skia/types";
+import type { ExtrapolationType } from "./interpolate";
+/**
+ * Maps an input value within a range to an output path within a path range.
+ * @param value - The input value.
+ * @param inputRange - The range of the input value.
+ * @param outputRange - The range of the output path.
+ * @param options - Extrapolation options
+ * @returns The output path.
+ * @example <caption>Map a value between 0 and 1 to a path between two paths.</caption>
+ * const path1 = new Path();
+ * path1.moveTo(0, 0);
+ * path1.lineTo(100, 0);
+ * const path2 = new Path();
+ * path2.moveTo(0, 0);
+ * path2.lineTo(0, 100);
+ * const path = interpolatePath(0.5, [0, 1], [path1, path2]);
+ */
+export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SkPath;

package/lib/commonjs/animation/functions/interpolateVector.d.ts

@@ -0,0 +1,10 @@
+import type { Vector } from "../../skia/types";
+import { interpolate } from "./interpolate";
+export declare const interpolateVector: (value: number, inputRange: readonly number[], outputRange: readonly Vector[], options?: Parameters<typeof interpolate>[3]) => {
+    x: number;
+    y: number;
+};
+export declare const mixVector: (value: number, from: Vector, to: Vector) => {
+    x: number;
+    y: number;
+};

package/lib/commonjs/animation/index.d.ts

@@ -0,0 +1,4 @@
+export * from "./timing";
+export * from "./spring";
+export * from "./decay";
+export * from "./functions";

package/lib/commonjs/animation/spring/Spring.d.ts

@@ -0,0 +1,65 @@
+import type { SpringConfig } from "./types";
+export declare const Spring: {
+    Config: {
+        Gentle: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        Wobbly: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        WobblySlow: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        Stiff: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+        Default: {
+            mass: number;
+            stiffness: number;
+            damping: number;
+            velocity: number;
+        };
+    };
+    Gentle: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    Wobbly: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    WobblySlow: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    Stiff: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+    Default: (config?: SpringConfig) => {
+        mass: number;
+        stiffness: number;
+        velocity: number;
+        damping: number;
+    };
+};

package/lib/commonjs/animation/spring/functions/index.d.ts

@@ -0,0 +1 @@
+export { createSpringEasing } from "./spring";

package/lib/commonjs/animation/spring/functions/spring.d.ts

@@ -0,0 +1,10 @@
+import type { SpringConfig } from "../types";
+import type { TimingConfig } from "../../types";
+/**
+ * @description Returns a cached jsContext function for a spring with duration
+ * @param mass The mass of the spring
+ * @param stiffness The stiffness of the spring
+ * @param damping Spring damping
+ * @param velocity The initial velocity
+ */
+export declare const createSpringEasing: (params: Partial<SpringConfig>) => TimingConfig;

package/lib/commonjs/animation/spring/index.d.ts

@@ -0,0 +1,3 @@
+export { Spring } from "./Spring";
+export { runSpring } from "./runSpring";
+export { useSpring } from "./useSpring";

package/lib/commonjs/animation/spring/runSpring.d.ts

@@ -0,0 +1,16 @@
+import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
+import type { AnimationParams, SpringConfig, AnimationCallback } from "../types";
+/**
+ * Creates a new animation on an existing value that will be driven by
+ * an animation value. The value will be run from / to the value in
+ * params and modified by the provided easing curve for the length of
+ * the duration. When the value has reached its desired "to" value the
+ * animation will be stopped.
+ *
+ * @param value The value to animate
+ * @param toOrParams To value or Animation parameters
+ * @param config Spring configuration
+ * @returns an animation value that can be used to start/stop
+ * the animation.
+ */
+export declare const runSpring: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: SpringConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/commonjs/animation/spring/types.d.ts

@@ -0,0 +1,6 @@
+export interface SpringConfig {
+    mass?: number;
+    stiffness?: number;
+    velocity?: number;
+    damping?: number;
+}

package/lib/commonjs/animation/spring/useSpring.d.ts

@@ -0,0 +1,10 @@
+import type { SkiaValue } from "../../values/types";
+import type { SpringConfig, AnimationParams, AnimationCallback } from "../types";
+/**
+ * Creats a spring based animation value that will run whenever
+ * the animation parameters change.
+ * @param toOrParams
+ * @param config
+ * @returns
+ */
+export declare const useSpring: (toOrParams: number | AnimationParams, config?: SpringConfig, callback?: AnimationCallback) => SkiaValue<number>;

package/lib/commonjs/animation/timing/Easing.d.ts

@@ -0,0 +1,19 @@
+export declare class Easing {
+    static step0(n: number): number;
+    static step1(n: number): number;
+    static linear(t: number): number;
+    static ease(t: number): number;
+    static quad(t: number): number;
+    static cubic(t: number): number;
+    static poly(n: number): (t: number) => number;
+    static sin(t: number): number;
+    static circle(t: number): number;
+    static exp(t: number): number;
+    static elastic(bounciness?: number): (t: number) => number;
+    static back(s?: number): (t: number) => number;
+    static bounce(t: number): number;
+    static bezier(x1: number, y1: number, x2: number, y2: number): (t: number) => number;
+    static in(easing: (t: number) => number): (t: number) => number;
+    static out(easing: (t: number) => number): (t: number) => number;
+    static inOut(easing: (t: number) => number): (t: number) => number;
+}

package/lib/commonjs/animation/timing/createTiming.d.ts

@@ -0,0 +1,17 @@
+import type { TimingConfig, RequiredAnimationParams, AnimationCallback } from "../types";
+import type { SkiaMutableValue } from "../../values/types";
+/**
+ * Creates an animation that is driven by a clock value.
+ * The value will be run from / to the value in params and modified
+ * by the provided easing curve for the length of the duration. When
+ * the value has reached its desired "to" value the animation
+ * will be stopped. If loop is set to true, the animation will continue
+ * to run until stopped.
+ *
+ * @param params Animation parameters
+ * @param config Spring or timing configuration
+ * @param value Optional value that the animation will update
+ * @params an animation value that can be used to start/stop
+ * the animation.
+ */
+export declare const createTiming: (params: RequiredAnimationParams & Required<TimingConfig>, value?: SkiaMutableValue<number>, callback?: AnimationCallback) => import("../../values/types").SkiaAnimation;

package/lib/commonjs/animation/timing/functions/bezier.d.ts

@@ -0,0 +1 @@
+export declare function bezier(mX1: number, mY1: number, mX2: number, mY2: number): (x: number) => number;

package/lib/commonjs/animation/timing/functions/getResolvedParams.d.ts

@@ -0,0 +1,7 @@
+import type { RequiredAnimationParams, AnimationParams, TimingConfig } from "../../types";
+/**
+ * Resolves parameters from optional values to a single object
+ * @param toOrParams Params or to value
+ * @param config timing/spring configuration
+ */
+export declare const getResolvedParams: (toOrParams: number | AnimationParams, config?: TimingConfig) => RequiredAnimationParams & Required<TimingConfig>;

package/lib/commonjs/animation/timing/functions/index.d.ts

@@ -0,0 +1,4 @@
+export { bezier } from "./bezier";
+export { timing } from "./timing";
+export * from "./types";
+export * from "./getResolvedParams";

package/lib/commonjs/animation/timing/functions/timing.d.ts

@@ -0,0 +1,17 @@
+import type { AnimationState } from "../../../values/types";
+/**
+ * Calculates and returns a timing value based on the
+ * input parameters. The timing value is a number between
+ * 0 and 1.
+ * @param t
+ * @param duration
+ * @param easing
+ * @param loop
+ * @param yoyo
+ * @param onStop
+ * @returns
+ */
+export declare const timing: (t: number, duration: number, easing: (t: number) => number, loop: boolean, yoyo: boolean, state: AnimationState) => {
+    current: number;
+    finished: boolean;
+};

package/lib/commonjs/animation/timing/functions/types.d.ts

@@ -0,0 +1,7 @@
+export declare type EasingFunction = (value: number) => number;
+export interface TimingConfig {
+    from?: number;
+    to?: number;
+    duration?: number;
+    easing?: EasingFunction;
+}

package/lib/commonjs/animation/timing/index.d.ts

@@ -0,0 +1,4 @@
+export { Easing } from "./Easing";
+export { useTiming } from "./useTiming";
+export { useLoop } from "./useLoop";
+export { runTiming } from "./runTiming";

package/lib/commonjs/animation/timing/runTiming.d.ts

@@ -0,0 +1,16 @@
+import type { SkiaMutableValue, SkiaAnimation } from "../../values/types";
+import type { AnimationParams, TimingConfig, AnimationCallback } from "../types";
+/**
+ * Creates a new animation on an existing value that will be driven by
+ * an animation value. The value will be run from / to the value in
+ * params and modified by the provided easing curve for the length of
+ * the duration. When the value has reached its desired "to" value the
+ * animation will be stopped.
+ *
+ * @param value The value to animate
+ * @param toOrParams To value or Animation parameters
+ * @param config Spring or timing configuration
+ * @returns an animation value that can be used to start/stop
+ * the animation.
+ */
+export declare const runTiming: (value: SkiaMutableValue<number>, toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaAnimation;

package/lib/commonjs/animation/timing/useLoop.d.ts

@@ -0,0 +1,8 @@
+import type { TimingConfig } from "../types";
+/**
+ * Configures a looped timing value. The value will go back and forth
+ * between 0 and 1 and back.
+ * @param config Timing configuration for easing and duration
+ * @returns A value that can be used for further animations
+ */
+export declare const useLoop: (config?: TimingConfig) => import("../..").SkiaValue<number>;

package/lib/commonjs/animation/timing/useTiming.d.ts

@@ -0,0 +1,10 @@
+import type { SkiaValue } from "../../values/types";
+import type { AnimationParams, TimingConfig, AnimationCallback } from "../types";
+/**
+ * Creats an animation value that will run whenever
+ * the animation parameters change. The animation start immediately.
+ * @param toOrParams
+ * @param config
+ * @returns A value that is animated
+ */
+export declare const useTiming: (toOrParams: number | AnimationParams, config?: TimingConfig, callback?: AnimationCallback) => SkiaValue<number>;

package/lib/commonjs/animation/types.d.ts

@@ -0,0 +1,18 @@
+export interface SpringConfig {
+    mass?: number;
+    stiffness?: number;
+    damping?: number;
+    velocity?: number;
+}
+export interface TimingConfig {
+    duration?: number;
+    easing?: (t: number) => number;
+}
+export interface AnimationParams {
+    from?: number;
+    to?: number;
+    loop?: boolean;
+    yoyo?: boolean;
+}
+export declare type RequiredAnimationParams = Required<Omit<AnimationParams, "from">> & Pick<AnimationParams, "from">;
+export declare type AnimationCallback = (current: number) => void;

package/lib/commonjs/dom/nodes/DrawingNode.d.ts

@@ -0,0 +1,14 @@
+import type { DrawingContext, DrawingNodeProps, Node, NodeType, RenderNode } from "../types";
+import type { NodeContext } from "./Node";
+import { JsiRenderNode } from "./RenderNode";
+export declare abstract class JsiDrawingNode<P extends DrawingNodeProps, C> extends JsiRenderNode<P> implements RenderNode<P> {
+    protected derived?: C;
+    constructor(ctx: NodeContext, type: NodeType, props: P);
+    setProps(props: P): void;
+    setProp<K extends keyof P>(name: K, value: P[K]): boolean;
+    addChild(child: Node<unknown>): void;
+    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
+    renderNode(ctx: DrawingContext): void;
+    protected abstract draw(ctx: DrawingContext): void;
+    protected abstract deriveProps(): C;
+}

package/lib/commonjs/dom/nodes/GroupNode.d.ts

@@ -0,0 +1,7 @@
+import type { DrawingContext, GroupProps } from "../types";
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+export declare class GroupNode extends JsiRenderNode<GroupProps> {
+    constructor(ctx: NodeContext, props: GroupProps);
+    renderNode(ctx: DrawingContext): void;
+}

package/lib/commonjs/dom/nodes/JsiSkDOM.d.ts

@@ -0,0 +1,65 @@
+import type { PathProps, SkDOM, GroupProps, ImageProps, BlurImageFilterProps, MatrixColorFilterProps, CircleProps, BlurMaskFilterProps, LinearGradientProps, PaintProps, ShaderProps, ImageShaderProps, CustomDrawingNodeProps, LineProps, OvalProps, PatchProps, PointsProps, RectProps, RoundedRectProps, VerticesProps, TextProps, DiffRectProps, OffsetImageFilterProps, BlendColorFilterProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, FractalNoiseProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, DrawingNodeProps, BoxProps, BoxShadowProps, ChildrenProps } from "../types";
+import type { BlendImageFilterProps, BlendProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, MorphologyImageFilterProps, RuntimeShaderImageFilterProps } from "../types/ImageFilters";
+import type { CornerPathEffectProps, DashPathEffectProps, DiscretePathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps } from "../types/PathEffects";
+import { CornerPathEffectNode, Path1DPathEffectNode, Path2DPathEffectNode, Line2DPathEffectNode, BlendNode } from "./paint";
+import type { NodeContext } from "./Node";
+export declare class JsiSkDOM implements SkDOM {
+    private ctx;
+    constructor(ctx: NodeContext);
+    Layer(props?: ChildrenProps): import("../types").RenderNode<ChildrenProps>;
+    Group(props?: GroupProps): import("../types").RenderNode<GroupProps>;
+    Paint(props: PaintProps): import("../types").DeclarationNode<PaintProps, import("../..").SkPaint, never>;
+    Fill(props?: DrawingNodeProps): import("../types").RenderNode<PaintProps>;
+    Image(props: ImageProps): import("../types").RenderNode<ImageProps>;
+    Circle(props: CircleProps): import("../types").RenderNode<CircleProps>;
+    Path(props: PathProps): import("../types").RenderNode<PathProps>;
+    CustomDrawing(props: CustomDrawingNodeProps): import("../types").RenderNode<CustomDrawingNodeProps>;
+    Line(props: LineProps): import("../types").RenderNode<LineProps>;
+    Oval(props: OvalProps): import("../types").RenderNode<OvalProps>;
+    Patch(props: PatchProps): import("../types").RenderNode<PatchProps>;
+    Points(props: PointsProps): import("../types").RenderNode<PointsProps>;
+    Rect(props: RectProps): import("./DrawingNode").JsiDrawingNode<RectProps, import("../..").SkRect>;
+    RRect(props: RoundedRectProps): import("./DrawingNode").JsiDrawingNode<RoundedRectProps, import("../..").SkRRect>;
+    Vertices(props: VerticesProps): import("../types").RenderNode<VerticesProps>;
+    Text(props: TextProps): import("../types").RenderNode<TextProps>;
+    TextPath(props: TextPathProps): import("../types").RenderNode<TextPathProps>;
+    TextBlob(props: TextBlobProps): import("../types").RenderNode<TextBlobProps>;
+    Glyphs(props: GlyphsProps): import("../types").RenderNode<GlyphsProps>;
+    DiffRect(props: DiffRectProps): import("../types").RenderNode<DiffRectProps>;
+    Picture(props: PictureProps): import("../types").RenderNode<PictureProps>;
+    ImageSVG(props: ImageSVGProps): import("../types").RenderNode<ImageSVGProps>;
+    BlurMaskFilter(props: BlurMaskFilterProps): import("../types").DeclarationNode<BlurMaskFilterProps, import("../..").SkMaskFilter, never>;
+    BlendImageFilter(props: BlendImageFilterProps): import("../types").DeclarationNode<BlendImageFilterProps, import("../..").SkImageFilter, never>;
+    DropShadowImageFilter(props: DropShadowImageFilterProps): import("../types").DeclarationNode<DropShadowImageFilterProps, import("../..").SkImageFilter, never>;
+    DisplacementMapImageFilter(props: DisplacementMapImageFilterProps): import("../types").DeclarationNode<DisplacementMapImageFilterProps, import("../..").SkImageFilter, never>;
+    BlurImageFilter(props: BlurImageFilterProps): import("../types").DeclarationNode<BlurImageFilterProps, import("../..").SkImageFilter, never>;
+    OffsetImageFilter(props: OffsetImageFilterProps): import("../types").DeclarationNode<OffsetImageFilterProps, import("../..").SkImageFilter, never>;
+    MorphologyImageFilter(props: MorphologyImageFilterProps): import("../types").DeclarationNode<MorphologyImageFilterProps, import("../..").SkImageFilter, never>;
+    RuntimeShaderImageFilter(props: RuntimeShaderImageFilterProps): import("../types").DeclarationNode<RuntimeShaderImageFilterProps, import("../..").SkImageFilter, never>;
+    MatrixColorFilter(props: MatrixColorFilterProps): import("../types").DeclarationNode<MatrixColorFilterProps, import("../..").SkColorFilter, never>;
+    BlendColorFilter(props: BlendColorFilterProps): import("../types").DeclarationNode<BlendColorFilterProps, import("../..").SkColorFilter, never>;
+    LumaColorFilter(): import("../types").DeclarationNode<null, import("../..").SkColorFilter, never>;
+    LinearToSRGBGammaColorFilter(): import("../types").DeclarationNode<null, import("../..").SkColorFilter, never>;
+    SRGBToLinearGammaColorFilter(): import("../types").DeclarationNode<null, import("../..").SkColorFilter, never>;
+    LerpColorFilter(props: LerpColorFilterProps): import("../types").DeclarationNode<LerpColorFilterProps, import("../..").SkColorFilter, never>;
+    Shader(props: ShaderProps): import("../types").DeclarationNode<ShaderProps, import("../..").SkShader, never>;
+    ImageShader(props: ImageShaderProps): import("../types").DeclarationNode<ImageShaderProps, import("../..").SkShader, never>;
+    ColorShader(props: ColorProps): import("../types").DeclarationNode<ColorProps, import("../..").SkShader, never>;
+    SweepGradient(props: SweepGradientProps): import("../types").DeclarationNode<SweepGradientProps, import("../..").SkShader, never>;
+    Turbulence(props: TurbulenceProps): import("../types").DeclarationNode<TurbulenceProps, import("../..").SkShader, never>;
+    FractalNoise(props: FractalNoiseProps): import("../types").DeclarationNode<FractalNoiseProps, import("../..").SkShader, never>;
+    LinearGradient(props: LinearGradientProps): import("../types").DeclarationNode<LinearGradientProps, import("../..").SkShader, never>;
+    RadialGradient(props: RadialGradientProps): import("../types").DeclarationNode<RadialGradientProps, import("../..").SkShader, never>;
+    TwoPointConicalGradient(props: TwoPointConicalGradientProps): import("../types").DeclarationNode<TwoPointConicalGradientProps, import("../..").SkShader, never>;
+    CornerPathEffect(props: CornerPathEffectProps): CornerPathEffectNode | import("../types").DeclarationNode<CornerPathEffectProps, import("../..").SkPathEffect, never>;
+    DiscretePathEffect(props: DiscretePathEffectProps): import("../types").DeclarationNode<DiscretePathEffectProps, import("../..").SkPathEffect, never>;
+    DashPathEffect(props: DashPathEffectProps): import("../types").DeclarationNode<DashPathEffectProps, import("../..").SkPathEffect, never>;
+    Path1DPathEffect(props: Path1DPathEffectProps): Path1DPathEffectNode | import("../types").DeclarationNode<Path1DPathEffectProps, import("../..").SkPathEffect, never>;
+    Path2DPathEffect(props: Path2DPathEffectProps): Path2DPathEffectNode | import("../types").DeclarationNode<Path2DPathEffectProps, import("../..").SkPathEffect, never>;
+    SumPathEffect(): import("../types").DeclarationNode<null, import("../..").SkPathEffect, never>;
+    Line2DPathEffect(props: Line2DPathEffectProps): Line2DPathEffectNode | import("../types").DeclarationNode<Line2DPathEffectProps, import("../..").SkPathEffect, never>;
+    Blend(props: BlendProps): BlendNode | import("../types").DeclarationNode<BlendProps, import("../..").SkImageFilter, never>;
+    BackdropFilter(props: ChildrenProps): import("../types").RenderNode<ChildrenProps>;
+    Box(props: BoxProps): import("../types").RenderNode<BoxProps>;
+    BoxShadow(props: BoxShadowProps): import("../types").DeclarationNode<BoxShadowProps, BoxShadowProps, never>;
+}

package/lib/commonjs/dom/nodes/LayerNode.d.ts

@@ -0,0 +1,8 @@
+import type { DrawingContext } from "../types";
+import type { ChildrenProps } from "../types/Common";
+import { JsiRenderNode } from "./RenderNode";
+import type { NodeContext } from "./Node";
+export declare class LayerNode extends JsiRenderNode<ChildrenProps> {
+    constructor(ctx: NodeContext, props: ChildrenProps);
+    renderNode(ctx: DrawingContext): void;
+}

package/lib/commonjs/dom/nodes/Node.d.ts

@@ -0,0 +1,43 @@
+import type { SkColorFilter, Skia, SkImageFilter, SkMaskFilter, SkShader, SkPathEffect, SkPaint } from "../../skia/types";
+import type { Node, DeclarationNode, NodeType } from "../types";
+import { DeclarationType } from "../types";
+import type { DependencyManager } from "../../renderer/DependencyManager";
+export interface NodeContext {
+    Skia: Skia;
+    depMgr: DependencyManager;
+}
+export declare abstract class JsiNode<P> implements Node<P> {
+    type: NodeType;
+    protected props: P;
+    protected _children: JsiNode<unknown>[];
+    protected Skia: Skia;
+    protected depMgr: DependencyManager;
+    constructor(ctx: NodeContext, type: NodeType, props: P);
+    setProps(props: P): void;
+    setProp<K extends keyof P>(name: K, v: P[K]): boolean;
+    getProps(): P;
+    children(): JsiNode<unknown>[];
+    addChild(child: Node<unknown>): void;
+    dispose(): void;
+    removeChild(child: Node<unknown>): void;
+    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
+}
+export declare type Invalidate = () => void;
+export declare abstract class JsiDeclarationNode<P, T, Nullable extends null | never = never> extends JsiNode<P> implements DeclarationNode<P, T, Nullable> {
+    declarationType: DeclarationType;
+    private invalidate;
+    constructor(ctx: NodeContext, declarationType: DeclarationType, type: NodeType, props: P);
+    abstract materialize(): T | Nullable;
+    addChild(child: Node<unknown>): void;
+    insertChildBefore(child: Node<unknown>, before: Node<unknown>): void;
+    dispose(): void;
+    setInvalidate(invalidate: Invalidate): void;
+    setProps(props: P): void;
+    setProp<K extends keyof P>(name: K, v: P[K]): boolean;
+    isPaint(): this is DeclarationNode<unknown, SkPaint>;
+    isImageFilter(): this is DeclarationNode<unknown, SkImageFilter>;
+    isColorFilter(): this is DeclarationNode<unknown, SkColorFilter>;
+    isShader(): this is DeclarationNode<unknown, SkShader>;
+    isMaskFilter(): this is DeclarationNode<unknown, SkMaskFilter>;
+    isPathEffect(): this is DeclarationNode<unknown, SkPathEffect>;
+}

package/lib/commonjs/dom/nodes/PaintContext.d.ts

@@ -0,0 +1,18 @@
+import type { BlendMode, PaintStyle, SkColorFilter, SkImageFilter, SkMaskFilter, SkPathEffect, SkShader, StrokeCap, StrokeJoin } from "../../skia/types";
+import type { SkColor } from "../../skia/types/Color";
+export interface PaintContext {
+    color?: SkColor;
+    strokeWidth?: number;
+    blendMode?: BlendMode;
+    style?: PaintStyle;
+    strokeJoin?: StrokeJoin;
+    strokeCap?: StrokeCap;
+    strokeMiter?: number;
+    opacity?: number;
+    antiAlias?: boolean;
+    shader?: SkShader;
+    colorFilter?: SkColorFilter;
+    imageFilter?: SkImageFilter;
+    maskFilter?: SkMaskFilter;
+    pathEffect?: SkPathEffect;
+}

package/lib/commonjs/dom/nodes/PaintNode.d.ts

@@ -0,0 +1,8 @@
+import type { SkPaint } from "../../skia/types";
+import type { DeclarationNode, PaintProps } from "../types";
+import type { NodeContext } from "./Node";
+import { JsiDeclarationNode } from "./Node";
+export declare class PaintNode extends JsiDeclarationNode<PaintProps, SkPaint> implements DeclarationNode<PaintProps, SkPaint> {
+    constructor(ctx: NodeContext, props?: PaintProps);
+    materialize(): SkPaint;
+}