pixel-data-js 0.0.2 → 0.1.0

package/src/ImageData/blend-modes.ts

@@ -0,0 +1,228 @@
+import type { BlendColor32, Color32 } from '../_types'
+
+export const sourceOverColor32: BlendColor32 = (src, dst) => {
+  const a = (src >>> 24) & 0xFF
+  if (a === 255) return src
+  if (a === 0) return dst
+
+  // Pattern: (src * a + dst * (255 - a)) >> 8
+  // We process RB and G separately so they don't overflow into each other
+  const rbMask = 0xFF00FF
+  const gMask = 0x00FF00
+
+  const sRB = src & rbMask
+  const sG = src & gMask
+  const dRB = dst & rbMask
+  const dG = dst & gMask
+
+  const invA = 255 - a
+
+  const outRB = ((sRB * a + dRB * invA) >> 8) & rbMask
+  const outG = ((sG * a + dG * invA) >> 8) & gMask
+
+  // Re-pack with opaque alpha (or calculate combined alpha if needed)
+  const outA = (a + (((dst >>> 24) & 0xFF) * invA >> 8))
+  return ((outA << 24) | outRB | outG) >>> 0 as Color32
+}
+
+/**
+ * Screen: Lightens the destination (inverse of Multiply).
+ * Result = 1 - ((1 - Src) * (1 - Dst))
+ */
+export const screenColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math
+  const br = 255 - (((255 - (src & 0xFF)) * (255 - dr)) >> 8)
+  const bg = 255 - (((255 - ((src >> 8) & 0xFF)) * (255 - dg)) >> 8)
+  const bb = 255 - (((255 - ((src >> 16) & 0xFF)) * (255 - db)) >> 8)
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Linear Dodge (Additive): Simply adds the source to the destination.
+ * Clamps at 255.
+ */
+export const linearDodgeColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math (Additive with clamping)
+  const br = Math.min(255, (src & 0xFF) + dr)
+  const bg = Math.min(255, ((src >> 8) & 0xFF) + dg)
+  const bb = Math.min(255, ((src >> 16) & 0xFF) + db)
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Multiply: Darkens the destination based on the source color.
+ * Result = (Src * Dst) / 255
+ */
+export const multiplyColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math
+  const br = ((src & 0xFF) * dr) >> 8
+  const bg = (((src >> 8) & 0xFF) * dg) >> 8
+  const bb = (((src >> 16) & 0xFF) * db) >> 8
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Difference: Subtracts the darker color from the lighter color.
+ * Result = |Src - Dst|
+ */
+export const differenceColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math
+  const br = Math.abs((src & 0xFF) - dr)
+  const bg = Math.abs(((src >> 8) & 0xFF) - dg)
+  const bb = Math.abs(((src >> 16) & 0xFF) - db)
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Hard Light: Decides Multiply vs Screen based on SOURCE brightness.
+ * Acts like a harsh spotlight.
+ */
+export const hardLightColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const sr = src & 0xFF, sg = (src >> 8) & 0xFF, sb = (src >> 16) & 0xFF
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math
+  const br = sr < 128 ? (2 * sr * dr) >> 8 : 255 - (2 * (255 - sr) * (255 - dr) >> 8)
+  const bg = sg < 128 ? (2 * sg * dg) >> 8 : 255 - (2 * (255 - sg) * (255 - dg) >> 8)
+  const bb = sb < 128 ? (2 * sb * db) >> 8 : 255 - (2 * (255 - sb) * (255 - db) >> 8)
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Color Burn: Darkens the destination to reflect the source color.
+ * Intense saturation in the darks.
+ */
+export const colorBurnColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const sr = src & 0xFF, sg = (src >> 8) & 0xFF, sb = (src >> 16) & 0xFF
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math (Avoid division by zero)
+  const br = dr === 255 ? 255 : Math.max(0, 255 - ((255 - dr) << 8) / (sr || 1))
+  const bg = dg === 255 ? 255 : Math.max(0, 255 - ((255 - dg) << 8) / (sg || 1))
+  const bb = db === 255 ? 255 : Math.max(0, 255 - ((255 - db) << 8) / (sb || 1))
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+/**
+ * Overlay: The classic "Contrast" mode.
+ * Decides Multiply vs Screen based on DESTINATION brightness.
+ */
+export const overlayColor32: BlendColor32 = (src, dst) => {
+  const sa = (src >>> 24) & 0xFF
+  if (sa === 0) return dst
+
+  const sr = src & 0xFF, sg = (src >> 8) & 0xFF, sb = (src >> 16) & 0xFF
+  const dr = dst & 0xFF, dg = (dst >> 8) & 0xFF, db = (dst >> 16) & 0xFF
+
+  // 1. Core Math
+  const br = dr < 128 ? (2 * sr * dr) >> 8 : 255 - (2 * (255 - sr) * (255 - dr) >> 8)
+  const bg = dg < 128 ? (2 * sg * dg) >> 8 : 255 - (2 * (255 - sg) * (255 - dg) >> 8)
+  const bb = db < 128 ? (2 * sb * db) >> 8 : 255 - (2 * (255 - sb) * (255 - db) >> 8)
+
+  if (sa === 255) return (0xFF000000 | (bb << 16) | (bg << 8) | br) >>> 0 as Color32
+
+  // 2. Alpha Lerp inlined
+  const invA = 255 - sa
+  const r = (br * sa + dr * invA) >> 8
+  const g = (bg * sa + dg * invA) >> 8
+  const b = (bb * sa + db * invA) >> 8
+  const a = (255 * sa + ((dst >>> 24) & 0xFF) * invA) >> 8
+
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const COLOR_32_BLEND_MODES = {
+  sourceOver: sourceOverColor32,
+  screen: screenColor32,
+  linearDodge: linearDodgeColor32,
+  multiply: multiplyColor32,
+  difference: differenceColor32,
+  overlay: overlayColor32,
+  hardLight: hardLightColor32,
+  colorBurn: colorBurnColor32,
+}

package/src/ImageData/blit.ts

@@ -0,0 +1,145 @@
+import type { BlendColor32, Color32 } from '../_types'
+import { sourceOverColor32 } from './blend-modes'
+
+export type BlendImageDataOptions = {
+  dx?: number
+  dy?: number
+  sx?: number
+  sy?: number
+  sw?: number
+  sh?: number
+  opacity?: number
+  alpha?: number
+  mask?: Uint8Array | null
+  maskMode?: 'binary' | 'alpha'
+  blendFn?: BlendColor32
+}
+
+/**
+ * Blits source ImageData into a destination ImageData using 32-bit integer bitwise blending.
+ * * This function bypasses standard Canvas API limitations by operating directly on
+ * Uint32Array views. It supports various blend modes, binary/alpha masking, and
+ * automatic clipping of both source and destination bounds.
+ * * @param dst - The destination ImageData to write into.
+ * @param src - The source ImageData to read from.
+ * @param dst - The destination ImageData to write to.
+ * @param opts - Configuration for the blit operation.
+ * @param opts.dx - Destination X offset. Defaults to 0.
+ * @param opts.dy - Destination Y offset. Defaults to 0.
+ * @param opts.sx - Source X offset. Defaults to 0.
+ * @param opts.sy - Source Y offset. Defaults to 0.
+ * @param opts.sw - Width of the source area to blit. Defaults to src.width.
+ * @param opts.sh - Height of the source area to blit. Defaults to src.height.
+ * @param opts.opacity - Global strength of the blit (0.0 to 1.0). Defaults to 1.0.
+ * @param opts.alpha - Global strength of the blit (0 to 255). Overrides 'opacity' if provided.
+ * @param opts.mask - An optional Uint8Array acting as a stencil or alpha mask.
+ * Must match source dimensions.
+ * @param opts.maskMode - 'binary' ignores pixels where mask is 0.
+ * 'alpha' scales source alpha by mask value (0-255).
+ * @param opts.blendFn - The math logic used to combine pixels.
+ * Defaults to `sourceOverColor32`.
+ * * @example
+ * blendImageData32(ctx.getImageData(0,0,100,100), sprite, {
+ * blendFn: COLOR_32_BLEND_MODES.multiply,
+ * mask: brushMask,
+ * maskMode: 'alpha'
+ * });
+ */
+export function blendImageData(
+  dst: ImageData,
+  src: ImageData,
+  opts: BlendImageDataOptions,
+) {
+  let {
+    dx = 0,
+    dy = 0,
+    sx = 0,
+    sy = 0,
+    sw = src.width,
+    sh = src.height,
+    maskMode = 'alpha',
+    opacity = 1,
+    alpha,
+    blendFn = sourceOverColor32,
+    mask,
+  } = opts
+
+  // 1. Clip Source Area
+  if (sx < 0) {
+    dx -= sx
+    sw += sx
+    sx = 0
+  }
+  if (sy < 0) {
+    dy -= sy
+    sh += sy
+    sy = 0
+  }
+  sw = Math.min(sw, src.width - sx)
+  sh = Math.min(sh, src.height - sy)
+
+  // 2. Clip Destination Area
+  if (dx < 0) {
+    sx -= dx
+    sw += dx
+    dx = 0
+  }
+  if (dy < 0) {
+    sy -= dy
+    sh += dy
+    dy = 0
+  }
+  const actualW = Math.min(sw, dst.width - dx)
+  const actualH = Math.min(sh, dst.height - dy)
+
+  if (actualW <= 0 || actualH <= 0) return
+
+  // 32-bit views of the same memory
+  const dst32 = new Uint32Array(dst.data.buffer)
+  const src32 = new Uint32Array(src.data.buffer)
+
+  const dw = dst.width
+  const sw_orig = src.width
+
+  const gAlpha = alpha !== undefined
+    ? (alpha | 0)
+    : Math.round(opacity * 255)
+
+  const maskIsAlpha = maskMode === 'alpha'
+
+  for (let iy = 0; iy < actualH; iy++) {
+    const dRow = (iy + dy) * dw
+    const sRow = (iy + sy) * sw_orig
+
+    for (let ix = 0; ix < actualW; ix++) {
+      const di = dRow + (ix + dx)
+      const si = sRow + (ix + sx)
+
+      let s = src32[si] as Color32
+      let sa = (s >>> 24) & 0xFF
+
+      // skip fully transparent pixel
+      if (sa === 0) continue
+
+      let activeWeight = gAlpha
+
+      if (mask) {
+        const m = mask[si]
+        if (m === 0) continue
+        activeWeight = maskIsAlpha ? (m * activeWeight + 128) >> 8 : activeWeight
+      }
+
+      if (activeWeight < 255) {
+        sa = (sa * activeWeight + 128) >> 8
+      }
+
+      // If combined alpha is 0 after masking/opacity, skip the blend math
+      if (sa === 0) continue
+
+      // Re-pack source with final calculated alpha
+      s = ((s & 0x00FFFFFF) | (sa << 24)) >>> 0 as Color32
+
+      dst32[di] = blendFn(s, dst32[di] as Color32)
+    }
+  }
+}

package/src/ImageData/read-write-pixels.ts

@@ -0,0 +1,36 @@
+import type { Color32, ImageDataLike } from '../_types'
+
+export function makeImageDataColor32Adapter(imageData: ImageDataLike) {
+  const data32 = new Uint32Array(imageData.data.buffer)
+
+  function inBounds(x: number, y: number) {
+    return x < 0 || x >= imageData.width || y < 0 || y >= imageData.height
+  }
+
+  function setPixel(
+    x: number,
+    y: number,
+    color: Color32,
+  ): void {
+    if (x < 0 || x >= imageData.width || y < 0 || y >= imageData.height) return
+    data32[y * imageData.width + x] = color
+  }
+
+  function getPixel(
+    x: number,
+    y: number,
+  ): Color32 | undefined {
+    if (x < 0 || x >= imageData.width || y < 0 || y >= imageData.height) return
+
+    return data32[y * imageData.width + x] as Color32
+  }
+
+  return {
+    inBounds,
+    imageData,
+    data32,
+    setPixel,
+    getPixel,
+  }
+}
+

package/src/ImageData/serialization.ts

@@ -1,37 +1,48 @@
-export type SerializedImageData = {
-  width: number,
-  height: number,
-  data: string,
+import type { Base64EncodedUInt8Array, ImageDataLike, SerializedImageData } from '../_types'
+
+export function base64EncodeArrayBuffer(buffer: ArrayBufferLike): Base64EncodedUInt8Array {
+  const binary = String.fromCharCode(...new Uint8Array(buffer))
+  return btoa(binary) as Base64EncodedUInt8Array
+}
+
+export function base64DecodeArrayBuffer(encoded: Base64EncodedUInt8Array): Uint8ClampedArray {
+  const binary = atob(encoded)
+  const bytes = new Uint8ClampedArray(binary.length)
+  for (let i = 0; i < binary.length; i++) {
+    bytes[i] = binary.charCodeAt(i)
+  }
+  return bytes
 }
 
 /**
- * Serialize for use in JSON. Stored as base64 encoded string.
+ * Serialize for use in JSON. Pixel data is stored as base64 encoded string.
  */
-export function serializeImageData<T extends ImageData>(imageData: T): SerializedImageData {
-  const binary = String.fromCharCode(...new Uint8Array(imageData.data.buffer))
-  const base64 = btoa(binary)
-
+export function serializeImageData<T extends ImageDataLike>(imageData: T): SerializedImageData {
   return {
     width: imageData.width,
     height: imageData.height,
-    data: base64,
+    data: base64EncodeArrayBuffer(imageData.data.buffer),
   }
 }
 
-export function serializeNullableImageData<T extends ImageData | null>(imageData: T): T extends null ? null : SerializedImageData {
+export function serializeNullableImageData<T extends ImageDataLike | null>(imageData: T): T extends null ? null : SerializedImageData {
   if (!imageData) return null as any
 
   return serializeImageData(imageData) as any
 }
 
-export function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {
-  const binary = atob(serialized.data as string)
-  const bytes = new Uint8ClampedArray(binary.length)
-  for (let i = 0; i < binary.length; i++) {
-    bytes[i] = binary.charCodeAt(i)
+export function deserializeRawImageData<T extends SerializedImageData>(serialized: T): ImageDataLike {
+  return {
+    width: serialized.width,
+    height: serialized.height,
+    data: base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array),
   }
+}
+
+export function deserializeImageData<T extends SerializedImageData>(serialized: T): ImageData {
+  const data = base64DecodeArrayBuffer(serialized.data as Base64EncodedUInt8Array)
 
-  return new ImageData(bytes, serialized.width, serialized.height) as any
+  return new ImageData(data as ImageDataArray, serialized.width, serialized.height) as any
 }
 
 export function deserializeNullableImageData<T extends SerializedImageData | null>(serialized: T): T extends null ? null : ImageData {

package/src/_types.ts

@@ -0,0 +1,24 @@
+// ALL values are 0-255 (including alpha which in CSS is 0-1)
+export type RGBA = { r: number, g: number, b: number, a: number }
+
+// A 32-bit integer containing r,g,b,a data
+export type Color32 = number & { readonly __brandColor32: unique symbol };
+
+// ALL values are floats from 0-1
+export type RGBAFloat = RGBA & { readonly __brandRGBAFloat: unique symbol }
+
+export type BlendColor32 = (src: Color32, dst: Color32) => Color32;
+
+export type ImageDataLike = {
+  width: number
+  height: number
+  data: Uint8ClampedArray
+}
+
+export type SerializedImageData = {
+  width: number,
+  height: number,
+  data: string,
+}
+
+export type Base64EncodedUInt8Array = string & { readonly __brandBase64UInt8Array: unique symbol }

package/src/color.ts

@@ -0,0 +1,112 @@
+import type { Color32, RGBA } from './_types'
+
+/**
+ * Packs RGBA into a 32-bit integer compatible with
+ * Little-Endian Uint32Array views on ImageData.
+ */
+export function packColor(r: number, g: number, b: number, a: number): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export function packRGBA({ r, g, b, a }: RGBA): Color32 {
+  return ((a << 24) | (b << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+export const unpackRed = (packed: Color32): number => (packed >>> 0) & 0xFF
+export const unpackGreen = (packed: Color32): number => (packed >>> 8) & 0xFF
+export const unpackBlue = (packed: Color32): number => (packed >>> 16) & 0xFF
+export const unpackAlpha = (packed: Color32): number => (packed >>> 24) & 0xFF
+
+export function unpackColor(packed: Color32): RGBA {
+  return {
+    r: (packed >>> 0) & 0xFF,
+    g: (packed >>> 8) & 0xFF,
+    b: (packed >>> 16) & 0xFF,
+    a: (packed >>> 24) & 0xFF,
+  }
+}
+
+const SCRATCH_RGBA: RGBA = { r: 0, g: 0, b: 0, a: 0 }
+
+// uses a scratch arg for memory perf. Be careful about re-use.
+export function unpackColorTo(packed: Color32, scratch = SCRATCH_RGBA): RGBA {
+  scratch.r = (packed >>> 0) & 0xFF
+  scratch.g = (packed >>> 8) & 0xFF
+  scratch.b = (packed >>> 16) & 0xFF
+  scratch.a = (packed >>> 24) & 0xFF
+  return scratch
+}
+
+export function colorDistance(a: Color32, b: Color32): number {
+  const dr = (a & 0xFF) - (b & 0xFF)
+  const dg = ((a >>> 8) & 0xFF) - ((b >>> 8) & 0xFF)
+  const db = ((a >>> 16) & 0xFF) - ((b >>> 16) & 0xFF)
+  const da = ((a >>> 24) & 0xFF) - ((b >>> 24) & 0xFF)
+  return dr * dr + dg * dg + db * db + da * da
+}
+
+/**
+ * Linearly interpolates between two 32-bit colors using a floating-point weight.
+ * * This is the preferred method for UI animations or scenarios where high
+ * precision is required. It uses the standard `a + t * (b - a)` formula
+ * for each channel.
+ * @param a - The starting color as a 32-bit integer (AABBGGRR).
+ * @param b - The target color as a 32-bit integer (AABBGGRR).
+ * @param t - The interpolation factor between 0.0 and 1.0.
+ * @returns The interpolated 32-bit color.
+ */
+export function lerpColor32(a: Color32, b: Color32, t: number): Color32 {
+  const r = (a & 0xFF) + t * ((b & 0xFF) - (a & 0xFF))
+  const g = ((a >>> 8) & 0xFF) + t * (((b >>> 8) & 0xFF) - ((a >>> 8) & 0xFF))
+  const b_ = ((a >>> 16) & 0xFF) + t * (((b >>> 16) & 0xFF) - ((a >>> 16) & 0xFF))
+  const a_ = ((a >>> 24) & 0xFF) + t * (((b >>> 24) & 0xFF) - ((a >>> 24) & 0xFF))
+
+  return ((a_ << 24) | (b_ << 16) | (g << 8) | r) >>> 0 as Color32
+}
+
+/**
+ * Linearly interpolates between two 32-bit colors using integer fixed-point math.
+ * Highly optimized for image processing and real-time blitting. It processes
+ * channels in parallel using bitmasks (RB and GA pairs).
+ * @note Subject to a 1-bit drift (rounding down) due to fast bit-shift division.
+ * @param src - The source (foreground) color as a 32-bit integer.
+ * @param dst - The destination (background) color as a 32-bit integer.
+ * @param w - The blend weight as a byte value from 0 to 255. Where 0 is 100% dst and 255 is 100% src
+ * @returns The blended 32-bit color.
+ */export function lerpColor32Fast(src: Color32, dst: Color32, w: number): Color32 {
+  const invA = 255 - w;
+
+  // Masking Red and Blue: 0x00FF00FF
+  // We process R and B in one go, then shift back down
+  const rb = (((src & 0x00FF00FF) * w + (dst & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF;
+
+  // Masking Green and Alpha: 0xFF00FF00
+  // We shift down first to avoid overflow, then shift back up
+  const ga = ((((src >>> 8) & 0x00FF00FF) * w + ((dst >>> 8) & 0x00FF00FF) * invA) >>> 8) & 0x00FF00FF;
+
+  return (rb | (ga << 8)) >>> 0 as Color32;
+}
+
+// Convert 0xAABBGGRR to #RRGGBBAA
+export function color32ToHex(color: Color32): string {
+  const r = (color & 0xFF).toString(16).padStart(2, '0')
+  const g = ((color >>> 8) & 0xFF).toString(16).padStart(2, '0')
+  const b = ((color >>> 16) & 0xFF).toString(16).padStart(2, '0')
+  const a = ((color >>> 24) & 0xFF).toString(16).padStart(2, '0')
+  return `#${r}${g}${b}${a}`
+}
+
+/**
+ * Converts a 32-bit integer (0xAABBGGRR) to a CSS rgba() string.
+ * Example: 0xFF0000FF -> "rgba(255,0,0,1)"
+ */
+export function color32ToCssRGBA(color: Color32): string {
+  const r = color & 0xFF
+  const g = (color >>> 8) & 0xFF
+  const b = (color >>> 16) & 0xFF
+  const a = (color >>> 24) & 0xFF
+
+  const alpha = Number((a / 255).toFixed(3))
+
+  return `rgba(${r},${g},${b},${alpha})`
+}

package/src/index.ts

@@ -1 +1,5 @@
+export * from './color'
 export * from './ImageData/serialization'
+export * from './ImageData/blit'
+export * from './ImageData/blend-modes'
+export * from './ImageData/read-write-pixels'