akanjs 3.0.0-beta.20 → 3.0.0-beta.21

package/vendor/@akanjs/native/packages/cli/src/lib/icons.ts

@@ -0,0 +1,316 @@
+
+
+import { existsSync, mkdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join } from "node:path";
+import {
+  blank,
+  contain,
+  cornerColor,
+  drawOver,
+  flatten,
+  isOpaque,
+  parseColor,
+  type Rgba,
+  resize,
+  roundedMask,
+  toHex,
+} from "./image.ts";
+import { CliError, log } from "./log.ts";
+import { decodePng, encodePng, type Image, PngError } from "./png.ts";
+import type { ResolvedConfig } from "./project.ts";
+
+/** Splash image box on iOS (points) and Android (dp): a square that fits the 192dp splash circle. */
+export const SPLASH_BOX = 136;
+
+export function readPng(path: string, what: string): Image {
+  if (!existsSync(path)) throw new CliError(`${what}: ${path} not found`);
+  try {
+    return decodePng(new Uint8Array(readFileSync(path)));
+  } catch (error) {
+    if (error instanceof PngError) throw new CliError(`${what} (${path}): ${error.message}`);
+    throw error;
+  }
+}
+
+export interface IconArt {
+  /** 1024×1024 RGBA. */
+  master: Image;
+  /** Fills transparent areas where a platform needs an opaque icon (iOS, Android adaptive background). */
+  background: Rgba;
+}
+
+const loaded = new Map<string, IconArt>();
+
+export function iconArt(config: ResolvedConfig): IconArt | null {
+  if (!config.icon) return null;
+  const key = `${config.icon.image}\0${config.icon.backgroundColor}`;
+  const cached = loaded.get(key);
+  if (cached) return cached;
+  const source = readPng(config.icon.image, "icon");
+  if (source.width !== source.height)
+    throw new CliError(`icon (${config.icon.image}) must be square, got ${source.width}×${source.height}`);
+  if (source.width < 1024)
+    log.warn(`icon is ${source.width}×${source.width}; 1024×1024 is recommended (larger platform sizes are upscaled)`);
+  const background =
+    (config.icon.backgroundColor && parseColor(config.icon.backgroundColor)) ||
+    (isOpaque(source) ? cornerColor(source) : ([255, 255, 255, 255] as Rgba));
+  const art = { master: resize(source, 1024, 1024), background };
+  loaded.set(key, art);
+  return art;
+}
+
+export function splashArt(config: ResolvedConfig): Image | null {
+  return config.splash.image ? readPng(config.splash.image, "splash.image") : null;
+}
+
+const ICNS_TYPES: [string, number][] = [
+  ["icp4", 16],
+  ["icp5", 32],
+  ["icp6", 64],
+  ["ic07", 128],
+  ["ic08", 256],
+  ["ic09", 512],
+  ["ic10", 1024],
+  ["ic11", 32],
+  ["ic12", 64],
+  ["ic13", 256],
+  ["ic14", 512],
+];
+
+/**
+ * Full-bleed (opaque) sources get the macOS icon grid: an 824px rounded square with a 185px
+ * radius centered in 1024px, as in Apple's Big Sur template. Transparent sources are used as is.
+ */
+export function macosIconImage(art: IconArt): Image {
+  if (!isOpaque(art.master)) return art.master;
+  return drawOver(blank(1024, 1024), roundedMask(resize(art.master, 824, 824), 0, 185), 100, 100);
+}
+
+export function icns(image: Image): Uint8Array {
+  const pngs = new Map<number, Uint8Array>();
+  const chunks = ICNS_TYPES.map(([type, size]) => {
+    let png = pngs.get(size);
+    if (!png) {
+      png = encodePng(resize(image, size, size));
+      pngs.set(size, png);
+    }
+    const chunk = new Uint8Array(8 + png.length);
+    chunk.set(new TextEncoder().encode(type));
+    new DataView(chunk.buffer).setUint32(4, chunk.length);
+    chunk.set(png, 8);
+    return chunk;
+  });
+  const total = 8 + chunks.reduce((n, c) => n + c.length, 0);
+  const out = new Uint8Array(total);
+  out.set(new TextEncoder().encode("icns"));
+  new DataView(out.buffer).setUint32(4, total);
+  let o = 8;
+  for (const c of chunks) {
+    out.set(c, o);
+    o += c.length;
+  }
+  return out;
+}
+
+/** Windows .ico sizes: the shell picks 16-48 for lists and title bars, 256 for large views. */
+const ICO_SIZES = [16, 24, 32, 48, 64, 128, 256];
+
+/** An .ico with PNG entries (Windows Vista and later read PNG-compressed icon images). */
+export function ico(image: Image): Uint8Array {
+  const pngs = ICO_SIZES.map((size) => encodePng(resize(image, size, size)));
+  const header = 6 + 16 * pngs.length;
+  const out = new Uint8Array(header + pngs.reduce((n, p) => n + p.length, 0));
+  const view = new DataView(out.buffer);
+  view.setUint16(2, 1, true); 
+  view.setUint16(4, pngs.length, true);
+  let offset = header;
+  pngs.forEach((png, i) => {
+    const size = ICO_SIZES[i]!;
+    const entry = 6 + 16 * i;
+    out[entry] = size === 256 ? 0 : size; 
+    out[entry + 1] = size === 256 ? 0 : size;
+    view.setUint16(entry + 4, 1, true); 
+    view.setUint16(entry + 6, 32, true); 
+    view.setUint32(entry + 8, png.length, true);
+    view.setUint32(entry + 12, offset, true);
+    out.set(png, offset);
+    offset += png.length;
+  });
+  return out;
+}
+
+/**
+ * The window icon for Windows and Linux (tao's Icon::from_rgba), read by native/desktop at
+ * startup: [u32 width LE][u32 height LE][RGBA pixels]. No image decoder in the shell this way.
+ */
+export function windowIcon(image: Image, size = 256): Uint8Array {
+  const scaled = resize(image, size, size);
+  const out = new Uint8Array(8 + scaled.data.length);
+  const view = new DataView(out.buffer);
+  view.setUint32(0, size, true);
+  view.setUint32(4, size, true);
+  out.set(scaled.data, 8);
+  return out;
+}
+
+const INFO = { author: "akan-native", version: 1 };
+
+function colorEntry(hex: string, dark: boolean) {
+  const [r, g, b, a] = parseColor(hex) ?? [0, 0, 0, 255];
+  const components = Object.fromEntries(
+    (["red", "green", "blue", "alpha"] as const).map((k, i) => [k, ([r, g, b, a][i]! / 255).toFixed(3)]),
+  );
+  return {
+    idiom: "universal",
+    ...(dark ? { appearances: [{ appearance: "luminosity", value: "dark" }] } : {}),
+    color: { "color-space": "srgb", components },
+  };
+}
+
+function writeJson(path: string, value: unknown) {
+  writeFileSync(path, JSON.stringify(value, null, 2));
+}
+
+/**
+ * Writes Assets.xcassets for actool: AppIcon (one 1024 universal image; actool derives the rest),
+ * AkanNativeSplashBackground (light/dark) and AkanNativeSplash (the splash image at 1x/2x/3x) for UILaunchScreen.
+ * Returns the asset names the Info.plist may refer to.
+ */
+export function writeIosAssets(dir: string, config: ResolvedConfig): { appIcon: boolean; splashImage: boolean } {
+  mkdirSync(dir, { recursive: true });
+  writeJson(join(dir, "Contents.json"), { info: INFO });
+
+  const art = iconArt(config);
+  if (art) {
+    const set = join(dir, "AppIcon.appiconset");
+    mkdirSync(set, { recursive: true });
+    writeFileSync(join(set, "icon-1024.png"), encodePng(flatten(art.master, art.background)));
+    writeJson(join(set, "Contents.json"), {
+      images: [{ filename: "icon-1024.png", idiom: "universal", platform: "ios", size: "1024x1024" }],
+      info: INFO,
+    });
+  }
+
+  const colors = join(dir, "AkanNativeSplashBackground.colorset");
+  mkdirSync(colors, { recursive: true });
+  writeJson(join(colors, "Contents.json"), {
+    colors: [colorEntry(config.splash.backgroundColor, false), colorEntry(config.splash.backgroundColorDark, true)],
+    info: INFO,
+  });
+
+  const splash = splashArt(config);
+  if (splash) {
+    const set = join(dir, "AkanNativeSplash.imageset");
+    mkdirSync(set, { recursive: true });
+    const images = [1, 2, 3].map((scale) => {
+      const fit = (SPLASH_BOX * scale) / Math.max(splash.width, splash.height);
+      const filename = `splash@${scale}x.png`;
+      writeFileSync(
+        join(set, filename),
+        encodePng(resize(splash, Math.round(splash.width * fit), Math.round(splash.height * fit))),
+      );
+      return { filename, idiom: "universal", scale: `${scale}x` };
+    });
+    writeJson(join(set, "Contents.json"), { images, info: INFO });
+  }
+  return { appIcon: !!art, splashImage: !!splash };
+}
+
+function colorsXml(colors: Record<string, string>): string {
+  const lines = Object.entries(colors).map(([name, hex]) => `    <color name="${name}">${hex}</color>`);
+  return `<?xml version="1.0" encoding="utf-8"?>\n<resources>\n${lines.join("\n")}\n</resources>\n`;
+}
+
+/**
+ * Writes res/ for aapt2 compile: the theme (window and splash background, splash icon), the
+ * adaptive launcher icon and colors with a night variant. Only xxxhdpi bitmaps: the system
+ * scales them down for lower densities.
+ */
+export function writeAndroidRes(dir: string, config: ResolvedConfig): { icon: boolean } {
+  const { shell, splash } = config;
+  const art = iconArt(config);
+  const splashImage = splashArt(config);
+  for (const sub of ["values", "values-night"]) mkdirSync(join(dir, sub), { recursive: true });
+
+  writeFileSync(
+    join(dir, "values", "colors.xml"),
+    colorsXml({ akan_native_background: shell.backgroundColor, akan_native_splash_background: splash.backgroundColor }),
+  );
+  writeFileSync(
+    join(dir, "values-night", "colors.xml"),
+    colorsXml({
+      akan_native_background: shell.backgroundColorDark,
+      akan_native_splash_background: splash.backgroundColorDark,
+    }),
+  );
+
+  const theme = (items: string[]) => `<?xml version="1.0" encoding="utf-8"?>
+<resources>
+    <style name="AkanNativeTheme" parent="@android:style/Theme.DeviceDefault.DayNight">
+        <item name="android:windowNoTitle">true</item>
+        <item name="android:windowActionBar">false</item>
+        <item name="android:statusBarColor">@android:color/transparent</item>
+        <item name="android:navigationBarColor">@android:color/transparent</item>
+        <item name="android:enforceStatusBarContrast">false</item>
+${items.map((item) => `        ${item}\n`).join("")}    </style>
+</resources>
+`;
+  writeFileSync(
+    join(dir, "values", "themes.xml"),
+    theme([
+      '<item name="android:windowBackground">@drawable/akan_native_launch</item>',
+      '<item name="android:windowLayoutInDisplayCutoutMode">shortEdges</item>',
+    ]),
+  );
+  mkdirSync(join(dir, "values-v31"), { recursive: true });
+  writeFileSync(
+    join(dir, "values-v31", "themes.xml"),
+    theme([
+      '<item name="android:windowBackground">@color/akan_native_background</item>',
+      '<item name="android:windowLayoutInDisplayCutoutMode">always</item>',
+      '<item name="android:windowSplashScreenBackground">@color/akan_native_splash_background</item>',
+      ...(splashImage
+        ? ['<item name="android:windowSplashScreenAnimatedIcon">@drawable/akan_native_splash</item>']
+        : []),
+    ]),
+  );
+  mkdirSync(join(dir, "drawable"), { recursive: true });
+  writeFileSync(
+    join(dir, "drawable", "akan_native_launch.xml"),
+    `<?xml version="1.0" encoding="utf-8"?>
+<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
+    <item android:drawable="@color/akan_native_splash_background" />
+${splashImage ? `    <item android:gravity="center"><bitmap android:gravity="center" android:src="@drawable/akan_native_splash" /></item>\n` : ""}</layer-list>
+`,
+  );
+
+  if (splashImage) {
+    
+    mkdirSync(join(dir, "drawable-xxxhdpi"), { recursive: true });
+    writeFileSync(
+      join(dir, "drawable-xxxhdpi", "akan_native_splash.png"),
+      encodePng(contain(splashImage, 288 * 4, SPLASH_BOX * 4)),
+    );
+  }
+
+  if (art) {
+    mkdirSync(join(dir, "mipmap-xxxhdpi"), { recursive: true });
+    mkdirSync(join(dir, "mipmap-anydpi"), { recursive: true });
+
+    writeFileSync(join(dir, "mipmap-xxxhdpi", "ic_launcher_foreground.png"), encodePng(contain(art.master, 432, 288)));
+    writeFileSync(
+      join(dir, "values", "icon_colors.xml"),
+      colorsXml({ akan_native_icon_background: toHex(art.background) }),
+    );
+    writeFileSync(
+      join(dir, "mipmap-anydpi", "ic_launcher.xml"),
+      `<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/akan_native_icon_background" />
+    <foreground android:drawable="@mipmap/ic_launcher_foreground" />
+</adaptive-icon>
+`,
+    );
+  }
+  return { icon: !!art };
+}

package/vendor/@akanjs/native/packages/cli/src/lib/image.ts

@@ -0,0 +1,175 @@
+
+
+import type { Image } from "./png.ts";
+
+export type Rgba = [number, number, number, number];
+
+/** "#rrggbb" or "#rrggbbaa" → [r, g, b, a], or null. */
+export function parseColor(text: string): Rgba | null {
+  const m = /^#([0-9a-f]{6})([0-9a-f]{2})?$/i.exec(text.trim());
+  if (!m) return null;
+  const v = parseInt(m[1]!, 16);
+  return [(v >> 16) & 255, (v >> 8) & 255, v & 255, m[2] ? parseInt(m[2], 16) : 255];
+}
+
+export function toHex([r, g, b]: Rgba): string {
+  return `#${[r, g, b].map((c) => c.toString(16).padStart(2, "0")).join("")}`;
+}
+
+export function blank(width: number, height: number, color: Rgba = [0, 0, 0, 0]): Image {
+  const data = new Uint8Array(width * height * 4);
+  for (let i = 0; i < data.length; i += 4) data.set(color, i);
+  return { width, height, data };
+}
+
+export function isOpaque(image: Image): boolean {
+  for (let i = 3; i < image.data.length; i += 4) if (image.data[i] !== 255) return false;
+  return true;
+}
+
+/** Top-left pixel: the background of a full-bleed icon. */
+export function cornerColor(image: Image): Rgba {
+  const d = image.data;
+  return [d[0]!, d[1]!, d[2]!, d[3]!];
+}
+
+/** Per destination index: source indices and weights (area average down, linear up). */
+function weights(srcLength: number, dstLength: number): { index: number[]; weight: number[] }[] {
+  const scale = srcLength / dstLength;
+  return Array.from({ length: dstLength }, (_, i) => {
+    const index: number[] = [];
+    const weight: number[] = [];
+    if (scale >= 1) {
+      const start = i * scale;
+      const end = start + scale;
+      for (let j = Math.floor(start); j < Math.ceil(end) && j < srcLength; j++) {
+        const overlap = Math.min(end, j + 1) - Math.max(start, j);
+        if (overlap > 0) {
+          index.push(j);
+          weight.push(overlap / scale);
+        }
+      }
+    } else {
+      const center = (i + 0.5) * scale - 0.5;
+      const j = Math.floor(center);
+      const t = center - j;
+      index.push(Math.max(0, j), Math.min(srcLength - 1, j + 1));
+      weight.push(1 - t, t);
+    }
+    return { index, weight };
+  });
+}
+
+export function resize(image: Image, width: number, height: number): Image {
+  if (image.width === width && image.height === height) return { width, height, data: image.data.slice() };
+  const { width: sw, height: sh, data } = image;
+  const pre = new Float32Array(sw * sh * 4);
+  for (let i = 0; i < data.length; i += 4) {
+    const a = data[i + 3]! / 255;
+    pre[i] = data[i]! * a;
+    pre[i + 1] = data[i + 1]! * a;
+    pre[i + 2] = data[i + 2]! * a;
+    pre[i + 3] = data[i + 3]!;
+  }
+  const wx = weights(sw, width);
+  const wy = weights(sh, height);
+  const tmp = new Float32Array(width * sh * 4);
+  for (let y = 0; y < sh; y++) {
+    for (let x = 0; x < width; x++) {
+      const { index, weight } = wx[x]!;
+      const o = (y * width + x) * 4;
+      for (let k = 0; k < index.length; k++) {
+        const s = (y * sw + index[k]!) * 4;
+        const w = weight[k]!;
+        tmp[o] = tmp[o]! + pre[s]! * w;
+        tmp[o + 1] = tmp[o + 1]! + pre[s + 1]! * w;
+        tmp[o + 2] = tmp[o + 2]! + pre[s + 2]! * w;
+        tmp[o + 3] = tmp[o + 3]! + pre[s + 3]! * w;
+      }
+    }
+  }
+  const out = new Uint8Array(width * height * 4);
+  for (let y = 0; y < height; y++) {
+    const { index, weight } = wy[y]!;
+    for (let x = 0; x < width; x++) {
+      let r = 0,
+        g = 0,
+        b = 0,
+        a = 0;
+      for (let k = 0; k < index.length; k++) {
+        const s = (index[k]! * width + x) * 4;
+        const w = weight[k]!;
+        r += tmp[s]! * w;
+        g += tmp[s + 1]! * w;
+        b += tmp[s + 2]! * w;
+        a += tmp[s + 3]! * w;
+      }
+      const o = (y * width + x) * 4;
+      const alpha = a / 255;
+      out[o] = alpha > 0 ? Math.min(255, Math.round(r / alpha)) : 0;
+      out[o + 1] = alpha > 0 ? Math.min(255, Math.round(g / alpha)) : 0;
+      out[o + 2] = alpha > 0 ? Math.min(255, Math.round(b / alpha)) : 0;
+      out[o + 3] = Math.min(255, Math.round(a));
+    }
+  }
+  return { width, height, data: out };
+}
+
+/** Draws `top` over `bottom` at (x, y), source-over. */
+export function drawOver(bottom: Image, top: Image, x: number, y: number): Image {
+  const out = { ...bottom, data: bottom.data.slice() };
+  for (let ty = 0; ty < top.height; ty++) {
+    const by = y + ty;
+    if (by < 0 || by >= out.height) continue;
+    for (let tx = 0; tx < top.width; tx++) {
+      const bx = x + tx;
+      if (bx < 0 || bx >= out.width) continue;
+      const s = (ty * top.width + tx) * 4;
+      const d = (by * out.width + bx) * 4;
+      const sa = top.data[s + 3]! / 255;
+      const da = out.data[d + 3]! / 255;
+      const a = sa + da * (1 - sa);
+      for (let c = 0; c < 3; c++) {
+        out.data[d + c] = a > 0 ? Math.round((top.data[s + c]! * sa + out.data[d + c]! * da * (1 - sa)) / a) : 0;
+      }
+      out.data[d + 3] = Math.round(a * 255);
+    }
+  }
+  return out;
+}
+
+/** A size×size transparent canvas with the image scaled to fit a box×box square in its center. */
+export function contain(image: Image, size: number, box: number): Image {
+  const scale = box / Math.max(image.width, image.height);
+  const w = Math.max(1, Math.round(image.width * scale));
+  const h = Math.max(1, Math.round(image.height * scale));
+  return drawOver(blank(size, size), resize(image, w, h), Math.round((size - w) / 2), Math.round((size - h) / 2));
+}
+
+/** The image composited on an opaque color (iOS app icons must not be transparent). */
+export function flatten(image: Image, color: Rgba): Image {
+  return drawOver(blank(image.width, image.height, [color[0], color[1], color[2], 255]), image, 0, 0);
+}
+
+/**
+ * Keeps only a centered rounded rectangle (inset from each edge, corner radius in pixels),
+ * anti-aliased with a signed distance per pixel.
+ */
+export function roundedMask(image: Image, inset: number, radius: number): Image {
+  const out = { ...image, data: image.data.slice() };
+  const cx = image.width / 2;
+  const cy = image.height / 2;
+  const hw = image.width / 2 - inset;
+  const hh = image.height / 2 - inset;
+  for (let y = 0; y < image.height; y++) {
+    for (let x = 0; x < image.width; x++) {
+      const qx = Math.abs(x + 0.5 - cx) - (hw - radius);
+      const qy = Math.abs(y + 0.5 - cy) - (hh - radius);
+      const d = Math.hypot(Math.max(qx, 0), Math.max(qy, 0)) + Math.min(Math.max(qx, qy), 0) - radius;
+      const coverage = Math.min(1, Math.max(0, 0.5 - d));
+      const i = (y * image.width + x) * 4 + 3;
+      out.data[i] = Math.round(out.data[i]! * coverage);
+    }
+  }
+  return out;
+}