Paint and Styling

/**
 * Core styling component that controls how shapes and content are rendered
 * @param props - Paint properties
 * @returns JSX paint element
 */
function Paint(props: PaintProps): JSX.Element;

interface PaintProps extends ChildrenProps {
  /** Fill or stroke color */
  color?: Color;
  /** Stroke width in pixels */
  strokeWidth?: number;
  /** Fill or stroke style */
  style?: PaintStyle;
  /** Blend mode for compositing */
  blendMode?: BlendMode;
  /** Stroke line join style */
  strokeJoin?: StrokeJoin;
  /** Stroke line cap style */
  strokeCap?: StrokeCap;
  /** Miter limit for stroke joins */
  strokeMiter?: number;
  /** Overall opacity (0.0 to 1.0) */
  opacity?: number;
  /** Enable anti-aliasing */
  antiAlias?: boolean;
  /** Enable dithering */
  dither?: boolean;
}

enum PaintStyle {
  Fill = 0,
  Stroke = 1
}

enum StrokeJoin {
  Miter = 0,
  Round = 1,
  Bevel = 2
}

enum StrokeCap {
  Butt = 0,
  Round = 1,
  Square = 2
}

type Color = string | number | Float32Array;

import { Circle, Paint } from "@shopify/react-native-skia";

// Filled circle
<Circle cx={50} cy={50} r={25}>
  <Paint color="red" />
</Circle>

// Stroked circle with custom properties
<Circle cx={100} cy={50} r={25}>
  <Paint 
    color="blue" 
    style="stroke" 
    strokeWidth={3}
    strokeCap="round"
    strokeJoin="round"
    opacity={0.8}
  />
</Circle>

// Advanced paint with blend mode
<Rect x={0} y={0} width={100} height={100}>
  <Paint 
    color="rgba(255, 0, 0, 0.5)"
    blendMode="multiply"
    antiAlias={true}
    dither={true}
  />
</Rect>

/**
 * Container component for grouping elements with optional layer creation
 * @param props - Group properties
 * @returns JSX group element
 */
function Group(props: GroupProps): JSX.Element;

interface GroupProps extends DrawingNodeProps {
  /** 
   * Layer configuration:
   * - boolean: true creates a layer with default paint
   * - SkPaint: creates a layer with custom paint
   * - ReactElement: creates a layer with paint from element
   */
  layer?: boolean | SkPaint | ReactElement;
  /** Clipping definition */
  clip?: ClipDef;
  /** Invert the clipping region */
  invertClip?: boolean;
}

type ClipDef = SkRRect | SkRect | PathDef;

// Basic grouping
<Group>
  <Circle cx={50} cy={50} r={25}>
    <Paint color="red" />
  </Circle>
  <Rect x={25} y={25} width={50} height={50}>
    <Paint color="blue" opacity={0.5} />
  </Rect>
</Group>

// Group with layer and clipping
<Group 
  layer={true}
  clip={{ x: 0, y: 0, width: 100, height: 100 }}
>
  {/* clipped content */}
</Group>

// Group with custom layer paint
<Group layer={<Paint opacity={0.7} blendMode="multiply" />}>
  {/* content with layer effects */}
</Group>

/**
 * Component for applying blend modes to content
 * @param props - Blend properties
 * @returns JSX blend element
 */
function Blend(props: BlendProps): JSX.Element;

interface BlendProps extends ChildrenProps {
  /** Blend mode for compositing */
  mode: BlendMode;
}

enum BlendMode {
  Clear = 0,
  Src = 1,
  Dst = 2,
  SrcOver = 3,
  DstOver = 4,
  SrcIn = 5,
  DstIn = 6,
  SrcOut = 7,
  DstOut = 8,
  SrcATop = 9,
  DstATop = 10,
  Xor = 11,
  Plus = 12,
  Modulate = 13,
  Screen = 14,
  Overlay = 15,
  Darken = 16,
  Lighten = 17,
  ColorDodge = 18,
  ColorBurn = 19,
  HardLight = 20,
  SoftLight = 21,
  Difference = 22,
  Exclusion = 23,
  Multiply = 24,
  Hue = 25,
  Saturation = 26,
  Color = 27,
  Luminosity = 28
}

/**
 * Component for masking operations
 * @param props - Mask properties
 * @returns JSX mask element
 */
function Mask(props: MaskProps): JSX.Element;

interface MaskProps extends ChildrenProps {
  /** Mask source definition */
  mask: ReactElement;
  /** Masking mode */
  mode?: "alpha" | "luminance";
  /** Invert the mask */
  invertMask?: boolean;
}

// Blend mode application
<Blend mode="multiply">
  <Circle cx={50} cy={50} r={30}>
    <Paint color="red" />
  </Circle>
  <Circle cx={70} cy={50} r={30}>
    <Paint color="blue" />
  </Circle>
</Blend>

// Alpha masking
<Mask
  mask={
    <Circle cx={50} cy={50} r={25}>
      <Paint color="black" />
    </Circle>
  }
  mode="alpha"
>
  <Rect x={0} y={0} width={100} height={100}>
    <Paint color="green" />
  </Rect>
</Mask>

// Color types and utilities
type Color = string | number | Float32Array;

// String formats supported:
// - Named colors: "red", "blue", "transparent"
// - Hex: "#FF0000", "#F00"
// - RGB: "rgb(255, 0, 0)"
// - RGBA: "rgba(255, 0, 0, 0.5)"
// - HSL: "hsl(0, 100%, 50%)"
// - HSLA: "hsla(0, 100%, 50%, 0.5)"

// Number format (ARGB):
// 0xFFFF0000 for opaque red
// 0x80FF0000 for 50% transparent red

// Float32Array format [r, g, b, a]:
// new Float32Array([1.0, 0.0, 0.0, 1.0]) for opaque red

// Base component properties
interface ChildrenProps {
  children?: React.ReactNode;
}

interface DrawingNodeProps extends TransformProps {
  children?: React.ReactNode;
}

// Paint-related enums
enum PaintStyle {
  Fill = 0,
  Stroke = 1
}

enum BlendMode {
  // ... (full enum values listed above)
}

enum StrokeJoin {
  Miter = 0,
  Round = 1,
  Bevel = 2
}

enum StrokeCap {
  Butt = 0,
  Round = 1,
  Square = 2
}

// Path and clipping types
type PathDef = string | SkPath;
type ClipDef = SkRRect | SkRect | PathDef;