code2app 0.1.0

package/scripts/configure.mjs

@@ -0,0 +1,222 @@
+#!/usr/bin/env node
+// Regenerates everything that encodes an app's identity — src-tauri/tauri.conf.json,
+// the Rust-side constants it implies, and the remote capability's origin scope —
+// from a single JSON profile in profiles/. That indirection is what makes this
+// package generic: swap the profile, re-run this script, and the wrapper is a
+// different app. Nothing downstream (icons, CI, the OAuth handoff, the sidecar
+// bridge) reads the profile directly, so there is exactly one place that
+// understands the profile -> Tauri config mapping.
+
+import { mkdirSync, rmSync, existsSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import { loadProfile, resolveProfileName } from "./profile.mjs";
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+
+export function configure(rootDir, profileName) {
+  const profile = loadProfile(rootDir, profileName);
+  const win = profile.window;
+
+  const tauriConf = {
+    $schema: "https://schema.tauri.app/config/2",
+    productName: profile.productName,
+    version: profile.version,
+    identifier: profile.identifier,
+    build: {
+      frontendDist: "../dist",
+    },
+    app: {
+      withGlobalTauri: true,
+      windows: [
+        {
+          label: "main",
+          title: win.title,
+          // Remote mode points the window straight at the live site; local mode
+          // leaves it on the bundled dist/ frontend Tauri serves itself.
+          url: profile.mode === "remote" ? profile.url : "index.html",
+          width: win.width,
+          height: win.height,
+          minWidth: win.minWidth,
+          minHeight: win.minHeight,
+          resizable: win.resizable,
+          fullscreen: win.fullscreen,
+          center: true,
+        },
+      ],
+      security: {
+        // A local-mode app has no remote content to scope, so it doesn't load
+        // the remote capability at all (configure removes the file too).
+        capabilities: profile.trustedOrigins.length > 0 ? ["default", "remote"] : ["default"],
+      },
+    },
+    bundle: {
+      active: true,
+      targets: "all",
+      publisher: profile.publisher ?? profile.copyright ?? profile.appName,
+      copyright: profile.copyright ?? "",
+      category: profile.category ?? "Productivity",
+      shortDescription: profile.shortDescription ?? "",
+      longDescription: profile.longDescription ?? profile.shortDescription ?? "",
+      icon: [
+        "icons/32x32.png",
+        "icons/128x128.png",
+        "icons/128x128@2x.png",
+        "icons/icon.icns",
+        "icons/icon.ico",
+      ],
+      windows: {
+        nsis: {
+          installMode: "currentUser",
+        },
+      },
+      macOS: {
+        minimumSystemVersion: profile.macos?.minimumSystemVersion ?? "10.15",
+      },
+      linux: {
+        deb: { depends: [] },
+      },
+    },
+    plugins: {},
+  };
+
+  // The updater plugin fails *initialization* without a `pubkey` — an
+  // `{ "active": false }` block is not an off switch, it's a crash on launch.
+  // So a profile that hasn't configured updates gets no updater config and no
+  // registered plugin at all (see UPDATER_ENABLED below).
+  if (profile.updater) {
+    tauriConf.plugins.updater = {
+      active: true,
+      pubkey: profile.updater.pubkey,
+      endpoints: profile.updater.endpoints,
+    };
+  }
+
+  if (profile.deepLinkScheme) {
+    tauriConf.plugins["deep-link"] = {
+      desktop: {
+        schemes: [profile.deepLinkScheme],
+      },
+      // Plain custom-scheme deep link (`<scheme>://...`), not a verified
+      // Android App Link / iOS Universal Link — the latter needs the site to
+      // host .well-known/assetlinks.json + apple-app-site-association, which is
+      // unnecessary complexity for a login handoff scheme that's never shown to
+      // the user as a clickable web link.
+      mobile: [
+        {
+          scheme: [profile.deepLinkScheme],
+          appLink: false,
+        },
+      ],
+    };
+  }
+
+  if (profile.sidecar) {
+    // Tauri resolves this to binaries/<name>-<target triple> at bundle time, so
+    // the build fails loudly if scripts/build-sidecar.mjs hasn't produced one
+    // for the platform being built.
+    tauriConf.bundle.externalBin = [`binaries/${profile.sidecar.name}`];
+  }
+
+  if (profile.android) {
+    tauriConf.bundle.android = {
+      minSdkVersion: profile.android.minSdkVersion ?? 24,
+    };
+  }
+
+  if (profile.ios) {
+    tauriConf.bundle.iOS = {
+      minimumSystemVersion: profile.ios.minimumSystemVersion ?? "14.0",
+    };
+  }
+
+  const written = [];
+  const write = (relPath, contents) => {
+    const outPath = path.join(rootDir, relPath);
+    mkdirSync(path.dirname(outPath), { recursive: true });
+    writeFileSync(outPath, contents, "utf8");
+    written.push(relPath);
+  };
+
+  write("src-tauri/tauri.conf.json", `${JSON.stringify(tauriConf, null, 2)}\n`);
+
+  // The same values the JSON config carries also have to exist on the Rust
+  // side: the desktop single-instance argv parser matches on the deep-link
+  // scheme, the OAuth handoff rebuilds an absolute callback URL from the app
+  // URL, and the sidecar command needs the bundled binary's name. Generating
+  // them into one const file is what keeps the two from drifting apart.
+  const rustArgs = profile.sidecar
+    ? `&[${profile.sidecar.args.map((a) => JSON.stringify(a)).join(", ")}]`
+    : "&[]";
+  write(
+    "src-tauri/src/generated_config.rs",
+    [
+      `// Generated by scripts/configure.mjs from profiles/${profile.name}.json. Do not edit by hand.`,
+      "",
+      "/// Custom URL scheme registered with the OS for the OAuth handoff, or \"\"",
+      "/// when the profile doesn't use one.",
+      `pub const DEEP_LINK_SCHEME: &str = ${JSON.stringify(profile.deepLinkScheme ?? "")};`,
+      "",
+      "/// Origin the main window loads in remote mode, or \"\" in local mode.",
+      `pub const APP_URL: &str = ${JSON.stringify(profile.url ?? "")};`,
+      "",
+      "/// Name of the bundled CLI exposed through the `sidecar_output` command,",
+      "/// or \"\" when the profile bundles none.",
+      `pub const SIDECAR_NAME: &str = ${JSON.stringify(profile.sidecar?.name ?? "")};`,
+      "",
+      "/// The fixed argument list that sidecar is always invoked with. Fixed, and",
+      "/// not passed in from the frontend, so the webview can't turn the bundled",
+      "/// binary into an arbitrary-argument process spawner.",
+      `pub const SIDECAR_ARGS: &[&str] = ${rustArgs};`,
+      "",
+      "/// Whether the profile configured auto-updates. False means the updater",
+      "/// plugin is never registered — registering it without a `pubkey` in",
+      "/// tauri.conf.json panics at startup rather than staying inert.",
+      `pub const UPDATER_ENABLED: bool = ${profile.updater ? "true" : "false"};`,
+      "",
+    ].join("\n"),
+  );
+
+  // capabilities/remote.json grants the wrapped site itself a narrow slice of
+  // IPC. Its scope is the profile's trustedOrigins, so generating the file is
+  // the only way that list can't drift from what the profile claims.
+  const remoteCapabilityPath = path.join(rootDir, "src-tauri/capabilities/remote.json");
+  if (profile.trustedOrigins.length > 0) {
+    write(
+      "src-tauri/capabilities/remote.json",
+      `${JSON.stringify(
+        {
+          $schema: "../gen/schemas/remote-schema.json",
+          identifier: "remote",
+          description:
+            "Scoped IPC access for the wrapped site itself (the profile's trustedOrigins), so its " +
+            "login page can ask the wrapper to open the system browser for OAuth. Nothing else is " +
+            "exposed to remote content.",
+          windows: ["main"],
+          remote: {
+            urls: profile.trustedOrigins.map((origin) => `${origin.replace(/\/+$/, "")}/*`),
+          },
+          permissions: ["opener:allow-open-url"],
+        },
+        null,
+        2,
+      )}\n`,
+    );
+  } else if (existsSync(remoteCapabilityPath)) {
+    rmSync(remoteCapabilityPath);
+    written.push("src-tauri/capabilities/remote.json (removed — no trustedOrigins)");
+  }
+
+  return { profile, written };
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const rootDir = path.resolve(__dirname, "..");
+  const profileName = resolveProfileName(rootDir);
+  const { profile, written } = configure(rootDir, profileName);
+
+  const target = profile.mode === "remote" ? profile.url : "bundled dist/ frontend";
+  console.log(`[native-app-wrapper] configured profile "${profile.name}" (${profile.appName} -> ${target})`);
+  for (const relPath of written) console.log(`  wrote ${relPath}`);
+  console.log(`  run "npm run icons" if ${profile.name}'s iconSource changed`);
+}

package/scripts/generate-icons.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+// Generates the full platform icon set (Windows .ico, macOS .icns, Linux/
+// Android/iOS PNGs at every required size) from the active profile's single
+// `iconSource` PNG, using the Tauri CLI's own icon generator so the output
+// always matches what the installed @tauri-apps/cli version expects.
+//
+// This is the "I have real artwork" path. `node bin/cli.js icons` is the other
+// one: it draws a neutral placeholder set with no artwork, no dependencies, and
+// no Rust toolchain, so a freshly scaffolded copy builds before anyone has a
+// logo. Run this once you do.
+
+import { existsSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import { spawnSync } from "node:child_process";
+import { loadProfile, resolveProfileName } from "./profile.mjs";
+
+const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+const profile = loadProfile(rootDir, resolveProfileName(rootDir));
+
+if (!profile.iconSource) {
+  throw new Error(`profiles/${profile.name}.json has no "iconSource"`);
+}
+
+const iconSource = path.resolve(path.dirname(profile.path), profile.iconSource);
+if (!existsSync(iconSource)) {
+  throw new Error(
+    `profiles/${profile.name}.json's iconSource does not exist: ${iconSource}\n` +
+      "(run `node bin/cli.js icons` to draw a placeholder set instead)",
+  );
+}
+
+const outDir = path.join(rootDir, "src-tauri", "icons");
+console.log(`[native-app-wrapper] generating icons from ${path.relative(rootDir, iconSource)} -> src-tauri/icons/`);
+
+const result = spawnSync("npx", ["--yes", "@tauri-apps/cli@2", "icon", iconSource, "-o", outDir], {
+  cwd: rootDir,
+  stdio: "inherit",
+});
+
+if (result.status !== 0) {
+  console.error(
+    "[native-app-wrapper] icon generation failed. Make sure iconSource points at a square PNG " +
+      "(1024x1024 recommended) and that the Rust toolchain is installed (the Tauri CLI's icon " +
+      "command shells out to it).",
+  );
+  process.exit(result.status ?? 1);
+}
+
+console.log(
+  "[native-app-wrapper] icons written. Android/iOS project icons are re-derived from these the " +
+    "next time `npm run android:init` / `npm run ios:init` regenerates gen/android or gen/apple.",
+);

package/scripts/generate-placeholder-icons.mjs

@@ -0,0 +1,186 @@
+#!/usr/bin/env node
+// Draws a complete, buildable icon set from the active profile's colors — no
+// source artwork, no image library, no network. `tauri build` refuses to bundle
+// without every icon in tauri.conf.json's bundle.icon list existing, so a fresh
+// copy of this package would otherwise be un-buildable until someone supplies a
+// logo. This fills that gap with a neutral mark; swap in real artwork later by
+// pointing the profile's `iconSource` at it and running `npm run icons`.
+//
+// Every size is drawn at its own resolution rather than downscaled from one
+// master, so the 16px entries stay legible instead of turning to mush.
+
+import { mkdirSync, writeFileSync } from "node:fs";
+import { fileURLToPath } from "node:url";
+import path from "node:path";
+import {
+  blend,
+  coverage,
+  encodeIcns,
+  encodeIco,
+  encodePng,
+  hexToRgb,
+  roundedRectDistance,
+} from "./lib/png.mjs";
+import { loadProfile, resolveProfileName } from "./profile.mjs";
+
+/** Windows Store logo assets Tauri's MSIX/AppX metadata expects alongside the core sizes. */
+const SQUARE_LOGOS = {
+  "Square30x30Logo.png": 30,
+  "Square44x44Logo.png": 44,
+  "Square71x71Logo.png": 71,
+  "Square89x89Logo.png": 89,
+  "Square107x107Logo.png": 107,
+  "Square142x142Logo.png": 142,
+  "Square150x150Logo.png": 150,
+  "Square284x284Logo.png": 284,
+  "Square310x310Logo.png": 310,
+  "StoreLogo.png": 50,
+};
+
+const PLAIN_PNGS = {
+  "32x32.png": 32,
+  "64x64.png": 64,
+  "128x128.png": 128,
+  "128x128@2x.png": 256,
+  "icon.png": 1024,
+};
+
+const ICO_SIZES = [16, 32, 48, 64, 128, 256];
+
+// OSType -> pixel size. These are the PNG-bearing ICNS entry types; the legacy
+// uncompressed ones aren't needed by any macOS version Tauri supports.
+const ICNS_TYPES = [
+  ["icp4", 16],
+  ["icp5", 32],
+  ["icp6", 64],
+  ["ic07", 128],
+  ["ic08", 256],
+  ["ic09", 512],
+  ["ic10", 1024],
+];
+
+/**
+ * Renders the mark: a squircle in the profile's gradient with an outlined
+ * "app window" on it — generic enough to read as an application icon for
+ * anything this wrapper packages, and distinct per profile through its colors.
+ */
+function render(size, theme) {
+  const rgba = Buffer.alloc(size * size * 4);
+  const [topColor, bottomColor] = theme.background.map(hexToRgb);
+  const accent = hexToRgb(theme.accent);
+
+  const bgRadius = size * 0.2235; // Apple's squircle corner ratio, near enough
+  const inset = size * 0.26;
+  const windowRadius = Math.max(size * 0.045, 1);
+  const stroke = Math.max(size * 0.05, 1);
+  const halfStroke = stroke / 2;
+  const titleBarY = inset + size * 0.12;
+  // Below ~64px the title-bar dots are smaller than a pixel of ink and just
+  // muddy the mark, so the small entries drop them.
+  const showDots = size >= 64;
+  const dotRadius = size * 0.018;
+  // Centered in the strip between the window's top edge and the title bar rule.
+  const dotCenterY = (inset + titleBarY) / 2;
+
+  for (let y = 0; y < size; y++) {
+    for (let x = 0; x < size; x++) {
+      const px = x + 0.5;
+      const py = y + 0.5;
+      const index = (y * size + x) * 4;
+
+      const bg = coverage(roundedRectDistance(px, py, size / 2, size / 2, size / 2, size / 2, bgRadius));
+      if (bg > 0) {
+        const t = py / size;
+        blend(
+          rgba,
+          index,
+          [0, 1, 2].map((c) => Math.round(topColor[c] + (bottomColor[c] - topColor[c]) * t)),
+          bg,
+        );
+      }
+
+      const windowDistance = roundedRectDistance(
+        px,
+        py,
+        size / 2,
+        size / 2,
+        size / 2 - inset,
+        size / 2 - inset,
+        windowRadius,
+      );
+      // |distance| - halfStroke turns the filled shape's SDF into its outline.
+      blend(rgba, index, accent, coverage(Math.abs(windowDistance) - halfStroke));
+
+      const onTitleBar =
+        windowDistance < 0 && Math.abs(py - titleBarY) <= halfStroke ? 1 : 0;
+      if (onTitleBar) blend(rgba, index, accent, 1);
+
+      if (showDots) {
+        for (let i = 0; i < 3; i++) {
+          const cx = inset + size * 0.06 + i * size * 0.06;
+          const distance = Math.hypot(px - cx, py - dotCenterY) - dotRadius;
+          blend(rgba, index, accent, coverage(distance));
+        }
+      }
+    }
+  }
+
+  return rgba;
+}
+
+/**
+ * Draws the icon set into `<rootDir>/src-tauri/icons` and the 1024px master into
+ * `<rootDir>/assets/icon-source.png`. The master is what the profile's
+ * `iconSource` points at by default, so a copy of this package is
+ * self-consistent — `npm run icons` works — before anyone supplies a logo.
+ */
+export function generatePlaceholderIcons(rootDir, theme) {
+  const outDir = path.join(rootDir, "src-tauri", "icons");
+  mkdirSync(outDir, { recursive: true });
+  const cache = new Map();
+  const png = (size) => {
+    if (!cache.has(size)) cache.set(size, encodePng(render(size, theme), size));
+    return cache.get(size);
+  };
+
+  const written = [];
+  for (const [file, size] of Object.entries({ ...PLAIN_PNGS, ...SQUARE_LOGOS })) {
+    writeFileSync(path.join(outDir, file), png(size));
+    written.push(file);
+  }
+
+  writeFileSync(
+    path.join(outDir, "icon.ico"),
+    encodeIco(ICO_SIZES.map((size) => ({ size, png: png(size) }))),
+  );
+  written.push("icon.ico");
+
+  writeFileSync(
+    path.join(outDir, "icon.icns"),
+    encodeIcns(ICNS_TYPES.map(([type, size]) => ({ type, png: png(size) }))),
+  );
+  written.push("icon.icns");
+
+  const assetsDir = path.join(rootDir, "assets");
+  mkdirSync(assetsDir, { recursive: true });
+  writeFileSync(path.join(assetsDir, "icon-source.png"), png(1024));
+
+  return written;
+}
+
+if (import.meta.url === `file://${process.argv[1]}`) {
+  const rootDir = path.resolve(path.dirname(fileURLToPath(import.meta.url)), "..");
+  const profile = loadProfile(rootDir, resolveProfileName(rootDir));
+  const theme = {
+    background: ["#1e293b", "#0b1220"],
+    accent: "#f8fafc",
+    ...profile.placeholderIcon,
+  };
+
+  const written = generatePlaceholderIcons(rootDir, theme);
+  console.log(
+    `[native-app-wrapper] drew ${written.length} placeholder icons for "${profile.name}" -> src-tauri/icons/`,
+  );
+  console.log("  wrote assets/icon-source.png (1024x1024 master)");
+  console.log("  these are stand-ins — point the profile's iconSource at real artwork and run \"npm run icons\"");
+}

package/scripts/lib/png.mjs

@@ -0,0 +1,141 @@
+// Minimal RGBA PNG / ICO / ICNS writers, plus the tiny bit of rasterization
+// the placeholder icon needs. Dependency-free on purpose: generating a
+// buildable icon set is a prerequisite for `tauri build`, so it can't be the
+// step that makes a fresh clone need npm install, a native image library, or a
+// network round trip first.
+
+import zlib from "node:zlib";
+
+const CRC_TABLE = (() => {
+  const table = new Int32Array(256);
+  for (let n = 0; n < 256; n++) {
+    let c = n;
+    for (let k = 0; k < 8; k++) c = c & 1 ? 0xedb88320 ^ (c >>> 1) : c >>> 1;
+    table[n] = c;
+  }
+  return table;
+})();
+
+function crc32(buf) {
+  let c = 0xffffffff;
+  for (let i = 0; i < buf.length; i++) c = CRC_TABLE[(c ^ buf[i]) & 0xff] ^ (c >>> 8);
+  return (c ^ 0xffffffff) >>> 0;
+}
+
+function chunk(type, data) {
+  const head = Buffer.alloc(8);
+  head.writeUInt32BE(data.length, 0);
+  head.write(type, 4, "ascii");
+  const crc = Buffer.alloc(4);
+  crc.writeUInt32BE(crc32(Buffer.concat([head.subarray(4), data])), 0);
+  return Buffer.concat([head, data, crc]);
+}
+
+/** Encodes a `size * size * 4` RGBA buffer as an 8-bit RGBA PNG. */
+export function encodePng(rgba, size) {
+  const ihdr = Buffer.alloc(13);
+  ihdr.writeUInt32BE(size, 0);
+  ihdr.writeUInt32BE(size, 4);
+  ihdr[8] = 8; // bit depth
+  ihdr[9] = 6; // color type: RGBA
+  // 10..12 stay 0: deflate compression, adaptive filtering, no interlace.
+
+  // Filter type 0 ("none") on every scanline — the shapes here are flat enough
+  // that deflate handles them fine without per-row prediction.
+  const raw = Buffer.alloc(size * (size * 4 + 1));
+  for (let y = 0; y < size; y++) {
+    const rowStart = y * (size * 4 + 1);
+    raw[rowStart] = 0;
+    rgba.copy(raw, rowStart + 1, y * size * 4, (y + 1) * size * 4);
+  }
+
+  return Buffer.concat([
+    Buffer.from([0x89, 0x50, 0x4e, 0x47, 0x0d, 0x0a, 0x1a, 0x0a]),
+    chunk("IHDR", ihdr),
+    chunk("IDAT", zlib.deflateSync(raw, { level: 9 })),
+    chunk("IEND", Buffer.alloc(0)),
+  ]);
+}
+
+/**
+ * Packs PNGs into a Windows .ico. Every entry is stored PNG-compressed rather
+ * than as a BMP bitmap — supported since Vista, and the only way a 256x256
+ * entry stays a reasonable size.
+ */
+export function encodeIco(entries) {
+  const header = Buffer.alloc(6);
+  header.writeUInt16LE(0, 0); // reserved
+  header.writeUInt16LE(1, 2); // type: icon
+  header.writeUInt16LE(entries.length, 4);
+
+  const directory = Buffer.alloc(16 * entries.length);
+  let offset = header.length + directory.length;
+  entries.forEach((entry, i) => {
+    const at = i * 16;
+    directory[at] = entry.size >= 256 ? 0 : entry.size; // 0 means 256
+    directory[at + 1] = entry.size >= 256 ? 0 : entry.size;
+    directory[at + 2] = 0; // palette size (0 = truecolor)
+    directory[at + 3] = 0; // reserved
+    directory.writeUInt16LE(1, at + 4); // color planes
+    directory.writeUInt16LE(32, at + 6); // bits per pixel
+    directory.writeUInt32LE(entry.png.length, at + 8);
+    directory.writeUInt32LE(offset, at + 12);
+    offset += entry.png.length;
+  });
+
+  return Buffer.concat([header, directory, ...entries.map((e) => e.png)]);
+}
+
+/**
+ * Packs PNGs into a macOS .icns. `type` is the four-character OSType that
+ * declares the entry's pixel size (icp4 = 16pt, ic07 = 128pt, ...); the
+ * PNG-bearing types used here are the ones macOS reads without a legacy
+ * uncompressed bitmap fallback.
+ */
+export function encodeIcns(entries) {
+  const blocks = entries.map(({ type, png }) => {
+    const head = Buffer.alloc(8);
+    head.write(type, 0, "ascii");
+    head.writeUInt32BE(png.length + 8, 4); // length includes this header
+    return Buffer.concat([head, png]);
+  });
+  const body = Buffer.concat(blocks);
+  const head = Buffer.alloc(8);
+  head.write("icns", 0, "ascii");
+  head.writeUInt32BE(body.length + 8, 4);
+  return Buffer.concat([head, body]);
+}
+
+/** Signed distance from `(x, y)` to a rounded rectangle, negative inside. */
+export function roundedRectDistance(x, y, cx, cy, halfW, halfH, radius) {
+  const dx = Math.abs(x - cx) - (halfW - radius);
+  const dy = Math.abs(y - cy) - (halfH - radius);
+  const outside = Math.hypot(Math.max(dx, 0), Math.max(dy, 0));
+  return outside + Math.min(Math.max(dx, dy), 0) - radius;
+}
+
+/** Antialiased coverage for a signed distance, in device pixels. */
+export function coverage(distance) {
+  return Math.min(Math.max(0.5 - distance, 0), 1);
+}
+
+export function hexToRgb(hex) {
+  const m = /^#?([0-9a-f]{6})$/i.exec(hex);
+  if (!m) throw new Error(`not a #rrggbb color: ${hex}`);
+  const n = parseInt(m[1], 16);
+  return [(n >> 16) & 0xff, (n >> 8) & 0xff, n & 0xff];
+}
+
+/** Alpha-composites `[r, g, b]` at `alpha` over the pixel at `index`. */
+export function blend(rgba, index, [r, g, b], alpha) {
+  if (alpha <= 0) return;
+  const a = Math.min(alpha, 1);
+  const dstA = rgba[index + 3] / 255;
+  const outA = a + dstA * (1 - a);
+  if (outA <= 0) return;
+  for (let c = 0; c < 3; c++) {
+    const src = [r, g, b][c];
+    rgba[index + c] = Math.round((src * a + rgba[index + c] * dstA * (1 - a)) / outA);
+  }
+  rgba[index + 3] = Math.round(outA * 255);
+}