Matrix Operations

/**
 * 3x3 transformation matrix (2D transformations)
 */
type Matrix3 = readonly [
  number, number, number,
  number, number, number,
  number, number, number
];

/**
 * 4x4 transformation matrix (3D transformations)
 */
type Matrix4 = readonly [
  number, number, number, number,
  number, number, number, number,
  number, number, number, number,
  number, number, number, number
];

/**
 * 2D vector type for matrix operations
 */
type Vec2 = readonly [number, number];

/**
 * 3x3 identity matrix
 */
const identity3: Matrix3;

/**
 * Multiply two 3x3 matrices
 * @param m1 - First matrix
 * @param m2 - Second matrix
 * @returns Product matrix
 */
function multiply3(m1: Matrix3, m2: Matrix3): Matrix3;

/**
 * Apply matrix transformation to a 2D point
 * @param matrix - 3x3 transformation matrix
 * @param point - Point to transform
 * @returns Transformed point
 */
function mapPoint(matrix: Matrix3, point: Vec2): Vec2;

/**
 * Calculate dot product of two 3D vectors
 * @param row - First vector
 * @param col - Second vector
 * @returns Dot product
 */
function dot3(row: readonly [number, number, number], col: readonly [number, number, number]): number;

/**
 * Multiply 3x3 matrix with 3D vector
 * @param matrix - 3x3 matrix
 * @param vector - 3D vector
 * @returns Transformed vector
 */
function matrixVecMul3(matrix: Matrix3, vector: readonly [number, number, number]): readonly [number, number, number];

/**
 * 4x4 identity matrix
 */
const identity4: Matrix4;

/**
 * Create 3D translation matrix
 * @param x - X translation
 * @param y - Y translation
 * @param z - Z translation
 * @returns Translation matrix
 */
function translate(x: number, y: number, z: number): Matrix4;

/**
 * Create 3D rotation matrix around arbitrary axis
 * @param axis - Rotation axis vector
 * @param angle - Rotation angle in radians
 * @returns Rotation matrix
 */
function rotate(axis: readonly [number, number, number], angle: number): Matrix4;

/**
 * Create X-axis rotation matrix
 * @param angle - Rotation angle in radians
 * @returns Rotation matrix
 */
function rotateX(angle: number): Matrix4;

/**
 * Create Y-axis rotation matrix
 * @param angle - Rotation angle in radians
 * @returns Rotation matrix
 */
function rotateY(angle: number): Matrix4;

/**
 * Create Z-axis rotation matrix
 * @param angle - Rotation angle in radians
 * @returns Rotation matrix
 */
function rotateZ(angle: number): Matrix4;

/**
 * Create perspective transformation matrix
 * @param perspective - Perspective value
 * @returns Perspective matrix
 */
function perspective(perspective: number): Matrix4;

/**
 * Create X-axis skew matrix
 * @param angle - Skew angle in radians
 * @returns Skew matrix
 */
function skewX(angle: number): Matrix4;

/**
 * Create Y-axis skew matrix
 * @param angle - Skew angle in radians
 * @returns Skew matrix
 */
function skewY(angle: number): Matrix4;

/**
 * Multiply two 4x4 matrices
 * @param a - First matrix
 * @param b - Second matrix
 * @returns Product matrix
 */
function multiply4(a: Matrix4, b: Matrix4): Matrix4;

/**
 * Apply 4x4 matrix transformation to 3D point
 * @param matrix - 4x4 transformation matrix
 * @param point - 3D point to transform
 * @returns Transformed point
 */
function mapPoint3d(matrix: Matrix4, point: readonly [number, number, number]): readonly [number, number, number];

/**
 * Convert 4x4 matrix to 3x3 matrix
 * @param matrix - 4x4 matrix
 * @returns 3x3 matrix
 */
function toMatrix3(matrix: Matrix4): Matrix3;

/**
 * 2D transformation types
 */
type Transforms2d = (
  | { translateX: number }
  | { translateY: number }
  | { scale: number }
  | { scaleX: number }
  | { scaleY: number }
  | { skewX: string }
  | { skewY: string }
  | { rotate: string }
  | { rotateZ: string }
)[];

/**
 * 3D transformation types
 */
type Transforms3d = (
  | { translateX: number }
  | { translateY: number }
  | { translateZ: number }
  | { translate: readonly [number, number] | readonly [number, number, number] }
  | { scale: number }
  | { scaleX: number }
  | { scaleY: number }
  | { skewX: number }
  | { skewY: number }
  | { rotateX: number }
  | { rotateY: number }
  | { rotateZ: number }
  | { rotate: number }
  | { perspective: number }
  | { matrix: Matrix4 }
)[];

/**
 * Process 2D transforms into a single 3x3 matrix
 * @param transforms - Array of 2D transformations
 * @returns Combined transformation matrix
 */
function processTransform2d(transforms: Transforms2d): Matrix3;

/**
 * Process 3D transforms into a single 4x4 matrix
 * @param transforms - Array of 3D transformations
 * @returns Combined transformation matrix
 */
function processTransform3d(transforms: Transforms3d): Matrix4;

/**
 * Concatenate matrix with additional transforms
 * @param matrix - Base matrix
 * @param transforms - Additional transforms to apply
 * @returns Combined matrix
 */
function concat4(matrix: Matrix4, transforms: Transforms3d): Matrix4;

/**
 * Convert 2D transforms to SVG matrix string
 * @param transforms - 2D transformations
 * @returns SVG matrix string
 */
function svgMatrix(transforms: Transforms2d): string;

/**
 * Parse angle string to radians
 * @param angle - Angle string (e.g., "45deg" or "1.5")
 * @returns Angle in radians
 */
function parseAngle(angle: string): number;

/**
 * Decompose matrix back to individual transforms
 * @param matrix - Matrix or transforms to decompose
 * @returns Array of decomposed transforms
 */
function decompose2d(matrix: Matrix3 | Transforms2d): readonly [
  { translateX: number },
  { translateY: number },
  { rotateZ: number },
  { scaleX: number },
  { scaleY: number },  
  { rotateZ: number }
];

import {
  processTransform2d,
  processTransform3d,
  multiply3,
  multiply4,
  mapPoint,
  decompose2d,
  svgMatrix
} from "react-native-redash";
import { useAnimatedStyle, useSharedValue } from "react-native-reanimated";

// 2D transformations
const rotation = useSharedValue(0);
const scale = useSharedValue(1);

const animatedStyle = useAnimatedStyle(() => {
  const transforms = [
    { translateX: 50 },
    { rotate: `${rotation.value}deg` },
    { scale: scale.value },
    { translateX: -50 }
  ];
  
  // Process transforms to matrix
  const matrix = processTransform2d(transforms);
  
  // Could apply additional matrix operations here
  const combinedMatrix = multiply3(matrix, identity3);
  
  return {
    transform: transforms // React Native handles the conversion
  };
});

// 3D transformations
const animatedStyle3D = useAnimatedStyle(() => {
  const transforms3d = [
    { perspective: 1000 },
    { rotateY: `${rotation.value}deg` },
    { translateZ: 50 }
  ];
  
  const matrix = processTransform3d(transforms3d);
  
  return {
    transform: transforms3d
  };
});

// Matrix operations for custom calculations
const point = [100, 100] as const;
const transformMatrix = processTransform2d([
  { translateX: 50 },
  { rotate: "45deg" },
  { scale: 1.5 }
]);

const transformedPoint = mapPoint(transformMatrix, point);

import React from "react";
import Svg, { Rect } from "react-native-svg";
import { svgMatrix, processTransform2d } from "react-native-redash";
import { useAnimatedProps, useSharedValue } from "react-native-reanimated";

const AnimatedRect = Animated.createAnimatedComponent(Rect);

export const AnimatedSVGRect = () => {
  const rotation = useSharedValue(0);
  
  const animatedProps = useAnimatedProps(() => {
    const transforms = [
      { translateX: 50 },
      { rotate: `${rotation.value}deg` },
      { translateX: -50 }
    ];
    
    return {
      transform: svgMatrix(transforms)
    };
  });
  
  return (
    <Svg width="100" height="100">
      <AnimatedRect
        x="25"
        y="25"
        width="50"
        height="50"
        fill="blue"
        animatedProps={animatedProps}
      />
    </Svg>
  );
};

/**
 * Utility object with common matrix operations
 */
const Matrix4: {
  translate: typeof translate;
  scale: (sx: number, sy: number, sz: number) => Matrix4;
  rotateX: typeof rotateX;
  rotateY: typeof rotateY;
  rotateZ: typeof rotateZ;
};

function isTranslateX(transform: Transforms2d[0]): transform is { translateX: number };
function isTranslateY(transform: Transforms2d[0]): transform is { translateY: number };
function isScale(transform: Transforms2d[0]): transform is { scale: number };
function isScaleX(transform: Transforms2d[0]): transform is { scaleX: number };
function isScaleY(transform: Transforms2d[0]): transform is { scaleY: number };
function isSkewX(transform: Transforms2d[0]): transform is { skewX: string };
function isSkewY(transform: Transforms2d[0]): transform is { skewY: string };
function isRotate(transform: Transforms2d[0]): transform is { rotate: string };
function isRotateZ(transform: Transforms2d[0]): transform is { rotateZ: string };