@shopify/react-native-skia 2.5.4 → 2.6.0

package/lib/typescript/lib/module/skia/web/JsiSkPath.d.ts

@@ -1,53 +1,66 @@
+export function toMatrix3x3(m: any): any;
+/**
+ * SkPath wraps a CK PathBuilder internally, providing both mutable building
+ * methods and immutable query methods. Use snapshot() internally to get
+ * an immutable CK Path for read-only operations.
+ */
 export class JsiSkPath extends HostObject {
+    /** Extract an immutable CK Path from a JsiSkPath value (for CK interop). */
+    static pathFromValue(value: any): any;
     constructor(CanvasKit: any, ref: any);
+    /** Returns an immutable CK Path snapshot for read-only operations. */
+    asPath(): any;
     addPath(src: any, matrix: any, extend?: boolean): this;
     addArc(oval: any, startAngleInDegrees: any, sweepAngleInDegrees: any): this;
     addOval(oval: any, isCCW: any, startIndex: any): this;
-    countPoints(): any;
     addPoly(points: any, close: any): this;
+    addRect(rect: any, isCCW: any): this;
+    addRRect(rrect: any, isCCW: any): this;
+    addCircle(x: any, y: any, r: any): this;
     moveTo(x: any, y: any): this;
-    lineTo(x: any, y: any): this;
-    makeAsWinding(): any;
-    offset(dx: any, dy: any): this;
-    rArcTo(rx: any, ry: any, xAxisRotateInDegrees: any, useSmallArc: any, isCCW: any, dx: any, dy: any): this;
-    rConicTo(dx1: any, dy1: any, dx2: any, dy2: any, w: any): this;
-    rCubicTo(cpx1: any, cpy1: any, cpx2: any, cpy2: any, x: any, y: any): this;
     rMoveTo(x: any, y: any): this;
+    lineTo(x: any, y: any): this;
     rLineTo(x: any, y: any): this;
+    quadTo(x1: any, y1: any, x2: any, y2: any): this;
     rQuadTo(x1: any, y1: any, x2: any, y2: any): this;
-    setFillType(fill: any): this;
-    setIsVolatile(volatile: any): this;
-    stroke(opts: any): any;
+    conicTo(x1: any, y1: any, x2: any, y2: any, w: any): this;
+    rConicTo(x1: any, y1: any, x2: any, y2: any, w: any): this;
+    cubicTo(cpx1: any, cpy1: any, cpx2: any, cpy2: any, x: any, y: any): this;
+    rCubicTo(cpx1: any, cpy1: any, cpx2: any, cpy2: any, x: any, y: any): this;
     close(): this;
     reset(): this;
     rewind(): this;
-    computeTightBounds(): JsiSkRect;
     arcToOval(oval: any, startAngleInDegrees: any, sweepAngleInDegrees: any, forceMoveTo: any): this;
     arcToRotated(rx: any, ry: any, xAxisRotateInDegrees: any, useSmallArc: any, isCCW: any, x: any, y: any): this;
+    rArcTo(rx: any, ry: any, xAxisRotateInDegrees: any, useSmallArc: any, isCCW: any, dx: any, dy: any): this;
     arcToTangent(x1: any, y1: any, x2: any, y2: any, radius: any): this;
-    conicTo(x1: any, y1: any, x2: any, y2: any, w: any): this;
+    setFillType(fill: any): this;
+    setIsVolatile(_volatile: any): this;
+    offset(dx: any, dy: any): this;
+    transform(m: any): this;
+    makeAsWinding(): this | null;
+    simplify(): boolean;
+    op(path: any, op: any): boolean;
+    dash(on: any, off: any, phase: any): boolean;
+    stroke(opts: any): this | null;
+    trim(start: any, stop: any, isComplement: any): this | null;
+    countPoints(): any;
+    computeTightBounds(): JsiSkRect;
     contains(x: any, y: any): any;
     copy(): JsiSkPath;
-    cubicTo(cpx1: any, cpy1: any, cpx2: any, cpy2: any, x: any, y: any): this;
-    dash(on: any, off: any, phase: any): any;
     equals(other: any): any;
     getBounds(): JsiSkRect;
     getFillType(): any;
-    quadTo(x1: any, y1: any, x2: any, y2: any): this;
-    addRect(rect: any, isCCW: any): this;
-    addRRect(rrect: any, isCCW: any): this;
     getPoint(index: any): JsiSkPoint;
     isEmpty(): any;
-    isVolatile(): any;
-    addCircle(x: any, y: any, r: any): this;
-    getLastPt(): JsiSkPoint;
-    op(path: any, op: any): any;
-    simplify(): any;
+    isVolatile(): boolean;
+    getLastPt(): {
+        x: any;
+        y: any;
+    };
     toSVGString(): any;
-    trim(start: any, stop: any, isComplement: any): any;
-    transform(m: any): this;
-    interpolate(end: any, t: any, output: any): any;
     isInterpolatable(path2: any): any;
+    interpolate(end: any, weight: any, output: any): any;
     toCmds(): any;
 }
 import { HostObject } from "./Host";

package/lib/typescript/lib/module/skia/web/JsiSkPathBuilder.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Web implementation of SkPathBuilder using CanvasKit's native PathBuilder.
+ */
+export class JsiSkPathBuilder extends HostObject {
+    constructor(CanvasKit: any, ref: any);
+    moveTo(x: any, y: any): this;
+    rMoveTo(x: any, y: any): this;
+    lineTo(x: any, y: any): this;
+    rLineTo(x: any, y: any): this;
+    quadTo(x1: any, y1: any, x2: any, y2: any): this;
+    rQuadTo(x1: any, y1: any, x2: any, y2: any): this;
+    conicTo(x1: any, y1: any, x2: any, y2: any, w: any): this;
+    rConicTo(x1: any, y1: any, x2: any, y2: any, w: any): this;
+    cubicTo(x1: any, y1: any, x2: any, y2: any, x3: any, y3: any): this;
+    rCubicTo(x1: any, y1: any, x2: any, y2: any, x3: any, y3: any): this;
+    close(): this;
+    arcToOval(oval: any, startAngleInDegrees: any, sweepAngleInDegrees: any, forceMoveTo: any): this;
+    arcToRotated(rx: any, ry: any, xAxisRotateInDegrees: any, useSmallArc: any, isCCW: any, x: any, y: any): this;
+    rArcTo(rx: any, ry: any, xAxisRotateInDegrees: any, useSmallArc: any, isCCW: any, dx: any, dy: any): this;
+    arcToTangent(x1: any, y1: any, x2: any, y2: any, radius: any): this;
+    addRect(rect: any, isCCW: any): this;
+    addOval(oval: any, isCCW: any, startIndex: any): this;
+    addArc(oval: any, startAngleInDegrees: any, sweepAngleInDegrees: any): this;
+    addRRect(rrect: any, isCCW: any): this;
+    addCircle(x: any, y: any, r: any, _isCCW: any): this;
+    addPoly(points: any, close: any): this;
+    addPath(src: any, matrix: any, extend?: boolean): this;
+    setFillType(fill: any): this;
+    setIsVolatile(_isVolatile: any): this;
+    reset(): this;
+    offset(dx: any, dy: any): this;
+    transform(m: any): this;
+    computeBounds(): JsiSkRect;
+    isEmpty(): any;
+    getLastPt(): {
+        x: any;
+        y: any;
+    };
+    countPoints(): any;
+    build(): JsiSkPath;
+    detach(): JsiSkPath;
+}
+import { HostObject } from "./Host";
+import { JsiSkRect } from "./JsiSkRect";
+import { JsiSkPath } from "./JsiSkPath";

package/lib/typescript/lib/module/skia/web/JsiSkPathBuilderFactory.d.ts

@@ -0,0 +1,6 @@
+export class JsiSkPathBuilderFactory extends Host {
+    Make(): JsiSkPathBuilder;
+    MakeFromPath(path: any): JsiSkPathBuilder;
+}
+import { Host } from "./Host";
+import { JsiSkPathBuilder } from "./JsiSkPathBuilder";

package/lib/typescript/lib/module/skia/web/JsiSkPathFactory.d.ts

@@ -4,6 +4,18 @@ export class JsiSkPathFactory extends Host {
     MakeFromOp(one: any, two: any, op: any): JsiSkPath | null;
     MakeFromCmds(cmds: any): JsiSkPath | null;
     MakeFromText(_text: any, _x: any, _y: any, _font: any): jest.Mock<any, any, any>;
+    Rect(rect: any, isCCW: any): JsiSkPath;
+    Oval(rect: any, isCCW: any, startIndex: any): JsiSkPath;
+    Circle(x: any, y: any, r: any): JsiSkPath;
+    RRect(rrect: any, isCCW: any): JsiSkPath;
+    Line(p1: any, p2: any): JsiSkPath;
+    Polygon(points: any, close: any): JsiSkPath;
+    Stroke(srcPath: any, opts: any): JsiSkPath | null;
+    Trim(srcPath: any, start: any, end: any, isComplement: any): JsiSkPath | null;
+    Simplify(srcPath: any): JsiSkPath | null;
+    Dash(srcPath: any, on: any, off: any, phase: any): JsiSkPath | null;
+    AsWinding(srcPath: any): JsiSkPath | null;
+    Interpolate(start: any, end: any, weight: any): JsiSkPath | null;
 }
 import { Host } from "./Host";
 import { JsiSkPath } from "./JsiSkPath";

package/lib/typescript/lib/module/skia/web/JsiSkia.d.ts

@@ -10,6 +10,7 @@ export function JsiSkApi(CanvasKit: any): {
     PictureRecorder: () => JsiSkPictureRecorder;
     Picture: JsiSkPictureFactory;
     Path: JsiSkPathFactory;
+    PathBuilder: JsiSkPathBuilderFactory;
     Matrix: (matrix: any) => JsiSkMatrix;
     ColorFilter: JsiSkColorFilterFactory;
     Font: (typeface: any, size: any) => JsiSkFont;
@@ -46,6 +47,7 @@ import { JsiSkPaint } from "./JsiSkPaint";
 import { JsiSkPictureRecorder } from "./JsiSkPictureRecorder";
 import { JsiSkPictureFactory } from "./JsiSkPictureFactory";
 import { JsiSkPathFactory } from "./JsiSkPathFactory";
+import { JsiSkPathBuilderFactory } from "./JsiSkPathBuilderFactory";
 import { JsiSkMatrix } from "./JsiSkMatrix";
 import { JsiSkColorFilterFactory } from "./JsiSkColorFilterFactory";
 import { JsiSkFont } from "./JsiSkFont";

package/lib/typescript/lib/module/specs/SkiaPictureViewNativeComponent.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<object>;
+declare const _default: import("react-native").HostComponent<object>;
 export default _default;

package/lib/typescript/lib/module/specs/WebGPUViewNativeComponent.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("react-native/Libraries/Utilities/codegenNativeComponent").NativeComponentType<object>;
+declare const _default: import("react-native").HostComponent<object>;
 export default _default;

package/lib/typescript/src/animation/functions/interpolatePaths.d.ts

@@ -16,4 +16,4 @@ import type { ExtrapolationType } from "./interpolate";
  * 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, output?: SkPath) => SkPath;
+export declare const interpolatePaths: (value: number, input: number[], outputRange: SkPath[], options?: ExtrapolationType, _output?: SkPath) => SkPath;

package/lib/typescript/src/external/reanimated/interpolators.d.ts

@@ -1,7 +1,16 @@
 import type { ExtrapolationType, SharedValue } from "react-native-reanimated";
-import type { SkPath, SkPoint } from "../../skia/types";
+import type { SkPath, SkPathBuilder, SkPoint } from "../../skia/types";
 export declare const notifyChange: <T>(value: SharedValue<T>) => void;
-export declare const usePathValue: (cb: (path: SkPath) => void, init?: SkPath) => SharedValue<SkPath>;
+/**
+ * Hook for creating animated paths using PathBuilder.
+ * The callback receives a mutable PathBuilder that can be used to construct the path.
+ * The resulting immutable SkPath is stored in a shared value.
+ *
+ * @param cb - Callback that receives the PathBuilder to construct the path
+ * @param init - Optional initial path to add to the builder
+ * @param transform - Optional transform function applied to the built path
+ */
+export declare const usePathValue: (cb: (builder: SkPathBuilder) => void, init?: SkPath, transform?: (path: SkPath) => SkPath) => SharedValue<SkPath>;
 export declare const useClock: () => SharedValue<number>;
 export declare const usePathInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPath[], options?: ExtrapolationType) => SharedValue<SkPath>;
 export declare const useVectorInterpolation: (value: SharedValue<number>, input: number[], outputRange: SkPoint[], options?: ExtrapolationType) => SharedValue<SkPoint>;

package/lib/typescript/src/skia/types/Path/PathBuilder.d.ts

@@ -0,0 +1,201 @@
+import type { SkRect } from "../Rect";
+import type { SkPoint } from "../Point";
+import type { InputRRect } from "../RRect";
+import type { InputMatrix, SkMatrix } from "../Matrix";
+import type { SkJSIInstance } from "../JsiInstance";
+import type { FillType, SkPath } from "./Path";
+/**
+ * SkPathBuilder is a mutable builder for constructing SkPath objects.
+ * Once construction is complete, call build() or detach() to get the immutable SkPath.
+ */
+export interface SkPathBuilder extends SkJSIInstance<"PathBuilder"> {
+    /**
+     * Adds beginning of contour at point (x, y).
+     * @param x - x-axis value of contour start
+     * @param y - y-axis value of contour start
+     * @returns reference to this PathBuilder for chaining
+     */
+    moveTo(x: number, y: number): SkPathBuilder;
+    /**
+     * Adds beginning of contour relative to the last point.
+     * @param x - offset from last point on x-axis
+     * @param y - offset from last point on y-axis
+     * @returns reference to this PathBuilder for chaining
+     */
+    rMoveTo(x: number, y: number): SkPathBuilder;
+    /**
+     * Adds line from last point to (x, y).
+     * @param x - end of line on x-axis
+     * @param y - end of line on y-axis
+     * @returns reference to this PathBuilder for chaining
+     */
+    lineTo(x: number, y: number): SkPathBuilder;
+    /**
+     * Adds line from last point, relative to last point.
+     * @param x - offset from last point on x-axis
+     * @param y - offset from last point on y-axis
+     * @returns reference to this PathBuilder for chaining
+     */
+    rLineTo(x: number, y: number): SkPathBuilder;
+    /**
+     * Adds quad from last point towards (x1, y1), to (x2, y2).
+     */
+    quadTo(x1: number, y1: number, x2: number, y2: number): SkPathBuilder;
+    /**
+     * Relative version of quadTo.
+     */
+    rQuadTo(x1: number, y1: number, x2: number, y2: number): SkPathBuilder;
+    /**
+     * Adds conic from last point towards (x1, y1), to (x2, y2), weighted by w.
+     */
+    conicTo(x1: number, y1: number, x2: number, y2: number, w: number): SkPathBuilder;
+    /**
+     * Relative version of conicTo.
+     */
+    rConicTo(x1: number, y1: number, x2: number, y2: number, w: number): SkPathBuilder;
+    /**
+     * Adds cubic from last point towards (x1, y1), then towards (x2, y2), ending at (x3, y3).
+     */
+    cubicTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): SkPathBuilder;
+    /**
+     * Relative version of cubicTo.
+     */
+    rCubicTo(x1: number, y1: number, x2: number, y2: number, x3: number, y3: number): SkPathBuilder;
+    /**
+     * Appends CLOSE_VERB to the builder, connecting first and last points.
+     */
+    close(): SkPathBuilder;
+    /**
+     * Appends arc to the builder. Arc is part of ellipse bounded by oval.
+     * @param oval - bounds of ellipse containing arc
+     * @param startAngleInDegrees - starting angle of arc in degrees
+     * @param sweepAngleInDegrees - sweep, in degrees. Positive is clockwise
+     * @param forceMoveTo - true to start a new contour with arc
+     */
+    arcToOval(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number, forceMoveTo: boolean): SkPathBuilder;
+    /**
+     * Appends arc to the builder with SVG-style parameters.
+     * @param rx - x-radius of ellipse
+     * @param ry - y-radius of ellipse
+     * @param xAxisRotateInDegrees - rotation of ellipse
+     * @param useSmallArc - if true, use smaller of two arcs
+     * @param isCCW - if true, arc sweeps counter-clockwise
+     * @param x - end point x
+     * @param y - end point y
+     */
+    arcToRotated(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, x: number, y: number): SkPathBuilder;
+    /**
+     * Relative version of arcToRotated.
+     */
+    rArcTo(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, dx: number, dy: number): SkPathBuilder;
+    /**
+     * Appends arc to the builder, tangent to two lines.
+     * @param x1 - x of first tangent point
+     * @param y1 - y of first tangent point
+     * @param x2 - x of second tangent point
+     * @param y2 - y of second tangent point
+     * @param radius - arc radius
+     */
+    arcToTangent(x1: number, y1: number, x2: number, y2: number, radius: number): SkPathBuilder;
+    /**
+     * Adds Rect to the builder.
+     * @param rect - rectangle to add
+     * @param isCCW - if true, draws counter-clockwise
+     */
+    addRect(rect: SkRect, isCCW?: boolean): SkPathBuilder;
+    /**
+     * Adds oval to the builder.
+     * @param oval - bounds of ellipse
+     * @param isCCW - if true, draws counter-clockwise
+     * @param startIndex - index of initial point
+     */
+    addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): SkPathBuilder;
+    /**
+     * Appends arc to the builder as a new contour.
+     * @param oval - bounds of ellipse
+     * @param startAngleInDegrees - starting angle
+     * @param sweepAngleInDegrees - sweep angle
+     */
+    addArc(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number): SkPathBuilder;
+    /**
+     * Adds rounded rectangle to the builder.
+     * @param rrect - rounded rectangle to add
+     * @param isCCW - if true, draws counter-clockwise
+     */
+    addRRect(rrect: InputRRect, isCCW?: boolean): SkPathBuilder;
+    /**
+     * Adds circle to the builder.
+     * @param x - center x
+     * @param y - center y
+     * @param r - radius
+     * @param isCCW - if true, draws counter-clockwise
+     */
+    addCircle(x: number, y: number, r: number, isCCW?: boolean): SkPathBuilder;
+    /**
+     * Adds polygon to the builder from array of points.
+     * @param points - array of points
+     * @param close - if true, close the polygon
+     */
+    addPoly(points: SkPoint[], close: boolean): SkPathBuilder;
+    /**
+     * Adds the path to the builder.
+     * @param src - path to add
+     * @param matrix - optional transform matrix
+     * @param extend - if true, extend rather than append
+     */
+    addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): SkPathBuilder;
+    /**
+     * Sets the fill type for the path.
+     * @param fill - fill type to set
+     */
+    setFillType(fill: FillType): SkPathBuilder;
+    /**
+     * Sets whether the path is volatile (temporary/animating).
+     * @param isVolatile - true if path will be altered frequently
+     */
+    setIsVolatile(isVolatile: boolean): SkPathBuilder;
+    /**
+     * Resets the builder to empty state.
+     */
+    reset(): SkPathBuilder;
+    /**
+     * Translates all points in the builder.
+     * @param dx - translation in x
+     * @param dy - translation in y
+     */
+    offset(dx: number, dy: number): SkPathBuilder;
+    /**
+     * Transforms all points in the builder by the matrix.
+     * @param m - transformation matrix
+     */
+    transform(m: InputMatrix): SkPathBuilder;
+    /**
+     * Returns the bounds of the path being built.
+     */
+    computeBounds(): SkRect;
+    /**
+     * Returns true if the builder has no verbs.
+     */
+    isEmpty(): boolean;
+    /**
+     * Returns the last point added to the builder.
+     */
+    getLastPt(): {
+        x: number;
+        y: number;
+    };
+    /**
+     * Returns the number of points in the builder.
+     */
+    countPoints(): number;
+    /**
+     * Returns a new SkPath with the current builder state.
+     * The builder is NOT reset and can continue to be used.
+     */
+    build(): SkPath;
+    /**
+     * Returns a new SkPath with the current builder state and resets the builder.
+     * More efficient than build() when you're done with this builder.
+     */
+    detach(): SkPath;
+}

package/lib/typescript/src/skia/types/Path/PathBuilderFactory.d.ts

@@ -0,0 +1,13 @@
+import type { SkPath } from "./Path";
+import type { SkPathBuilder } from "./PathBuilder";
+export interface PathBuilderFactory {
+    /**
+     * Creates a new empty PathBuilder.
+     */
+    Make(): SkPathBuilder;
+    /**
+     * Creates a new PathBuilder initialized with the given path's contents.
+     * @param path - path to copy into the builder
+     */
+    MakeFromPath(path: SkPath): SkPathBuilder;
+}

package/lib/typescript/src/skia/types/Path/PathFactory.d.ts

@@ -1,5 +1,8 @@
 import type { SkFont } from "../Font";
-import type { SkPath, PathOp, PathCommand } from "./Path";
+import type { SkRect } from "../Rect";
+import type { SkPoint } from "../Point";
+import type { InputRRect } from "../RRect";
+import type { SkPath, PathOp, PathCommand, StrokeOpts } from "./Path";
 export interface PathFactory {
     Make(): SkPath;
     /**
@@ -26,4 +29,87 @@ export interface PathFactory {
      * Converts the text to a path with the given font at location x / y.
      */
     MakeFromText(text: string, x: number, y: number, font: SkFont): SkPath | null;
+    /**
+     * Creates a path containing a rectangle.
+     * @param rect - the rectangle
+     * @param isCCW - if true, draws counter-clockwise
+     */
+    Rect(rect: SkRect, isCCW?: boolean): SkPath;
+    /**
+     * Creates a path containing an oval (ellipse).
+     * @param rect - bounds of the oval
+     * @param isCCW - if true, draws counter-clockwise
+     * @param startIndex - index of initial point
+     */
+    Oval(rect: SkRect, isCCW?: boolean, startIndex?: number): SkPath;
+    /**
+     * Creates a path containing a circle.
+     * @param x - center x
+     * @param y - center y
+     * @param r - radius
+     */
+    Circle(x: number, y: number, r: number): SkPath;
+    /**
+     * Creates a path containing a rounded rectangle.
+     * @param rrect - the rounded rectangle
+     * @param isCCW - if true, draws counter-clockwise
+     */
+    RRect(rrect: InputRRect, isCCW?: boolean): SkPath;
+    /**
+     * Creates a path containing a line segment.
+     * @param p1 - start point
+     * @param p2 - end point
+     */
+    Line(p1: SkPoint, p2: SkPoint): SkPath;
+    /**
+     * Creates a path containing a polygon from the given points.
+     * @param points - array of points
+     * @param close - if true, close the polygon
+     */
+    Polygon(points: SkPoint[], close: boolean): SkPath;
+    /**
+     * Creates a new stroked path from the input path.
+     * @param path - source path to stroke
+     * @param opts - stroke options (width, cap, join, miter_limit, precision)
+     * @returns stroked path or null if operation fails
+     */
+    Stroke(path: SkPath, opts?: StrokeOpts): SkPath | null;
+    /**
+     * Creates a trimmed path from the input path.
+     * @param path - source path
+     * @param start - start of trim (0-1)
+     * @param end - end of trim (0-1)
+     * @param isComplement - if true, returns the complement
+     * @returns trimmed path or null if operation fails
+     */
+    Trim(path: SkPath, start: number, end: number, isComplement: boolean): SkPath | null;
+    /**
+     * Simplifies the path to non-overlapping contours.
+     * @param path - source path
+     * @returns simplified path or null if operation fails
+     */
+    Simplify(path: SkPath): SkPath | null;
+    /**
+     * Creates a dashed version of the path.
+     * @param path - source path
+     * @param on - length of dash
+     * @param off - length of gap
+     * @param phase - offset into dash pattern
+     * @returns dashed path or null if operation fails
+     */
+    Dash(path: SkPath, on: number, off: number, phase: number): SkPath | null;
+    /**
+     * Creates a path with Winding fill type.
+     * @param path - source path
+     * @returns path with winding fill or null if operation fails
+     */
+    AsWinding(path: SkPath): SkPath | null;
+    /**
+     * Interpolates between two paths.
+     * @param start - starting path
+     * @param end - ending path
+     * @param weight - interpolation weight (0 = start, 1 = end)
+     * @returns interpolated path or null if paths are not interpolatable
+     */
+    Interpolate(start: SkPath, end: SkPath, weight: number): SkPath | null;
 }

package/lib/typescript/src/skia/types/Path/index.d.ts

@@ -1,2 +1,4 @@
 export * from "./Path";
+export * from "./PathBuilder";
+export * from "./PathBuilderFactory";
 export * from "./PathFactory";

package/lib/typescript/src/skia/types/Skia.d.ts

@@ -1,5 +1,5 @@
 import type { ImageFilterFactory } from "./ImageFilter";
-import type { PathFactory } from "./Path";
+import type { PathFactory, PathBuilderFactory } from "./Path";
 import type { ColorFilterFactory } from "./ColorFilter";
 import type { SkFont, FontMgrFactory } from "./Font";
 import type { SkTypeface, TypefaceFactory } from "./Typeface";
@@ -50,6 +50,7 @@ export interface Skia {
     PictureRecorder: () => SkPictureRecorder;
     Picture: PictureFactory;
     Path: PathFactory;
+    PathBuilder: PathBuilderFactory;
     Matrix: (matrix?: readonly number[]) => SkMatrix;
     ColorFilter: ColorFilterFactory;
     Font: (typeface?: SkTypeface, size?: number) => SkFont;

package/lib/typescript/src/skia/web/JsiSkPath.d.ts

@@ -1,57 +1,69 @@
-import type { CanvasKit, Path } from "canvaskit-wasm";
+import type { CanvasKit, PathBuilder as CKPathBuilder } from "canvaskit-wasm";
 import type { FillType, PathCommand, PathOp, SkMatrix, SkPath, SkPoint, SkRect, InputRRect, StrokeOpts, InputMatrix } from "../types";
 import { HostObject } from "./Host";
-import { JsiSkPoint } from "./JsiSkPoint";
 import { JsiSkRect } from "./JsiSkRect";
-export declare class JsiSkPath extends HostObject<Path, "Path"> implements SkPath {
-    constructor(CanvasKit: CanvasKit, ref: Path);
+export declare const toMatrix3x3: (m: InputMatrix) => number[];
+/**
+ * SkPath wraps a CK PathBuilder internally, providing both mutable building
+ * methods and immutable query methods. Use snapshot() internally to get
+ * an immutable CK Path for read-only operations.
+ */
+export declare class JsiSkPath extends HostObject<CKPathBuilder, "Path"> implements SkPath {
+    constructor(CanvasKit: CanvasKit, ref: CKPathBuilder);
+    /** Returns an immutable CK Path snapshot for read-only operations. */
+    private asPath;
+    /** Extract an immutable CK Path from a JsiSkPath value (for CK interop). */
+    static pathFromValue(value: SkPath): import("canvaskit-wasm").Path;
     addPath(src: SkPath, matrix?: SkMatrix, extend?: boolean): this;
     addArc(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number): this;
     addOval(oval: SkRect, isCCW?: boolean, startIndex?: number): this;
-    countPoints(): number;
     addPoly(points: SkPoint[], close: boolean): this;
+    addRect(rect: SkRect, isCCW?: boolean): this;
+    addRRect(rrect: InputRRect, isCCW?: boolean): this;
+    addCircle(x: number, y: number, r: number): this;
     moveTo(x: number, y: number): this;
-    lineTo(x: number, y: number): this;
-    makeAsWinding(): this | null;
-    offset(dx: number, dy: number): this;
-    rArcTo(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, dx: number, dy: number): this;
-    rConicTo(dx1: number, dy1: number, dx2: number, dy2: number, w: number): this;
-    rCubicTo(cpx1: number, cpy1: number, cpx2: number, cpy2: number, x: number, y: number): this;
     rMoveTo(x: number, y: number): this;
+    lineTo(x: number, y: number): this;
     rLineTo(x: number, y: number): this;
+    quadTo(x1: number, y1: number, x2: number, y2: number): this;
     rQuadTo(x1: number, y1: number, x2: number, y2: number): this;
-    setFillType(fill: FillType): this;
-    setIsVolatile(volatile: boolean): this;
-    stroke(opts?: StrokeOpts): this | null;
+    conicTo(x1: number, y1: number, x2: number, y2: number, w: number): this;
+    rConicTo(x1: number, y1: number, x2: number, y2: number, w: number): this;
+    cubicTo(cpx1: number, cpy1: number, cpx2: number, cpy2: number, x: number, y: number): this;
+    rCubicTo(cpx1: number, cpy1: number, cpx2: number, cpy2: number, x: number, y: number): this;
     close(): this;
     reset(): this;
     rewind(): this;
-    computeTightBounds(): SkRect;
     arcToOval(oval: SkRect, startAngleInDegrees: number, sweepAngleInDegrees: number, forceMoveTo: boolean): this;
     arcToRotated(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, x: number, y: number): this;
+    rArcTo(rx: number, ry: number, xAxisRotateInDegrees: number, useSmallArc: boolean, isCCW: boolean, dx: number, dy: number): this;
     arcToTangent(x1: number, y1: number, x2: number, y2: number, radius: number): this;
-    conicTo(x1: number, y1: number, x2: number, y2: number, w: number): this;
+    setFillType(fill: FillType): this;
+    setIsVolatile(_volatile: boolean): this;
+    offset(dx: number, dy: number): this;
+    transform(m: InputMatrix): this;
+    makeAsWinding(): this | null;
+    simplify(): boolean;
+    op(path: SkPath, op: PathOp): boolean;
+    dash(on: number, off: number, phase: number): boolean;
+    stroke(opts?: StrokeOpts): this | null;
+    trim(start: number, stop: number, isComplement: boolean): this | null;
+    countPoints(): number;
+    computeTightBounds(): SkRect;
     contains(x: number, y: number): boolean;
     copy(): JsiSkPath;
-    cubicTo(cpx1: number, cpy1: number, cpx2: number, cpy2: number, x: number, y: number): this;
-    dash(on: number, off: number, phase: number): boolean;
     equals(other: SkPath): boolean;
     getBounds(): JsiSkRect;
-    getFillType(): number;
-    quadTo(x1: number, y1: number, x2: number, y2: number): this;
-    addRect(rect: SkRect, isCCW?: boolean): this;
-    addRRect(rrect: InputRRect, isCCW?: boolean): this;
-    getPoint(index: number): JsiSkPoint;
+    getFillType(): FillType;
+    getPoint(index: number): SkPoint;
     isEmpty(): boolean;
     isVolatile(): boolean;
-    addCircle(x: number, y: number, r: number): this;
-    getLastPt(): JsiSkPoint;
-    op(path: SkPath, op: PathOp): boolean;
-    simplify(): boolean;
+    getLastPt(): {
+        x: number;
+        y: number;
+    };
     toSVGString(): string;
-    trim(start: number, stop: number, isComplement: boolean): this | null;
-    transform(m: InputMatrix): this;
-    interpolate(end: SkPath, t: number, output?: SkPath): SkPath | JsiSkPath | null;
     isInterpolatable(path2: SkPath): boolean;
+    interpolate(end: SkPath, weight: number, output?: SkPath): SkPath | null;
     toCmds(): PathCommand[];
 }