@shopify/react-native-skia 0.1.147 → 0.1.148

package/lib/typescript/src/dom/types/SkDOM.d.ts

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

package/lib/typescript/src/dom/types/index.d.ts

@@ -0,0 +1,11 @@
+export * from "./DrawingContext";
+export * from "./Node";
+export * from "./NodeType";
+export * from "./SkDOM";
+export * from "./Common";
+export * from "./Drawings";
+export * from "./ImageFilters";
+export * from "./ColorFilters";
+export * from "./MaskFilters";
+export * from "./PathEffects";
+export * from "./Shaders";

package/lib/typescript/src/index.d.ts

@@ -6,3 +6,5 @@ export * from "./skia";
 export * from "./external";
 export * from "./values";
 export * from "./animation";
+export * from "./dom/types";
+export * from "./dom/nodes";

package/lib/typescript/src/renderer/Canvas.d.ts

@@ -3,12 +3,12 @@ import type { RefObject, ReactNode, ComponentProps } from "react";
 import ReactReconciler from "react-reconciler";
 import { SkiaView } from "../views";
 import type { TouchHandler } from "../views";
-import { Container } from "./nodes";
-export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>, import("./nodes").Node<unknown>>;
+import { Container } from "./Container";
+export declare const skiaReconciler: ReactReconciler.Reconciler<Container, import("..").Node<unknown>, import("..").Node<unknown>, import("..").Node<unknown>, import("..").Node<unknown>>;
 export declare const useCanvasRef: () => React.RefObject<SkiaView>;
 export interface CanvasProps extends ComponentProps<typeof SkiaView> {
     ref?: RefObject<SkiaView>;
     children: ReactNode;
     onTouch?: TouchHandler;
 }
-export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "mode" | "debug" | "onDraw" | "children" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "style" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;
+export declare const Canvas: React.ForwardRefExoticComponent<Pick<CanvasProps, "style" | "children" | "mode" | "debug" | "onDraw" | "hitSlop" | "onLayout" | "pointerEvents" | "removeClippedSubviews" | "testID" | "nativeID" | "collapsable" | "needsOffscreenAlphaCompositing" | "renderToHardwareTextureAndroid" | "focusable" | "shouldRasterizeIOS" | "isTVSelectable" | "hasTVPreferredFocus" | "tvParallaxProperties" | "tvParallaxShiftDistanceX" | "tvParallaxShiftDistanceY" | "tvParallaxTiltAngle" | "tvParallaxMagnification" | "onStartShouldSetResponder" | "onMoveShouldSetResponder" | "onResponderEnd" | "onResponderGrant" | "onResponderReject" | "onResponderMove" | "onResponderRelease" | "onResponderStart" | "onResponderTerminationRequest" | "onResponderTerminate" | "onStartShouldSetResponderCapture" | "onMoveShouldSetResponderCapture" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onTouchEndCapture" | "accessible" | "accessibilityActions" | "accessibilityLabel" | "accessibilityRole" | "accessibilityState" | "accessibilityHint" | "accessibilityValue" | "onAccessibilityAction" | "accessibilityLiveRegion" | "importantForAccessibility" | "accessibilityElementsHidden" | "accessibilityViewIsModal" | "onAccessibilityEscape" | "onAccessibilityTap" | "onMagicTap" | "accessibilityIgnoresInvertColors" | "onTouch"> & React.RefAttributes<SkiaView>>;

package/lib/typescript/src/renderer/Container.d.ts

@@ -0,0 +1,12 @@
+import type { GroupProps, DrawingContext, RenderNode, SkDOM } from "../dom/types";
+import type { Skia } from "../skia/types";
+import type { DependencyManager } from "./DependencyManager";
+export declare class Container {
+    depMgr: DependencyManager;
+    redraw: () => void;
+    private _root;
+    Sk: SkDOM;
+    constructor(Skia: Skia, depMgr: DependencyManager, redraw: () => void);
+    draw(ctx: DrawingContext): void;
+    get root(): RenderNode<GroupProps>;
+}

package/lib/typescript/src/renderer/DependencyManager.d.ts

@@ -1,10 +1,10 @@
+import type { Node } from "../dom/types";
 import type { SkiaValue } from "../values";
-import type { Node } from "./nodes";
 import type { AnimatedProps } from "./processors";
 declare type Unsubscribe = () => void;
 declare type Mutator = (value: unknown) => void;
 declare type SubscriptionState = {
-    nodes: Map<Node, Mutator[]>;
+    nodes: Map<Node<unknown>, Mutator[]>;
     unsubscribe: null | Unsubscribe;
 };
 export declare class DependencyManager {
@@ -12,6 +12,7 @@ export declare class DependencyManager {
     subscriptions: Map<SkiaValue<unknown>, SubscriptionState>;
     unregisterDependantValues: null | Unsubscribe;
     constructor(registerValues: (values: Array<SkiaValue<unknown>>) => () => void);
+    unsubscribeNodes(nodes: Node<unknown>[]): void;
     /**
      * Call to unsubscribe all value listeners from the given node based
      * on the current list of subscriptions for the node. This function
@@ -19,7 +20,7 @@ export declare class DependencyManager {
      * properties have changed.
      * @param node Node to unsubscribe value listeners from
      */
-    unsubscribeNode(node: Node): void;
+    unsubscribeNode(node: Node<unknown>): void;
     /**
      * Adds listeners to the provided values so that the node is notified
      * when a value changes. This is done in an optimized way so that this
@@ -30,7 +31,7 @@ export declare class DependencyManager {
      * @param props Node's properties
      * @param onResolveProp Callback when a property value changes
      */
-    subscribeNode<P extends Record<string, unknown>>(node: Node, props: AnimatedProps<P>): void;
+    subscribeNode<P>(node: Node<unknown>, props: AnimatedProps<P>): void;
     /**
      * Called when the hosting container is mounted or updated. This ensures that we have
      * a ref to the underlying SkiaView so that we can registers redraw listeners

package/lib/typescript/src/renderer/HostComponents.d.ts

@@ -0,0 +1,72 @@
+import type { ForwardedRef } from "react";
+import { NodeType } from "../dom/types";
+import type { CircleProps, DrawingNodeProps, ImageProps, PaintProps, PathProps, CustomDrawingNodeProps, LineProps, OvalProps, DiffRectProps, PointsProps, RectProps, RoundedRectProps, TextProps, VerticesProps, BlurMaskFilterProps, BlendImageFilterProps, BlurImageFilterProps, DisplacementMapImageFilterProps, DropShadowImageFilterProps, OffsetImageFilterProps, RuntimeShaderImageFilterProps, MatrixColorFilterProps, ShaderProps, ImageShaderProps, LinearGradientProps, GroupProps, PatchProps, BlendColorFilterProps, DashPathEffectProps, DiscretePathEffectProps, CornerPathEffectProps, Line2DPathEffectProps, Path1DPathEffectProps, Path2DPathEffectProps, TextPathProps, TextBlobProps, GlyphsProps, TwoPointConicalGradientProps, TurbulenceProps, SweepGradientProps, RadialGradientProps, ColorProps, PictureProps, ImageSVGProps, LerpColorFilterProps, BoxProps, BoxShadowProps } from "../dom/types";
+import type { ChildrenProps } from "../dom/types/Common";
+import type { BlendProps, MorphologyImageFilterProps } from "../dom/types/ImageFilters";
+import type { PaintNode } from "../dom/nodes/PaintNode";
+import type { Container } from "./Container";
+import type { SkiaProps } from "./processors";
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            skGroup: SkiaProps<GroupProps>;
+            skPaint: SkiaProps<PaintProps> & {
+                ref: ForwardedRef<PaintNode>;
+            };
+            skFill: SkiaProps<DrawingNodeProps>;
+            skImage: SkiaProps<ImageProps>;
+            skCircle: SkiaProps<CircleProps>;
+            skPath: SkiaProps<PathProps>;
+            skDrawing: SkiaProps<CustomDrawingNodeProps>;
+            skLine: SkiaProps<LineProps>;
+            skOval: SkiaProps<OvalProps>;
+            skPatch: SkiaProps<PatchProps>;
+            skPoints: SkiaProps<PointsProps>;
+            skRect: SkiaProps<RectProps>;
+            skRRect: SkiaProps<RoundedRectProps>;
+            skVertices: SkiaProps<VerticesProps>;
+            skText: SkiaProps<TextProps>;
+            skTextPath: SkiaProps<TextPathProps>;
+            skTextBlob: SkiaProps<TextBlobProps>;
+            skGlyphs: SkiaProps<GlyphsProps>;
+            skDiffRect: SkiaProps<DiffRectProps>;
+            skPicture: SkiaProps<PictureProps>;
+            skImageSVG: SkiaProps<ImageSVGProps>;
+            skBlurMaskFilter: SkiaProps<BlurMaskFilterProps>;
+            skBlendImageFilter: SkiaProps<BlendImageFilterProps>;
+            skBlurImageFilter: SkiaProps<BlurImageFilterProps>;
+            skOffsetImageFilter: SkiaProps<OffsetImageFilterProps>;
+            skDropShadowImageFilter: SkiaProps<DropShadowImageFilterProps>;
+            skDisplacementMapImageFilter: SkiaProps<DisplacementMapImageFilterProps>;
+            skRuntimeShaderImageFilter: SkiaProps<RuntimeShaderImageFilterProps>;
+            skMorphologyImageFilter: SkiaProps<MorphologyImageFilterProps>;
+            skMatrixColorFilter: SkiaProps<MatrixColorFilterProps>;
+            skBlendColorFilter: SkiaProps<BlendColorFilterProps>;
+            skLinearToSRGBGammaColorFilter: SkiaProps<ChildrenProps>;
+            skSRGBToLinearGammaColorFilter: SkiaProps<ChildrenProps>;
+            skLumaColorFilter: SkiaProps<ChildrenProps>;
+            skLerpColorFilter: SkiaProps<LerpColorFilterProps>;
+            skShader: SkiaProps<ShaderProps>;
+            skImageShader: SkiaProps<ImageShaderProps>;
+            skColorShader: SkiaProps<ColorProps>;
+            skTurbulence: SkiaProps<TurbulenceProps>;
+            skFractalNoise: SkiaProps<TurbulenceProps>;
+            skLinearGradient: SkiaProps<LinearGradientProps>;
+            skRadialGradient: SkiaProps<RadialGradientProps>;
+            skSweepGradient: SkiaProps<SweepGradientProps>;
+            skTwoPointConicalGradient: SkiaProps<TwoPointConicalGradientProps>;
+            skDiscretePathEffect: SkiaProps<DiscretePathEffectProps>;
+            skDashPathEffect: SkiaProps<DashPathEffectProps>;
+            skPath1DPathEffect: SkiaProps<Path1DPathEffectProps>;
+            skPath2DPathEffect: SkiaProps<Path2DPathEffectProps>;
+            skCornerPathEffect: SkiaProps<CornerPathEffectProps>;
+            skSumPathEffect: ChildrenProps;
+            skLine2DPathEffect: SkiaProps<Line2DPathEffectProps>;
+            skBlend: SkiaProps<BlendProps>;
+            skBackdropFilter: SkiaProps<ChildrenProps>;
+            skBox: SkiaProps<BoxProps>;
+            skBoxShadow: SkiaProps<BoxShadowProps>;
+        }
+    }
+}
+export declare const createNode: (container: Container, type: NodeType, props: any) => import("../dom/types").DeclarationNode<PaintProps, import("..").SkPaint, never> | import("../dom/types").DeclarationNode<BlurMaskFilterProps, import("..").SkMaskFilter, never> | import("../dom/types").DeclarationNode<BlendImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<BlurImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<OffsetImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DropShadowImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MorphologyImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<DisplacementMapImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<RuntimeShaderImageFilterProps, import("..").SkImageFilter, never> | import("../dom/types").DeclarationNode<MatrixColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<BlendColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<null, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<LerpColorFilterProps, import("..").SkColorFilter, never> | import("../dom/types").DeclarationNode<ShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ImageShaderProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<ColorProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<TurbulenceProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<LinearGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<RadialGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<SweepGradientProps, import("..").SkShader, never> | import("../dom/types").DeclarationNode<CornerPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<DiscretePathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<DashPathEffectProps, import("..").SkPathEffect, never> | import("../dom/types").DeclarationNode<Path1DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Path2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<null, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<Line2DPathEffectProps, import("..").SkPathEffect, null> | import("../dom/types").DeclarationNode<BlendProps, import("..").SkImageFilter | import("..").SkShader, never> | import("../dom/types").RenderNode<ChildrenProps> | import("../dom/types").DeclarationNode<BoxShadowProps, BoxShadowProps, never>;

package/lib/typescript/src/renderer/HostConfig.d.ts

@@ -1,24 +1,16 @@
 /// <reference types="node" />
 import type { HostConfig } from "react-reconciler";
-import type { Node, Container, DeclarationProps, DrawingProps } from "./nodes";
-import { NodeType } from "./nodes";
+import type { NodeType, Node } from "../dom/types";
+import type { Container } from "./Container";
 export declare const debug: (message?: any, ...optionalParams: any[]) => void;
-declare global {
-    namespace JSX {
-        interface IntrinsicElements {
-            skDeclaration: DeclarationProps<any>;
-            skDrawing: DrawingProps<any>;
-        }
-    }
-}
-declare type Instance = Node;
+declare type Instance = Node<unknown>;
 declare type Props = any;
-declare type TextInstance = Node;
+declare type TextInstance = Node<unknown>;
 declare type SuspenseInstance = Instance;
 declare type HydratableInstance = Instance;
 declare type PublicInstance = Instance;
 declare type HostContext = null;
-declare type UpdatePayload = true;
+declare type UpdatePayload = Container;
 declare type ChildSet = unknown;
 declare type TimeoutHandle = NodeJS.Timeout;
 declare type NoTimeout = -1;

package/lib/typescript/src/renderer/components/Blend.d.ts

@@ -1,9 +1,4 @@
-import type { ReactNode } from "react";
-import { BlendMode } from "../../skia/types";
-import type { AnimatedProps, SkEnum } from "../processors";
-interface BlendProps {
-    mode: SkEnum<typeof BlendMode>;
-    children?: ReactNode | ReactNode[];
-}
-export declare const Blend: (props: AnimatedProps<BlendProps>) => JSX.Element;
-export {};
+/// <reference types="react" />
+import type { BlendProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+export declare const Blend: (props: SkiaProps<BlendProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/Drawing.d.ts

@@ -1,7 +1,3 @@
 /// <reference types="react" />
-import type { DrawingContext } from "../DrawingContext";
-interface DrawingProps {
-    drawing: (ctx: DrawingContext) => void;
-}
-export declare const Drawing: (props: DrawingProps) => JSX.Element;
-export {};
+import type { CustomDrawingNodeProps } from "../../dom/types";
+export declare const Drawing: (props: CustomDrawingNodeProps) => JSX.Element;

package/lib/typescript/src/renderer/components/Group.d.ts

@@ -1,9 +1,4 @@
-import type { RefObject } from "react";
-import type { SkPaint } from "../../skia/types";
-import type { CustomPaintProps, TransformProps, AnimatedProps, ClipDef } from "../processors";
-export interface GroupProps extends CustomPaintProps, TransformProps {
-    clip?: ClipDef;
-    invertClip?: boolean;
-    layer?: RefObject<SkPaint> | SkPaint | boolean;
-}
-export declare const Group: (props: AnimatedProps<GroupProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../processors";
+import type { GroupProps } from "../../dom/types";
+export declare const Group: (props: SkiaProps<GroupProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/Paint.d.ts

@@ -1,9 +1,5 @@
-import type { ReactNode } from "react";
 import React from "react";
-import type { SkPaint } from "../../skia/types";
-import type { CustomPaintProps, AnimatedProps } from "../processors";
-export declare const usePaintRef: () => React.RefObject<SkPaint>;
-export interface PaintProps extends Omit<CustomPaintProps, "paint"> {
-    children?: ReactNode | ReactNode[];
-}
-export declare const Paint: React.ForwardRefExoticComponent<AnimatedProps<PaintProps> & React.RefAttributes<SkPaint>>;
+import type { DrawingNodeProps } from "../../dom/types";
+import type { PaintNode } from "../../dom/nodes/PaintNode";
+export declare const usePaintRef: () => React.RefObject<PaintNode>;
+export declare const Paint: React.ForwardRefExoticComponent<import("../processors").AnimatedProps<DrawingNodeProps> & React.RefAttributes<PaintNode>>;

package/lib/typescript/src/renderer/components/Picture.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-import type { SkPicture } from "../../skia/types";
-export interface PictureProps {
-    picture: SkPicture;
-}
-export declare const Picture: (props: PictureProps) => JSX.Element;
+import type { PictureProps } from "../../dom/types";
+import type { SkiaProps } from "../processors";
+export declare const Picture: (props: SkiaProps<PictureProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/backdrop/BackdropBlur.d.ts

@@ -1,5 +1,6 @@
 /// <reference types="react" />
-import type { AnimatedProps, Radius } from "../../processors";
+import type { AnimatedProps } from "../../processors";
+import type { Radius } from "../../../dom/types";
 import type { BackdropFilterProps } from "./BackdropFilter";
 interface BackdropBlurProps extends Omit<BackdropFilterProps, "filter"> {
     blur: Radius;

package/lib/typescript/src/renderer/components/backdrop/BackdropFilter.d.ts

@@ -1,7 +1,7 @@
 import type { ReactNode } from "react";
-import type { AnimatedProps } from "../../processors";
-import type { GroupProps } from "../Group";
+import type { GroupProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
 export interface BackdropFilterProps extends GroupProps {
     filter: ReactNode | ReactNode[];
 }
-export declare const BackdropFilter: ({ filter: filterChild, children: groupChildren, ...props }: AnimatedProps<BackdropFilterProps>) => JSX.Element;
+export declare const BackdropFilter: ({ filter, children: groupChildren, ...props }: SkiaProps<BackdropFilterProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/BlendColor.d.ts

@@ -1,10 +1,4 @@
-import type { ReactNode } from "react";
-import type { Color } from "../../../skia/types";
-import { BlendMode } from "../../../skia/types";
-import type { SkEnum, AnimatedProps } from "../../processors";
-export interface BlendColorProps {
-    mode: SkEnum<typeof BlendMode>;
-    color: Color;
-    children?: ReactNode | ReactNode[];
-}
-export declare const BlendColor: (props: AnimatedProps<BlendColorProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors";
+import type { BlendColorFilterProps } from "../../../dom/types";
+export declare const BlendColor: (props: SkiaProps<BlendColorFilterProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/Lerp.d.ts

@@ -1,7 +1,4 @@
-import type { ReactNode } from "react";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface LerpProps {
-    t: number;
-    children: ReactNode | ReactNode[];
-}
-export declare const Lerp: (props: AnimatedProps<LerpProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { LerpColorFilterProps } from "../../../dom/types";
+export declare const Lerp: (props: SkiaProps<LerpColorFilterProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/LinearToSRGBGamma.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface LinearToSRGBGammaProps {
-}
-export declare const LinearToSRGBGamma: (props: AnimatedProps<LinearToSRGBGammaProps>) => JSX.Element;
+import type { ChildrenProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
+export declare const LinearToSRGBGamma: (props: SkiaProps<ChildrenProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/LumaColorFilter.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface LumaColorFilterProps {
-}
-export declare const LumaColorFilter: (props: AnimatedProps<LumaColorFilterProps>) => JSX.Element;
+import type { ChildrenProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+export declare const LumaColorFilter: (props: SkiaProps<ChildrenProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/colorFilters/Matrix.d.ts

@@ -1,9 +1,5 @@
-import type { ReactNode } from "react";
-import type { AnimatedProps } from "../../processors";
-interface ColorMatrixProps {
-    matrix: number[];
-    children?: ReactNode | ReactNode[];
-}
-export declare const ColorMatrix: (props: AnimatedProps<ColorMatrixProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors";
+import type { MatrixColorFilterProps } from "../../../dom/types";
+export declare const ColorMatrix: (props: SkiaProps<MatrixColorFilterProps>) => JSX.Element;
 export declare const OpacityMatrix: (opacity: number) => number[];
-export {};

package/lib/typescript/src/renderer/components/colorFilters/SRGBToLinearGamma.d.ts

@@ -1,5 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface SRGBToLinearGammaProps {
-}
-export declare const SRGBToLinearGamma: (props: AnimatedProps<SRGBToLinearGammaProps>) => JSX.Element;
+import type { ChildrenProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors/Animations/Animations";
+export declare const SRGBToLinearGamma: (props: SkiaProps<ChildrenProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/image/Image.d.ts

@@ -1,16 +1,8 @@
 /// <reference types="react" />
-import type { SkImage } from "../../../skia/types";
-import type { CustomPaintProps, RectDef, AnimatedProps } from "../../processors";
-import type { Fit } from "./BoxFit";
-export declare type SourceImageProps = {
-    image: SkImage;
-};
-export declare type BaseImageProps = RectDef & SourceImageProps & {
-    fit: Fit;
-};
-export declare type ImageProps = CustomPaintProps & BaseImageProps;
+import type { SkiaProps } from "../../processors";
+import type { ImageProps } from "../../../dom/types";
 export declare const Image: {
-    (props: AnimatedProps<ImageProps>): JSX.Element;
+    (props: SkiaProps<ImageProps>): JSX.Element;
     defaultProps: {
         x: number;
         y: number;

package/lib/typescript/src/renderer/components/image/ImageSVG.d.ts

@@ -1,7 +1,4 @@
 /// <reference types="react" />
-import type { SkSVG } from "../../../skia/types";
-import type { AnimatedProps, RectDef } from "../../processors";
-export declare type ImageSVGProps = RectDef & {
-    svg: SkSVG;
-};
+import type { ImageSVGProps } from "../../../dom/types";
+import type { AnimatedProps } from "../../processors";
 export declare const ImageSVG: (props: AnimatedProps<ImageSVGProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/image/ImageShader.d.ts

@@ -1,19 +1,8 @@
 /// <reference types="react" />
-import type { SkRect, SkImage } from "../../../skia/types";
-import { TileMode, FilterMode, MipmapMode } from "../../../skia/types";
-import type { TransformProps, SkEnum, AnimatedProps, RectCtor } from "../../processors";
-import type { Fit } from "./BoxFit";
-interface ImageShaderProps extends TransformProps, Partial<RectCtor> {
-    tx: SkEnum<typeof TileMode>;
-    ty: SkEnum<typeof TileMode>;
-    fm: SkEnum<typeof FilterMode>;
-    mm: SkEnum<typeof MipmapMode>;
-    fit: Fit;
-    rect?: SkRect;
-    image: SkImage;
-}
+import type { ImageShaderProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 export declare const ImageShader: {
-    (props: AnimatedProps<ImageShaderProps>): JSX.Element;
+    (props: SkiaProps<ImageShaderProps>): JSX.Element;
     defaultProps: {
         readonly tx: "decal";
         readonly ty: "decal";
@@ -23,4 +12,3 @@ export declare const ImageShader: {
         readonly transform: readonly [];
     };
 };
-export {};

package/lib/typescript/src/renderer/components/image/index.d.ts

@@ -1,4 +1,3 @@
 export * from "./Image";
 export * from "./ImageShader";
 export * from "./ImageSVG";
-export * from "./BoxFit";

package/lib/typescript/src/renderer/components/imageFilters/Blur.d.ts

@@ -1,14 +1,8 @@
-import type { ReactNode } from "react";
-import { TileMode } from "../../../skia/types";
-import type { Radius, SkEnum } from "../../processors";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface BlurProps {
-    blur: Radius;
-    mode: SkEnum<typeof TileMode>;
-    children?: ReactNode | ReactNode[];
-}
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { BlurImageFilterProps } from "../../../dom/types";
 export declare const Blur: {
-    (props: AnimatedProps<BlurProps>): JSX.Element;
+    (props: SkiaProps<BlurImageFilterProps>): JSX.Element;
     defaultProps: {
         mode: string;
     };

package/lib/typescript/src/renderer/components/imageFilters/DisplacementMap.d.ts

@@ -1,10 +1,4 @@
-import type { ReactNode } from "react";
-import { ColorChannel } from "../../../skia/types";
-import type { SkEnum, AnimatedProps } from "../../processors";
-export interface DisplacementMapProps {
-    channelX: SkEnum<typeof ColorChannel>;
-    channelY: SkEnum<typeof ColorChannel>;
-    scale: number;
-    children?: ReactNode | ReactNode[];
-}
-export declare const DisplacementMap: (props: AnimatedProps<DisplacementMapProps>) => JSX.Element;
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors";
+import type { DisplacementMapImageFilterProps } from "../../../dom/types";
+export declare const DisplacementMap: (props: SkiaProps<DisplacementMapImageFilterProps>) => JSX.Element;

package/lib/typescript/src/renderer/components/imageFilters/Morphology.d.ts

@@ -1,12 +1,8 @@
-import React from "react";
-import type { AnimatedProps, Radius } from "../../processors";
-export interface MorphologyProps {
-    operator: "erode" | "dilate";
-    radius: Radius;
-    children?: React.ReactNode | React.ReactNode[];
-}
+/// <reference types="react" />
+import type { MorphologyImageFilterProps } from "../../../dom/types";
+import type { SkiaProps } from "../../processors";
 export declare const Morphology: {
-    (props: AnimatedProps<MorphologyProps>): JSX.Element;
+    (props: SkiaProps<MorphologyImageFilterProps>): JSX.Element;
     defaultProps: {
         operator: string;
     };

package/lib/typescript/src/renderer/components/imageFilters/Offset.d.ts

@@ -1,12 +1,8 @@
-import type { ReactNode } from "react";
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-export interface OffsetProps {
-    x: number;
-    y: number;
-    children?: ReactNode | ReactNode[];
-}
+/// <reference types="react" />
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { OffsetImageFilterProps } from "../../../dom/types";
 export declare const Offset: {
-    (props: AnimatedProps<OffsetProps>): JSX.Element;
+    (props: SkiaProps<OffsetImageFilterProps>): JSX.Element;
     defaultProps: {
         x: number;
         y: number;

package/lib/typescript/src/renderer/components/imageFilters/RuntimeShader.d.ts

@@ -1,8 +1,4 @@
 /// <reference types="react" />
-import type { AnimatedProps } from "../../processors/Animations/Animations";
-import type { SkRuntimeEffect, Uniforms } from "../../../skia/types";
-export interface RuntimeShaderProps {
-    source: SkRuntimeEffect;
-    uniforms?: Uniforms;
-}
-export declare const RuntimeShader: (props: AnimatedProps<RuntimeShaderProps>) => JSX.Element;
+import type { SkiaProps } from "../../processors/Animations/Animations";
+import type { RuntimeShaderImageFilterProps } from "../../../dom/types";
+export declare const RuntimeShader: (props: SkiaProps<RuntimeShaderImageFilterProps>) => JSX.Element;