@felipe-software/react-native-gpui 0.0.0-stage → 1.0.1

package/scripts/hot-update-alias-plugin.mjs

@@ -0,0 +1,88 @@
+const REACT_EXPORTS = [
+  'Children', 'Component', 'Fragment', 'Profiler', 'PureComponent', 'StrictMode', 'Suspense',
+  'cloneElement', 'createContext', 'createElement', 'createRef', 'forwardRef', 'isValidElement',
+  'lazy', 'memo', 'startTransition', 'use', 'useActionState', 'useCallback', 'useContext',
+  'useDebugValue', 'useDeferredValue', 'useEffect', 'useId', 'useImperativeHandle',
+  'useInsertionEffect', 'useLayoutEffect', 'useMemo', 'useOptimistic', 'useReducer', 'useRef',
+  'useState', 'useSyncExternalStore', 'useTransition', 'version',
+]
+
+const RNGPUI_EXPORTS = [
+  'createRoot', 'render', 'AppRegistry', 'unstable_batchedUpdates',
+  'View', 'Text', 'TextInput', 'Image', 'Svg', 'WebView',
+  'SystemView', 'ScrollView', 'Pressable', 'TouchableOpacity',
+  'RefreshControl', 'Diff',
+  'TouchableHighlight', 'TouchableWithoutFeedback', 'ListGroup', 'Button', 'NativeButton',
+  'NativeTextInput', 'SafeAreaView',
+  'KeyboardAvoidingView', 'Switch', 'FlatList', 'SectionList', 'ActivityIndicator', 'StatusBar',
+  'Modal', 'requireNativeComponent', 'codegenNativeComponent', 'codegenNativeCommands',
+  'StyleSheet', 'normalizeStyle', 'LiquidGlassBackground', 'LiquidGlassView', 'EffectSurface',
+  'SmokeEffectSurface', 'effectBackgroundImage', 'smokeEffectBackgroundImage', 'Dimensions',
+  'useWindowDimensions', 'Platform', 'PixelRatio', 'useColorScheme', 'Appearance',
+  'DynamicColorIOS', 'PlatformColor', 'I18nManager', 'Alert', 'Keyboard', 'BackHandler',
+  'AppState', 'Linking', 'InteractionManager', 'LayoutAnimation', 'UIManager', 'NativeModules',
+  'findNodeHandle', 'processColor', 'resolveColorValue', 'PanResponder', 'Vibration',
+  'DeviceEventEmitter', 'NativeEventEmitter', 'AccessibilityInfo', 'FilePicker', 'VoiceRecorder',
+  'Animated', 'AnimatedValue', 'Easing', 'AppCommands', 'Dock', 'NativeClipboard', 'NativeLayout',
+  'NativeMenus', 'NativeWindow', 'PerformanceHUD', 'Renderer', 'setupTamaguiNativeMenus',
+  'KeyboardNavigationProvider', 'useKeyboardNavigation', 'useKeyboardNavigationController',
+  'useKeyboardNavigationState', 'useKeyboardNavigationTarget', 'useKeyboardNavigationKeyPress',
+  'useKeyboardNavigationWindowKeyboard', 'mergeRefs', 'enabledKeyboardNavigationTargets',
+  'firstKeyboardNavigationTarget', 'hasKeyboardNavigationModifier', 'nextKeyboardNavigationTarget',
+  'nextSequentialKeyboardNavigationTarget',
+  'Portal', 'PortalHost', 'PortalProvider', 'NativePortal', 'NativePortalHost', 'usePortal',
+  'setupTamaguiNativePortal', 'startBridge', 'platformDriver', 'registerPseudoListener',
+  'TurboModuleRegistry', 'Window', 'useAppState', 'useWindowFocused',
+]
+
+export function rngpuiHotUpdateAliasPlugin() {
+  return {
+    name: 'rngpui-hot-update-aliases',
+    setup(build) {
+      build.onResolve({ filter: /^react$/ }, () => ({ path: 'rngpui-hot:react', namespace: 'rngpui-hot' }))
+      build.onResolve({ filter: /^react\/jsx-runtime$/ }, () => ({ path: 'rngpui-hot:react/jsx-runtime', namespace: 'rngpui-hot' }))
+      build.onResolve({ filter: /^react\/jsx-dev-runtime$/ }, () => ({ path: 'rngpui-hot:react/jsx-dev-runtime', namespace: 'rngpui-hot' }))
+      build.onResolve({ filter: /^react\/compiler-runtime$/ }, () => ({ path: 'rngpui-hot:react/compiler-runtime', namespace: 'rngpui-hot' }))
+      build.onResolve({ filter: /^(?:@felipe-software\/)?react-native-gpui$/ }, () => ({ path: 'rngpui-hot:react-native-gpui', namespace: 'rngpui-hot' }))
+      build.onResolve({ filter: /^react-native$/ }, () => ({ path: 'rngpui-hot:react-native', namespace: 'rngpui-hot' }))
+      // Repository examples import the source entry directly. A hot bundle must
+      // still reuse the renderer already installed by the initial bundle.
+      build.onResolve({ filter: /^\.\.\/src\/index(?:\.ts)?$/ }, () => ({
+        path: 'rngpui-hot:react-native-gpui',
+        namespace: 'rngpui-hot',
+      }))
+
+      build.onLoad({ filter: /^rngpui-hot:react$/, namespace: 'rngpui-hot' }, () => ({
+        loader: 'js',
+        contents: moduleShim('react', REACT_EXPORTS, true),
+      }))
+      build.onLoad({ filter: /^rngpui-hot:react\/jsx-runtime$/, namespace: 'rngpui-hot' }, () => ({
+        loader: 'js',
+        contents: moduleShim('react/jsx-runtime', ['Fragment', 'jsx', 'jsxs'], true),
+      }))
+      build.onLoad({ filter: /^rngpui-hot:react\/jsx-dev-runtime$/, namespace: 'rngpui-hot' }, () => ({
+        loader: 'js',
+        contents: moduleShim('react/jsx-dev-runtime', ['Fragment', 'jsxDEV'], true),
+      }))
+      build.onLoad({ filter: /^rngpui-hot:react\/compiler-runtime$/, namespace: 'rngpui-hot' }, () => ({
+        loader: 'js',
+        contents: moduleShim('react/compiler-runtime', ['c'], false),
+      }))
+      build.onLoad({ filter: /^rngpui-hot:react-native-gpui$/, namespace: 'rngpui-hot' }, () => ({
+        loader: 'js',
+        contents: moduleShim('react-native-gpui', RNGPUI_EXPORTS, true),
+      }))
+      build.onLoad({ filter: /^rngpui-hot:react-native$/, namespace: 'rngpui-hot' }, () => ({
+        loader: 'js',
+        contents: moduleShim('react-native', RNGPUI_EXPORTS, true),
+      }))
+    },
+  }
+}
+
+function moduleShim(name, exports, defaultExport) {
+  const lines = [`const mod = globalThis.__rngpuiHotModules[${JSON.stringify(name)}];`]
+  if (defaultExport) lines.push('export default (mod.default || mod);')
+  for (const key of exports) lines.push(`export const ${key} = mod[${JSON.stringify(key)}];`)
+  return lines.join('\n')
+}

package/scripts/native-package-exports-plugin.mjs

@@ -0,0 +1,235 @@
+import { existsSync, readFileSync, readdirSync, realpathSync, statSync } from 'node:fs'
+import { dirname, join, resolve } from 'node:path'
+
+const packageJsonCache = new Map()
+
+// Force React Native package entry points to win. Node/Bun pick the FIRST
+// matching key in an export map, so a package that lists `browser` before
+// `react-native` (nanoid, tamagui, on-zero, …) resolves to its DOM build even
+// with `conditions: ['react-native']` set on the build. Bun also ignores the
+// legacy top-level `react-native` field used by packages such as
+// react-native-screens. This plugin overrides those, and only those.
+//
+// It must claim ONLY the packages it actually rewrites. A Bun 1.3.14 bundler bug
+// makes an onResolve callback that MATCHES a specifier and returns `undefined`
+// drop the module across an `export *` re-export edge — silently, with no build
+// error, leaving a dangling namespace reference that throws at runtime
+// ("Property 'import_manifest' doesn't exist"). A broad `/^[^./].*/` filter put
+// every bare import in range of that bug to serve the ~7% that need the
+// override. So the filter is built from the packages that really declare a
+// react-native condition or entry point; everything else never enters the
+// plugin and Bun resolves it natively. Keep that invariant: do not widen this
+// filter.
+export function nativePackageExportsPlugin({ root, name = 'native package exports' } = {}) {
+  const fallbackRoot = root ? resolve(root) : process.cwd()
+  const filter = reactNativePackageFilter(fallbackRoot)
+  return {
+    name,
+    setup(build) {
+      build.onResolve({ filter }, (args) =>
+        resolveReactNativePackageExport(args.path, args.importer ? dirname(args.importer) : fallbackRoot)
+      )
+    },
+  }
+}
+
+// every installed package whose export map declares a react-native condition
+// or whose top-level react-native field names its native entry point:
+// the root tree, the ancestor node_modules a workspace resolves through, and
+// nested node_modules (a hoisted tree still nests duplicates). realpath dedup
+// keeps a symlinked store from being walked twice or cycling. ~1800
+// package.json reads, ~110ms, once per build.
+function reactNativePackageFilter(root) {
+  const names = new Set()
+  const nodeModulesStack = []
+  for (let dir = root; ; dir = dirname(dir)) {
+    nodeModulesStack.push(join(dir, 'node_modules'))
+    if (dir === dirname(dir)) break
+  }
+  const seenNodeModules = new Set()
+
+  while (nodeModulesStack.length) {
+    const nodeModules = nodeModulesStack.pop()
+    let realNodeModules
+    let entries
+    try {
+      realNodeModules = realpathSync(nodeModules)
+      if (seenNodeModules.has(realNodeModules)) continue
+      seenNodeModules.add(realNodeModules)
+      entries = readdirSync(nodeModules, { withFileTypes: true })
+    } catch {
+      continue
+    }
+
+    const packageDirs = []
+    for (const entry of entries) {
+      if (entry.name.startsWith('.')) continue
+      const entryPath = join(nodeModules, entry.name)
+      let directory
+      try {
+        directory = statSync(entryPath).isDirectory()
+      } catch {
+        directory = false
+      }
+      if (!directory) continue
+      if (!entry.name.startsWith('@')) {
+        packageDirs.push(entryPath)
+        continue
+      }
+      let scopedEntries
+      try {
+        scopedEntries = readdirSync(entryPath, { withFileTypes: true })
+      } catch {
+        continue
+      }
+      for (const scopedEntry of scopedEntries) {
+        const scopedPath = join(entryPath, scopedEntry.name)
+        try {
+          if (statSync(scopedPath).isDirectory()) packageDirs.push(scopedPath)
+        } catch {}
+      }
+    }
+
+    for (const packageDir of packageDirs) {
+      const pkg = readPackageJson(join(packageDir, 'package.json'))
+      const values = [pkg?.exports]
+      let hasReactNativeTarget = false
+      while (values.length && !hasReactNativeTarget) {
+        const value = values.pop()
+        if (!value || typeof value !== 'object') continue
+        if (Object.prototype.hasOwnProperty.call(value, 'react-native')) {
+          hasReactNativeTarget = true
+          break
+        }
+        values.push(...Object.values(value))
+      }
+      if ((hasReactNativeTarget || typeof pkg?.['react-native'] === 'string') && pkg?.name) {
+        names.add(pkg.name)
+      }
+      const nestedNodeModules = join(packageDir, 'node_modules')
+      if (existsSync(nestedNodeModules)) nodeModulesStack.push(nestedNodeModules)
+    }
+  }
+
+  if (!names.size) return /\b\B/
+  const escaped = [...names]
+    .sort()
+    .map((value) => value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'))
+  return new RegExp(`^(?:${escaped.join('|')})(?:/|$)`)
+}
+
+function resolveReactNativePackageExport(specifier, importer) {
+  const parsed = parsePackageSpecifier(specifier)
+  if (!parsed) return undefined
+  let defaultPath
+  try {
+    defaultPath = Bun.resolveSync(specifier, importer)
+  } catch {
+    return undefined
+  }
+  const packageJsonPath = findPackageJson(parsed.name, defaultPath, importer)
+  if (!packageJsonPath) return { path: defaultPath }
+  const pkg = readPackageJson(packageJsonPath)
+  if (!parsed.subpath && typeof pkg?.['react-native'] === 'string') {
+    const nativeEntry = pkg['react-native'].startsWith('.')
+      ? pkg['react-native']
+      : `./${pkg['react-native']}`
+    return { path: Bun.resolveSync(nativeEntry, dirname(packageJsonPath)) }
+  }
+  if (!pkg?.exports) return { path: defaultPath }
+  const exportKey = parsed.subpath ? `.${parsed.subpath}` : '.'
+  const match = exportValueForKey(pkg.exports, exportKey)
+  if (!match) return { path: defaultPath }
+  const target = preferredReactNativeTarget(match.value)
+  // bun 1.3.9 can drop a re-exported module when a matching onResolve hook
+  // returns undefined. once the narrowed filter matches a package name, every
+  // successfully resolved subpath must return the path bun selected.
+  if (!target) return { path: defaultPath }
+  const path = match.pattern ? target.replaceAll('*', match.pattern) : target
+  return { path: resolve(dirname(packageJsonPath), path) }
+}
+
+function parsePackageSpecifier(specifier) {
+  if (
+    specifier.startsWith('.') ||
+    specifier.startsWith('/') ||
+    specifier.startsWith('node:') ||
+    /^[a-zA-Z]+:/.test(specifier)
+  ) {
+    return null
+  }
+  const parts = specifier.split('/')
+  const name = specifier.startsWith('@') ? parts.slice(0, 2).join('/') : parts[0]
+  const subpath = specifier.slice(name.length) || ''
+  return { name, subpath }
+}
+
+function findPackageJson(packageName, resolvedPath, importer) {
+  try {
+    return Bun.resolveSync(`${packageName}/package.json`, importer)
+  } catch {}
+  return findPackageJsonAbove(resolvedPath, packageName)
+}
+
+function findPackageJsonAbove(resolvedPath, packageName) {
+  let dir = dirname(resolvedPath)
+  while (dir !== dirname(dir)) {
+    const candidate = join(dir, 'package.json')
+    if (existsSync(candidate) && readPackageJson(candidate)?.name === packageName) return candidate
+    dir = dirname(dir)
+  }
+  return null
+}
+
+function readPackageJson(path) {
+  if (packageJsonCache.has(path)) return packageJsonCache.get(path)
+  let value = null
+  try {
+    value = JSON.parse(readFileSync(path, 'utf8'))
+  } catch {}
+  packageJsonCache.set(path, value)
+  return value
+}
+
+function exportValueForKey(exports, key) {
+  if (key === '.' && (typeof exports === 'string' || Array.isArray(exports))) {
+    return { value: exports }
+  }
+  if (!exports || typeof exports !== 'object' || Array.isArray(exports)) return null
+  if (Object.prototype.hasOwnProperty.call(exports, key)) return { value: exports[key] }
+  if (key === '.' && isConditionalExport(exports)) return { value: exports }
+  for (const [pattern, value] of Object.entries(exports)) {
+    if (!pattern.includes('*')) continue
+    const [prefix, suffix] = pattern.split('*')
+    if (!key.startsWith(prefix) || !key.endsWith(suffix)) continue
+    return { value, pattern: key.slice(prefix.length, key.length - suffix.length) }
+  }
+  return null
+}
+
+function isConditionalExport(value) {
+  return Object.keys(value).some((key) => !key.startsWith('.'))
+}
+
+function preferredReactNativeTarget(value) {
+  if (!value || typeof value !== 'object' || Array.isArray(value)) return null
+  if (!Object.prototype.hasOwnProperty.call(value, 'react-native')) return null
+  return preferredExportTarget(value['react-native'])
+}
+
+function preferredExportTarget(value) {
+  if (typeof value === 'string') return value
+  if (Array.isArray(value)) {
+    for (const item of value) {
+      const target = preferredExportTarget(item)
+      if (target) return target
+    }
+    return null
+  }
+  if (!value || typeof value !== 'object') return null
+  for (const key of ['import', 'default', 'require']) {
+    const target = preferredExportTarget(value[key])
+    if (target) return target
+  }
+  return null
+}

package/scripts/pixel.mjs

@@ -0,0 +1,152 @@
+// Pixel / color sampling on decoded PNGs — the "what color is it actually
+// rendering" primitives the conformance + parity scripts kept re-deriving by
+// hand. Operates on a decoded image ({ width, height, rgba }) from png.mjs, or
+// on a path/Buffer (auto-decoded). All colors come back as { r, g, b, a, hex }.
+import { decodePng, readPng } from './png.mjs'
+
+// accept a decoded {width,height,rgba}, a Buffer, or a file path.
+export function toImage(src) {
+    if (src && typeof src === 'object' && src.rgba && typeof src.width === 'number') return src
+    if (Buffer.isBuffer(src)) return decodePng(src)
+    if (typeof src === 'string') return readPng(src)
+    throw new Error('expected a decoded image, png Buffer, or file path')
+}
+
+export function toHex({ r, g, b }) {
+    const h = (n) => Math.round(clamp(n, 0, 255)).toString(16).padStart(2, '0')
+    return `#${h(r)}${h(g)}${h(b)}`
+}
+
+// "#rrggbb" / "#rgb" / "#rrggbbaa" / "r,g,b[,a]" → { r, g, b, a }
+export function parseColor(value) {
+    if (value && typeof value === 'object') return { a: 255, ...value }
+    const s = String(value).trim()
+    if (s.startsWith('#')) {
+        let hex = s.slice(1)
+        if (hex.length === 3) hex = hex.split('').map((c) => c + c).join('')
+        if (hex.length === 6) hex += 'ff'
+        if (hex.length !== 8) throw new Error(`invalid hex color "${value}"`)
+        return {
+            r: parseInt(hex.slice(0, 2), 16),
+            g: parseInt(hex.slice(2, 4), 16),
+            b: parseInt(hex.slice(4, 6), 16),
+            a: parseInt(hex.slice(6, 8), 16),
+        }
+    }
+    const parts = s.split(',').map((n) => Number(n.trim()))
+    if (parts.length < 3 || parts.some((n) => !Number.isFinite(n))) throw new Error(`invalid color "${value}"`)
+    const [r, g, b, a = 255] = parts
+    return { r, g, b, a }
+}
+
+function withHex(color) {
+    return { ...color, hex: toHex(color) }
+}
+
+export function pixelAt(src, x, y) {
+    const img = toImage(src)
+    const px = Math.round(x)
+    const py = Math.round(y)
+    if (px < 0 || py < 0 || px >= img.width || py >= img.height) {
+        throw new Error(`pixel ${px},${py} out of bounds (${img.width}x${img.height})`)
+    }
+    const i = (py * img.width + px) * 4
+    return withHex({ r: img.rgba[i], g: img.rgba[i + 1], b: img.rgba[i + 2], a: img.rgba[i + 3] })
+}
+
+// clamp a rect to image bounds; default rect = whole image.
+function resolveRect(img, rect) {
+    if (!rect) return { x: 0, y: 0, width: img.width, height: img.height }
+    const x = Math.max(0, Math.round(rect.x ?? 0))
+    const y = Math.max(0, Math.round(rect.y ?? 0))
+    const width = Math.min(img.width - x, Math.round(rect.width ?? img.width))
+    const height = Math.min(img.height - y, Math.round(rect.height ?? img.height))
+    if (width <= 0 || height <= 0) throw new Error(`empty rect ${JSON.stringify(rect)} for ${img.width}x${img.height}`)
+    return { x, y, width, height }
+}
+
+// mean color over a rect. Premultiplies by alpha so transparent pixels don't
+// drag the average toward their (often garbage) rgb — and reports mean alpha.
+export function averageColor(src, rect) {
+    const img = toImage(src)
+    const r = resolveRect(img, rect)
+    let rs = 0
+    let gs = 0
+    let bs = 0
+    let as = 0
+    let weight = 0
+    for (let yy = 0; yy < r.height; yy += 1) {
+        for (let xx = 0; xx < r.width; xx += 1) {
+            const i = ((r.y + yy) * img.width + (r.x + xx)) * 4
+            const a = img.rgba[i + 3]
+            const w = a / 255
+            rs += img.rgba[i] * w
+            gs += img.rgba[i + 1] * w
+            bs += img.rgba[i + 2] * w
+            as += a
+            weight += w
+        }
+    }
+    const count = r.width * r.height
+    const safe = weight || 1
+    return withHex({
+        r: rs / safe,
+        g: gs / safe,
+        b: bs / safe,
+        a: as / count,
+    })
+}
+
+// quantize colors into buckets and return the most-covered bucket (+ coverage
+// fraction). Good for "what's the dominant background color of this area".
+export function dominantColor(src, rect, { bucket = 16 } = {}) {
+    const img = toImage(src)
+    const r = resolveRect(img, rect)
+    const counts = new Map()
+    const q = (n) => Math.min(255, Math.floor(n / bucket) * bucket + Math.floor(bucket / 2))
+    let total = 0
+    for (let yy = 0; yy < r.height; yy += 1) {
+        for (let xx = 0; xx < r.width; xx += 1) {
+            const i = ((r.y + yy) * img.width + (r.x + xx)) * 4
+            if (img.rgba[i + 3] < 8) continue // skip fully transparent
+            const key = (q(img.rgba[i]) << 16) | (q(img.rgba[i + 1]) << 8) | q(img.rgba[i + 2])
+            counts.set(key, (counts.get(key) || 0) + 1)
+            total += 1
+        }
+    }
+    if (!total) throw new Error('region is fully transparent')
+    let bestKey = 0
+    let bestN = 0
+    for (const [key, n] of counts) {
+        if (n > bestN) {
+            bestN = n
+            bestKey = key
+        }
+    }
+    return {
+        ...withHex({ r: (bestKey >> 16) & 0xff, g: (bestKey >> 8) & 0xff, b: bestKey & 0xff, a: 255 }),
+        coverage: bestN / total,
+        distinctColors: counts.size,
+    }
+}
+
+// euclidean rgb distance (0 = identical, ~441 = black↔white).
+export function colorDistance(a, b) {
+    const dr = a.r - b.r
+    const dg = a.g - b.g
+    const db = a.b - b.b
+    return Math.sqrt(dr * dr + dg * dg + db * db)
+}
+
+// assertion helper: does the average color of a rect match `expected` within
+// `tolerance` (rgb distance)? Returns { match, actual, expected, distance }.
+export function regionMatches(src, rect, expected, tolerance = 12) {
+    const actual = averageColor(src, rect)
+    const want = withHex(parseColor(expected))
+    const distance = colorDistance(actual, want)
+    return { match: distance <= tolerance, actual, expected: want, distance, tolerance }
+}
+
+function clamp(n, lo, hi) {
+    return Math.max(lo, Math.min(hi, n))
+}

package/scripts/png.mjs

@@ -0,0 +1,198 @@
+// Minimal dependency-free PNG decode/encode, shared by pixel tooling.
+//
+// Extracted from pixel-diff.mjs so the decoder isn't trapped inside one CLI.
+// Supports the encodings our captures actually produce: 8/16-bit depth,
+// non-interlaced, color types 0 (gray), 2 (rgb), 4 (gray+alpha), 6 (rgba).
+// Decoded images are always normalized to 8-bit RGBA: { width, height, rgba }.
+import { inflateSync, deflateSync } from 'node:zlib'
+import { readFileSync } from 'node:fs'
+
+export const PNG_SIGNATURE = Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a])
+let crcTable = null
+
+// Read just the IHDR width/height without decoding pixels — cheap and used a lot.
+export function pngSize(pathOrBuffer) {
+    const buf = Buffer.isBuffer(pathOrBuffer) ? pathOrBuffer : readFileSync(pathOrBuffer)
+    if (!buf.subarray(0, 8).equals(PNG_SIGNATURE)) throw new Error('not a png file')
+    return [buf.readUInt32BE(16), buf.readUInt32BE(20)]
+}
+
+export function readPng(path) {
+    return decodePng(readFileSync(path))
+}
+
+export function decodePng(buffer) {
+    if (!buffer.subarray(0, 8).equals(PNG_SIGNATURE)) {
+        throw new Error('not a png file')
+    }
+
+    let width = 0
+    let height = 0
+    let bitDepth = 0
+    let colorType = 0
+    const idat = []
+
+    let offset = 8
+    while (offset < buffer.length) {
+        const length = buffer.readUInt32BE(offset)
+        const type = buffer.toString('ascii', offset + 4, offset + 8)
+        const dataStart = offset + 8
+        const dataEnd = dataStart + length
+        const data = buffer.subarray(dataStart, dataEnd)
+
+        if (type === 'IHDR') {
+            width = data.readUInt32BE(0)
+            height = data.readUInt32BE(4)
+            bitDepth = data[8]
+            colorType = data[9]
+            const compression = data[10]
+            const filter = data[11]
+            const interlace = data[12]
+            if (![8, 16].includes(bitDepth) || compression !== 0 || filter !== 0 || interlace !== 0) {
+                throw new Error('unsupported png encoding')
+            }
+            if (![0, 2, 4, 6].includes(colorType)) {
+                throw new Error(`unsupported png color type ${colorType}`)
+            }
+        } else if (type === 'IDAT') {
+            idat.push(data)
+        } else if (type === 'IEND') {
+            break
+        }
+
+        offset = dataEnd + 4
+    }
+
+    const bytesPerSample = bitDepth / 8
+    const channels = colorType === 6 ? 4 : colorType === 4 ? 2 : colorType === 2 ? 3 : 1
+    const raw = inflateSync(Buffer.concat(idat))
+    const rowBytes = width * channels * bytesPerSample
+    const scanlineBytes = rowBytes + 1
+    const unfiltered = Buffer.alloc(rowBytes * height)
+
+    for (let y = 0; y < height; y += 1) {
+        const filter = raw[y * scanlineBytes]
+        const rowStart = y * rowBytes
+        const sourceStart = y * scanlineBytes + 1
+        for (let x = 0; x < rowBytes; x += 1) {
+            const value = raw[sourceStart + x]
+            const left = x >= channels * bytesPerSample ? unfiltered[rowStart + x - channels * bytesPerSample] : 0
+            const up = y > 0 ? unfiltered[rowStart + x - rowBytes] : 0
+            const upLeft =
+                y > 0 && x >= channels * bytesPerSample
+                    ? unfiltered[rowStart + x - rowBytes - channels * bytesPerSample]
+                    : 0
+            switch (filter) {
+                case 0:
+                    unfiltered[rowStart + x] = value
+                    break
+                case 1:
+                    unfiltered[rowStart + x] = (value + left) & 0xff
+                    break
+                case 2:
+                    unfiltered[rowStart + x] = (value + up) & 0xff
+                    break
+                case 3:
+                    unfiltered[rowStart + x] = (value + Math.floor((left + up) / 2)) & 0xff
+                    break
+                case 4:
+                    unfiltered[rowStart + x] = (value + paeth(left, up, upLeft)) & 0xff
+                    break
+                default:
+                    throw new Error(`unsupported png filter ${filter}`)
+            }
+        }
+    }
+
+    const rgba = Buffer.alloc(width * height * 4)
+    const sample = (index) => unfiltered[index]
+    for (let i = 0, j = 0; i < unfiltered.length; i += channels * bytesPerSample, j += 4) {
+        if (colorType === 6) {
+            rgba[j] = sample(i)
+            rgba[j + 1] = sample(i + bytesPerSample)
+            rgba[j + 2] = sample(i + bytesPerSample * 2)
+            rgba[j + 3] = sample(i + bytesPerSample * 3)
+        } else if (colorType === 2) {
+            rgba[j] = sample(i)
+            rgba[j + 1] = sample(i + bytesPerSample)
+            rgba[j + 2] = sample(i + bytesPerSample * 2)
+            rgba[j + 3] = 255
+        } else if (colorType === 4) {
+            rgba[j] = sample(i)
+            rgba[j + 1] = sample(i)
+            rgba[j + 2] = sample(i)
+            rgba[j + 3] = sample(i + bytesPerSample)
+        } else {
+            rgba[j] = sample(i)
+            rgba[j + 1] = sample(i)
+            rgba[j + 2] = sample(i)
+            rgba[j + 3] = 255
+        }
+    }
+
+    return { width, height, rgba }
+}
+
+function paeth(left, up, upLeft) {
+    const p = left + up - upLeft
+    const pa = Math.abs(p - left)
+    const pb = Math.abs(p - up)
+    const pc = Math.abs(p - upLeft)
+    if (pa <= pb && pa <= pc) return left
+    if (pb <= pc) return up
+    return upLeft
+}
+
+export function encodePng(width, height, rgba) {
+    const raw = Buffer.alloc((width * 4 + 1) * height)
+    for (let y = 0; y < height; y += 1) {
+        const rawStart = y * (width * 4 + 1)
+        raw[rawStart] = 0
+        rgba.copy(raw, rawStart + 1, y * width * 4, (y + 1) * width * 4)
+    }
+
+    const ihdr = Buffer.alloc(13)
+    ihdr.writeUInt32BE(width, 0)
+    ihdr.writeUInt32BE(height, 4)
+    ihdr[8] = 8
+    ihdr[9] = 6
+    ihdr[10] = 0
+    ihdr[11] = 0
+    ihdr[12] = 0
+
+    return Buffer.concat([
+        PNG_SIGNATURE,
+        chunk('IHDR', ihdr),
+        chunk('IDAT', deflateSync(raw)),
+        chunk('IEND', Buffer.alloc(0)),
+    ])
+}
+
+function chunk(type, data) {
+    const typeBuffer = Buffer.from(type, 'ascii')
+    const out = Buffer.alloc(12 + data.length)
+    out.writeUInt32BE(data.length, 0)
+    typeBuffer.copy(out, 4)
+    data.copy(out, 8)
+    out.writeUInt32BE(crc32(Buffer.concat([typeBuffer, data])), 8 + data.length)
+    return out
+}
+
+function crc32(buffer) {
+    if (!crcTable) {
+        crcTable = new Uint32Array(256)
+        for (let n = 0; n < 256; n += 1) {
+            let c = n
+            for (let k = 0; k < 8; k += 1) {
+                c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1
+            }
+            crcTable[n] = c >>> 0
+        }
+    }
+
+    let c = 0xffffffff
+    for (const byte of buffer) {
+        c = crcTable[(c ^ byte) & 0xff] ^ (c >>> 8)
+    }
+    return (c ^ 0xffffffff) >>> 0
+}