Advanced Features

/**
 * Component for rendering recorded pictures
 */
function Picture(props: PictureProps): JSX.Element;

interface PictureProps extends DrawingNodeProps {
  /** Recorded picture to render */
  picture: SkPicture;
}

/**
 * Create picture recorder for capturing drawing commands
 */
function PictureRecorder(): SkPictureRecorder;

interface SkPictureRecorder {
  /** Begin recording to a canvas with bounds */
  beginRecording(bounds: SkRect): SkCanvas;
  
  /** Finish recording and return the picture */
  finishRecordingAsPicture(): SkPicture;
}

interface SkPicture {
  /** Get the recorded bounds */
  getBounds(): SkRect;
  
  /** Play back the picture on a canvas */
  playback(canvas: SkCanvas): void;
  
  /** Create shader from picture */
  makeShader(tmx?: TileMode, tmy?: TileMode, localMatrix?: SkMatrix, bounds?: SkRect): SkShader;
}

/**
 * Picture factory for creating and loading pictures
 */
interface PictureFactory {
  /** Create picture from recorded data */
  MakeFromData(data: SkData): SkPicture | null;
}

/**
 * Component for rendering SVG images
 */
function ImageSVG(props: ImageSVGProps): JSX.Element;

interface ImageSVGProps extends DrawingNodeProps {
  /** SVG object to render */
  svg: SkSVG;
  /** Override SVG width */
  width?: number;
  /** Override SVG height */
  height?: number;
}

/**
 * SVG factory for loading and creating SVG objects
 */
interface SVGFactory {
  /** Create SVG from string data */
  MakeFromString(svg: string): SkSVG;
  
  /** Create SVG from binary data */
  MakeFromData(data: SkData): SkSVG;
}

interface SkSVG {
  /** Get SVG dimensions */
  getSize(): SkSize;
  
  /** Render SVG to canvas */
  render(canvas: SkCanvas): void;
  
  /** Set container size for responsive SVGs */
  setContainerSize(size: SkSize): void;
}

/**
 * Load video for frame access
 * @param url - Video URL or local path
 * @returns Promise resolving to Video object or immediate Video object
 */
function Video(url: string): Promise<Video> | Video;

interface Video {
  /** Get video duration in seconds */
  duration(): number;
  
  /** Get video frame rate */
  framerate(): number;
  
  /** Get video dimensions */
  getSize(): SkSize;
  
  /** Get frame at specific time */
  getFrame(time: number): SkImage;
  
  /** Seek to specific time */
  seek(time: number): void;
  
  /** Get current playback position */
  getCurrentTime(): number;
}

/**
 * Hook for video playback with Reanimated integration
 */
function useVideo(url: string): Video | null;

/**
 * Component for rendering Lottie animations
 */
function Skottie(props: SkottieProps): JSX.Element;

interface SkottieProps extends DrawingNodeProps {
  /** Skottie animation object */
  animation: SkSkottieAnimation;
  /** Current frame (0.0 to 1.0) */
  frame: number;
}

/**
 * Skottie factory for loading Lottie animations
 */
interface SkottieFactory {
  /** Create animation from Lottie JSON string */
  MakeFromString(json: string): SkSkottieAnimation;
  
  /** Create animation from binary data */
  MakeFromData(data: SkData): SkSkottieAnimation;
}

interface SkSkottieAnimation {
  /** Get animation duration in seconds */
  duration(): number;
  
  /** Get animation frame rate */
  fps(): number;
  
  /** Get animation bounds */
  getBounds(): SkRect;
  
  /** Render frame to canvas */
  render(canvas: SkCanvas, bounds: SkRect): void;
  
  /** Seek to specific time */
  seekFrame(frame: number): void;
  
  /** Seek to specific time in seconds */
  seekFrameTime(seconds: number): void;
}

/**
 * Runtime effect factory for creating custom shaders
 */
interface RuntimeEffectFactory {
  /** Create runtime effect from SKSL shader source */
  Make(sksl: string): SkRuntimeEffect | null;
  
  /** Create runtime effect from SKSL with error reporting */
  MakeForShader(sksl: string): { effect: SkRuntimeEffect | null; errors: string };
}

interface SkRuntimeEffect {
  /** Create shader from this effect */
  makeShader(uniforms?: number[], children?: SkShader[]): SkShader;
  
  /** Create shader builder */
  makeShaderBuilder(): SkRuntimeShaderBuilder;
  
  /** Get uniform information */
  getUniforms(): RuntimeEffectUniform[];
  
  /** Get children information */
  getChildren(): RuntimeEffectChild[];
}

interface SkRuntimeShaderBuilder {
  /** Set uniform value by name */
  setUniform(name: string, value: number | number[]): void;
  
  /** Set child shader by name */
  setChild(name: string, shader: SkShader): void;
  
  /** Build the final shader */
  makeShader(localMatrix?: SkMatrix): SkShader;
}

interface RuntimeEffectUniform {
  name: string;
  offset: number;
  type: string;
  count: number;
}

interface RuntimeEffectChild {
  name: string;
  type: string;
}

/**
 * Surface factory for creating rendering surfaces
 */
interface SurfaceFactory {
  /** Create CPU raster surface */
  MakeRasterN32Premul(width: number, height: number): SkSurface | null;
  
  /** Create surface from existing pixels */
  MakeRasterDirect(imageInfo: ImageInfo, pixels: ArrayBuffer, bytesPerRow: number): SkSurface | null;
}

interface SkSurface {
  /** Get the canvas for drawing */
  getCanvas(): SkCanvas;
  
  /** Create image snapshot */
  makeImageSnapshot(bounds?: SkRect): SkImage;
  
  /** Get surface width */
  width(): number;
  
  /** Get surface height */
  height(): number;
  
  /** Flush pending drawing operations */
  flush(): void;
}

/**
 * Create graphics context for GPU rendering
 */
function Context(surface: bigint, width: number, height: number): SkiaContext;

interface SkiaContext {
  /** Flush GPU commands */
  flush(): void;
}

/**
 * Create vertex geometry
 */
function MakeVertices(
  mode: VertexMode,
  positions: SkPoint[],
  textureCoordinates?: SkPoint[],
  colors?: Color[],
  indices?: number[],
  isVolatile?: boolean
): SkVertices;

interface SkVertices {
  /** Get vertex bounds */
  getBounds(): SkRect;
}

enum VertexMode {
  Triangles = 0,
  TriangleStrip = 1,
  TriangleFan = 2
}

/**
 * Native buffer factory for memory management
 */
interface NativeBufferFactory {
  /** Allocate native buffer */
  Make(size: number): SkNativeBuffer;
}

interface SkNativeBuffer {
  /** Get buffer size */
  size(): number;
  
  /** Get typed array view */
  getTypedArray(): Uint8Array;
}

/**
 * Create contour measure iterator for path analysis
 */
function ContourMeasureIter(
  path: SkPath,
  forceClosed: boolean,
  resScale: number
): SkContourMeasureIter;

interface SkContourMeasureIter {
  /** Get next contour measure */
  next(): SkContourMeasure | null;
}

interface SkContourMeasure {
  /** Get contour length */
  length(): number;
  
  /** Get position and tangent at distance */
  getPosTan(distance: number): { pos: SkPoint; tan: SkPoint } | null;
  
  /** Get segment of the contour as path */
  getSegment(startD: number, stopD: number, startWithMoveTo: boolean): SkPath;
  
  /** Check if contour is closed */
  isClosed(): boolean;
}

import { 
  Picture, 
  ImageSVG, 
  Skottie, 
  Skia, 
  drawAsPicture 
} from "@shopify/react-native-skia";

// Create and use pictures
const createPicture = () => {
  const recorder = Skia.PictureRecorder();
  const canvas = recorder.beginRecording({ x: 0, y: 0, width: 100, height: 100 });
  
  const paint = Skia.Paint();
  paint.setColor(Skia.Color("red"));
  canvas.drawCircle(50, 50, 25, paint);
  
  return recorder.finishRecordingAsPicture();
};

// Render picture component
<Picture picture={myPicture} />

// SVG rendering
const svg = Skia.SVG.MakeFromString(`
  <svg width="100" height="100">
    <circle cx="50" cy="50" r="25" fill="blue" />
  </svg>
`);

<ImageSVG svg={svg} />

// Lottie animation
const animation = Skia.Skottie.MakeFromString(lottieJson);

<Skottie animation={animation} frame={animatedProgress} />

// Runtime shader
const effect = Skia.RuntimeEffect.Make(`
  uniform float time;
  uniform vec2 resolution;
  
  half4 main(vec2 coord) {
    vec2 uv = coord / resolution;
    float d = length(uv - 0.5);
    float c = sin(d * 10.0 + time) * 0.5 + 0.5;
    return half4(c, c * 0.5, c * 0.2, 1.0);
  }
`);

if (effect) {
  const shader = effect.makeShader([time, width, height]);
  // Use shader with Paint component
}

// Offscreen rendering
const renderToImage = async () => {
  const image = await drawAsImage(
    <Circle cx={50} cy={50} r={25}>
      <Paint color="green" />
    </Circle>,
    { width: 100, height: 100 }
  );
  return image;
};

// Advanced geometry types
interface SkVertices {
  getBounds(): SkRect;
}

enum VertexMode {
  Triangles = 0,
  TriangleStrip = 1,
  TriangleFan = 2
}

// Image and surface types
interface ImageInfo {
  width: number;
  height: number;
  colorType: ColorType;
  alphaType: AlphaType;
}

enum ColorType {
  Unknown = 0,
  Alpha_8 = 1,
  RGB_565 = 2,
  ARGB_4444 = 3,
  RGBA_8888 = 4,
  BGRA_8888 = 5,
  RGB_888x = 6,
  RGBA_1010102 = 7,
  RGB_101010x = 8,
  Gray_8 = 9,
  RGBA_F16Norm = 10,
  RGBA_F16 = 11,
  RGBA_F32 = 12
}

enum AlphaType {
  Unknown = 0,
  Opaque = 1,
  Premul = 2,
  Unpremul = 3
}

// Tile modes for shaders and images
enum TileMode {
  Clamp = 0,
  Repeat = 1,
  Mirror = 2,
  Decal = 3
}

// Size and dimension types
interface SkSize {
  width: number;
  height: number;
}

// Common utility types
type Color = string | number | Float32Array;
type PathDef = string | SkPath;