react-native-nano-icons 0.0.0 → 0.1.0

package/src/const/colors.ts

@@ -0,0 +1,150 @@
+export const CSS_NAMED_COLORS: Record<string, [number, number, number]> = {
+  aliceblue: [240, 248, 255],
+  antiquewhite: [250, 235, 215],
+  aqua: [0, 255, 255],
+  aquamarine: [127, 255, 212],
+  azure: [240, 255, 255],
+  beige: [245, 245, 220],
+  bisque: [255, 228, 196],
+  black: [0, 0, 0],
+  blanchedalmond: [255, 235, 205],
+  blue: [0, 0, 255],
+  blueviolet: [138, 43, 226],
+  brown: [165, 42, 42],
+  burlywood: [222, 184, 135],
+  cadetblue: [95, 158, 160],
+  chartreuse: [127, 255, 0],
+  chocolate: [210, 105, 30],
+  coral: [255, 127, 80],
+  cornflowerblue: [100, 149, 237],
+  cornsilk: [255, 248, 220],
+  crimson: [220, 20, 60],
+  cyan: [0, 255, 255],
+  darkblue: [0, 0, 139],
+  darkcyan: [0, 139, 139],
+  darkgoldenrod: [184, 134, 11],
+  darkgray: [169, 169, 169],
+  darkgreen: [0, 100, 0],
+  darkgrey: [169, 169, 169],
+  darkkhaki: [189, 183, 107],
+  darkmagenta: [139, 0, 139],
+  darkolivegreen: [85, 107, 47],
+  darkorange: [255, 140, 0],
+  darkorchid: [153, 50, 204],
+  darkred: [139, 0, 0],
+  darksalmon: [233, 150, 122],
+  darkseagreen: [143, 188, 143],
+  darkslateblue: [72, 61, 139],
+  darkslategray: [47, 79, 79],
+  darkslategrey: [47, 79, 79],
+  darkturquoise: [0, 206, 209],
+  darkviolet: [148, 0, 211],
+  deeppink: [255, 20, 147],
+  deepskyblue: [0, 191, 255],
+  dimgray: [105, 105, 105],
+  dimgrey: [105, 105, 105],
+  dodgerblue: [30, 144, 255],
+  firebrick: [178, 34, 34],
+  floralwhite: [255, 250, 240],
+  forestgreen: [34, 139, 34],
+  fuchsia: [255, 0, 255],
+  gainsboro: [220, 220, 220],
+  ghostwhite: [248, 248, 255],
+  gold: [255, 215, 0],
+  goldenrod: [218, 165, 32],
+  gray: [128, 128, 128],
+  green: [0, 128, 0],
+  greenyellow: [173, 255, 47],
+  grey: [128, 128, 128],
+  honeydew: [240, 255, 240],
+  hotpink: [255, 105, 180],
+  indianred: [205, 92, 92],
+  indigo: [75, 0, 130],
+  ivory: [255, 255, 240],
+  khaki: [240, 230, 140],
+  lavender: [230, 230, 250],
+  lavenderblush: [255, 240, 245],
+  lawngreen: [124, 252, 0],
+  lemonchiffon: [255, 250, 205],
+  lightblue: [173, 216, 230],
+  lightcoral: [240, 128, 128],
+  lightcyan: [224, 255, 255],
+  lightgoldenrodyellow: [250, 250, 210],
+  lightgray: [211, 211, 211],
+  lightgreen: [144, 238, 144],
+  lightgrey: [211, 211, 211],
+  lightpink: [255, 182, 193],
+  lightsalmon: [255, 160, 122],
+  lightseagreen: [32, 178, 170],
+  lightskyblue: [135, 206, 250],
+  lightslategray: [119, 136, 153],
+  lightslategrey: [119, 136, 153],
+  lightsteelblue: [176, 196, 222],
+  lightyellow: [255, 255, 224],
+  lime: [0, 255, 0],
+  limegreen: [50, 205, 50],
+  linen: [250, 240, 230],
+  magenta: [255, 0, 255],
+  maroon: [128, 0, 0],
+  mediumaquamarine: [102, 205, 170],
+  mediumblue: [0, 0, 205],
+  mediumorchid: [186, 85, 211],
+  mediumpurple: [147, 112, 219],
+  mediumseagreen: [60, 179, 113],
+  mediumslateblue: [123, 104, 238],
+  mediumspringgreen: [0, 250, 154],
+  mediumturquoise: [72, 209, 204],
+  mediumvioletred: [199, 21, 133],
+  midnightblue: [25, 25, 112],
+  mintcream: [245, 255, 250],
+  mistyrose: [255, 228, 225],
+  moccasin: [255, 228, 181],
+  navajowhite: [255, 222, 173],
+  navy: [0, 0, 128],
+  oldlace: [253, 245, 230],
+  olive: [128, 128, 0],
+  olivedrab: [107, 142, 35],
+  orange: [255, 165, 0],
+  orangered: [255, 69, 0],
+  orchid: [218, 112, 214],
+  palegoldenrod: [238, 232, 170],
+  palegreen: [152, 251, 152],
+  paleturquoise: [175, 238, 238],
+  palevioletred: [219, 112, 147],
+  papayawhip: [255, 239, 213],
+  peachpuff: [255, 218, 185],
+  peru: [205, 133, 63],
+  pink: [255, 192, 203],
+  plum: [221, 160, 221],
+  powderblue: [176, 224, 230],
+  purple: [128, 0, 128],
+  rebeccapurple: [102, 51, 153],
+  red: [255, 0, 0],
+  rosybrown: [188, 143, 143],
+  royalblue: [65, 105, 225],
+  saddlebrown: [139, 69, 19],
+  salmon: [250, 128, 114],
+  sandybrown: [244, 164, 96],
+  seagreen: [46, 139, 87],
+  seashell: [255, 245, 238],
+  sienna: [160, 82, 45],
+  silver: [192, 192, 192],
+  skyblue: [135, 206, 235],
+  slateblue: [106, 90, 205],
+  slategray: [112, 128, 144],
+  slategrey: [112, 128, 144],
+  snow: [255, 250, 250],
+  springgreen: [0, 255, 127],
+  steelblue: [70, 130, 180],
+  tan: [210, 180, 140],
+  teal: [0, 128, 128],
+  thistle: [216, 191, 216],
+  tomato: [255, 99, 71],
+  turquoise: [64, 224, 208],
+  violet: [238, 130, 238],
+  wheat: [245, 222, 179],
+  white: [255, 255, 255],
+  whitesmoke: [245, 245, 245],
+  yellow: [255, 255, 0],
+  yellowgreen: [154, 205, 50],
+};

package/src/core/font/compile.ts

@@ -0,0 +1,96 @@
+import fs from 'node:fs';
+import path from 'node:path';
+import { once } from 'node:events';
+import { type Transform } from 'node:stream';
+
+import { forceTtfMetrics } from './metrics.js';
+import svg2ttf from 'svg2ttf';
+import { parseCodepointFromFilename } from '../../utils/parse.js';
+
+async function writeGlyphStreamToFont(
+  fontStream: Transform,
+  svgPath: string,
+  filename: string
+): Promise<void> {
+  const codepoint = parseCodepointFromFilename(filename);
+  const name = path.basename(filename, '.svg');
+
+  return new Promise((resolve, reject) => {
+    const glyphStream = fs.createReadStream(svgPath);
+
+    (glyphStream as any).metadata = {
+      name,
+      unicode: [String.fromCodePoint(codepoint)],
+    };
+
+    glyphStream.on('error', reject);
+    // Do not add fontStream.on("error", reject) here — one per glyph would exceed
+    // Node's default MaxListeners (10). Font stream errors are handled once below.
+    fontStream.write(glyphStream);
+    glyphStream.on('end', resolve);
+  });
+}
+
+export async function compileTtfFromGlyphSVGs(opts: {
+  glyphDir: string;
+  outTtfPath: string;
+  fontName: string;
+  upm: number;
+  ascent: number;
+  descent: number;
+  lineGap?: number;
+}): Promise<void> {
+  const { SVGIcons2SVGFontStream } = await import('svgicons2svgfont');
+
+  const { glyphDir, outTtfPath, fontName, upm, ascent, descent } = opts;
+  const lineGap = opts.lineGap ?? 0;
+
+  const files = fs
+    .readdirSync(glyphDir)
+    .filter((f) => /^u[0-9a-fA-F]+\.svg$/.test(f))
+    .sort(
+      (a, b) => parseCodepointFromFilename(a) - parseCodepointFromFilename(b)
+    );
+
+  if (files.length === 0)
+    throw new Error(`No glyph SVGs found in: ${glyphDir}`);
+
+  const fontStream = new SVGIcons2SVGFontStream({
+    fontName,
+    fontHeight: upm,
+    normalize: false,
+    ascent,
+    descent,
+  });
+
+  const svgFontChunks: Buffer[] = [];
+  fontStream.on('data', (c: Buffer | string) =>
+    svgFontChunks.push(Buffer.isBuffer(c) ? c : Buffer.from(c))
+  );
+
+  // Single error listener for the font stream; per-glyph errors are handled in writeGlyphStreamToFont.
+  let fontStreamReject: (err: Error) => void;
+  const fontStreamErrorPromise = new Promise<never>((_, rej) => {
+    fontStreamReject = rej;
+  });
+  fontStream.on('error', (err: Error) => fontStreamReject(err));
+
+  for (const f of files) {
+    await Promise.race([
+      writeGlyphStreamToFont(fontStream, path.join(glyphDir, f), f),
+      fontStreamErrorPromise,
+    ]);
+  }
+
+  fontStream.end();
+  await once(fontStream, 'end');
+
+  const svgFontString = Buffer.concat(svgFontChunks).toString('utf8');
+  const ttfRaw = svg2ttf(svgFontString);
+  const rawBuf = Buffer.from(ttfRaw.buffer);
+
+  const fixedBuf = forceTtfMetrics(rawBuf, upm, ascent, descent, lineGap);
+
+  fs.mkdirSync(path.dirname(outTtfPath), { recursive: true });
+  fs.writeFileSync(outTtfPath, fixedBuf);
+}

package/src/core/font/metrics.ts

@@ -0,0 +1,44 @@
+import { Font } from 'fonteditor-core';
+
+export function forceTtfMetrics(
+  ttfBuffer: Buffer,
+  upm: number,
+  ascent: number,
+  descent: number,
+  lineGap: number
+): Buffer {
+  const font = Font.create(ttfBuffer, {
+    type: 'ttf',
+    hinting: false,
+    compound2simple: false,
+    combinePath: false,
+  });
+
+  const data = font.get();
+
+  data.head.unitsPerEm = upm;
+
+  data.hhea.ascent = ascent;
+  data.hhea.descent = -Math.abs(descent);
+  data.hhea.lineGap = lineGap;
+
+  data['OS/2'].usWinAscent = ascent;
+  data['OS/2'].usWinDescent = Math.abs(descent);
+  data['OS/2'].sTypoAscender = ascent;
+  data['OS/2'].sTypoDescender = -Math.abs(descent);
+  data['OS/2'].sTypoLineGap = lineGap;
+
+  // Set USE_TYPO_METRICS flag (bit 7) in fsSelection.
+  // This tells renderers to use sTypoAscender/sTypoDescender/sTypoLineGap for
+  // line height calculations instead of the Win metrics (usWinAscent/usWinDescent).
+  // Without this flag, Windows and some Android renderers ignore the Typo values
+  // set above and fall back to Win metrics, causing icons to appear clipped or
+  // misaligned vertically. The bitwise OR preserves all other existing style flags
+  // (italic, bold, etc.) while ensuring this bit is always on.
+  data['OS/2'].fsSelection = (data['OS/2'].fsSelection || 0) | (1 << 7);
+
+  font.set(data);
+
+  const out = font.write({ type: 'ttf', hinting: false }) as ArrayBuffer;
+  return Buffer.from(out);
+}

package/src/core/pipeline/config.ts

@@ -0,0 +1,24 @@
+import fs from 'node:fs';
+
+export type PipelineConfig = {
+  fontFamily: string;
+  upm: number;
+  safeZone: number;
+  startUnicode: number;
+};
+
+export type PipelinePaths = {
+  inputDir: string;
+  outputDir: string;
+  tempDir: string;
+};
+
+export function ensureEmptyDir(dir: string): void {
+  if (fs.existsSync(dir)) fs.rmSync(dir, { recursive: true, force: true });
+  fs.mkdirSync(dir, { recursive: true });
+}
+
+/** Create directory if it does not exist; do not remove existing contents (for shared output dirs). */
+export function ensureDir(dir: string): void {
+  fs.mkdirSync(dir, { recursive: true });
+}

package/src/core/pipeline/index.ts

@@ -0,0 +1,3 @@
+export { runPipeline, type PipelineResult } from './run.js';
+export type { PipelineConfig, PipelinePaths } from './config.js';
+export { ensureEmptyDir } from './config.js';

package/src/core/pipeline/managers.ts

@@ -0,0 +1,114 @@
+import { loadPyodide } from 'pyodide';
+import path from 'node:path';
+import fs from 'node:fs/promises';
+import type { PathKitModule, PyodideModule } from '../types.js';
+import { buildPathopsBackend } from '../svg/svg_pathops.js';
+
+/** Package root (where package.json lives). */
+function getPackageRoot(): string {
+  // Compiled to lib/commonjs/src/core/pipeline/ — 5 dirs up is package root.
+  // Running from source (Jest/ts-node) in src/core/pipeline/ — 3 dirs up is package root.
+  return __dirname.includes(`${path.sep}lib${path.sep}`)
+    ? path.resolve(__dirname, '../../../../..')
+    : path.resolve(__dirname, '../../..');
+}
+
+export class PathKitManager {
+  private static instance: PathKitModule | null = null;
+
+  static async getInstance(): Promise<PathKitModule> {
+    if (this.instance) return this.instance;
+
+    const PathKitInit = require('pathkit-wasm/bin/pathkit.js') as (
+      opts: unknown
+    ) => any;
+    const pathkitJsPath = require.resolve(
+      'pathkit-wasm/bin/pathkit.js'
+    ) as string;
+    const pathkitBinDir = path.dirname(pathkitJsPath);
+    const pathkitWasmPath = path.join(pathkitBinDir, 'pathkit.wasm');
+
+    const wasmBinary = await fs.readFile(pathkitWasmPath);
+
+    const pkInit = PathKitInit({
+      wasmBinary,
+      locateFile: (file: string) => path.join(pathkitBinDir, file),
+    });
+
+    const PathKit: PathKitModule = await (typeof pkInit?.ready === 'function'
+      ? pkInit.ready()
+      : pkInit);
+    this.instance = PathKit;
+    return PathKit;
+  }
+}
+
+export class PyodideManager {
+  private static instance: PyodideModule | null = null;
+
+  static async getInstance(): Promise<PyodideModule> {
+    if (this.instance) return this.instance;
+
+    const pyodideAsmPath = require.resolve('pyodide/pyodide.asm.js') as string;
+    const pyodideDir = path.dirname(pyodideAsmPath) + path.sep;
+
+    const py = (await loadPyodide({
+      indexURL: pyodideDir,
+    })) as unknown as PyodideModule;
+    py.mountNodeFS('/app', process.cwd());
+
+    const PathKit = await PathKitManager.getInstance();
+    py.registerJsModule('_pathops_js', buildPathopsBackend(PathKit));
+
+    const pathopsPyPath = path.join(
+      getPackageRoot(),
+      'src',
+      'core',
+      'shims',
+      'pathops.py'
+    );
+
+    const pathopsPy = await fs.readFile(pathopsPyPath, 'utf8');
+    py.FS.writeFile('/pathops.py', pathopsPy);
+
+    await py.loadPackage(['micropip', 'lxml'], { messageCallback: () => {} });
+
+    await py.runPythonAsync(`
+      import sys
+      if "/" not in sys.path:
+          sys.path.insert(0, "/")
+          
+      import micropip
+      await micropip.install("picosvg", deps=False)
+          
+      import pathops
+      import picosvg
+    `);
+
+    this.instance = py;
+    return py;
+  }
+
+  static async picoFromFile(
+    hostFilePath: string,
+    content?: string
+  ): Promise<string> {
+    const py = await this.getInstance();
+    const svgContent = content ?? (await fs.readFile(hostFilePath, 'utf-8'));
+    py.globals.set('_svg_content', svgContent);
+    const out = py.runPython(`
+      from picosvg.svg import SVG
+      svg = SVG.fromstring(_svg_content)
+      pico = svg.topicosvg()
+      pico.tostring(pretty_print=True)
+    `);
+    return out;
+  }
+}
+
+export async function picoFromFile(
+  hostFilePath: string,
+  content?: string
+): Promise<string> {
+  return PyodideManager.picoFromFile(hostFilePath, content);
+}

package/src/core/pipeline/run.ts

@@ -0,0 +1,151 @@
+import fs from 'node:fs';
+import fsp from 'node:fs/promises';
+import path from 'node:path';
+
+import { compileTtfFromGlyphSVGs } from '../font/compile.js';
+import { picoFromFile } from './managers.js';
+
+import {
+  ensureDir,
+  ensureEmptyDir,
+  type PipelineConfig,
+  type PipelinePaths,
+} from './config.js';
+import {
+  parseFlattenedSvg,
+  preprocessSvg,
+  shouldSkipPath,
+  validateSvg,
+} from '../svg/svg_dom.js';
+import { computePlacement, writeLayerSvg } from '../svg/layers.js';
+import type { GlyphEntry, NanoGlyphMap } from '../types.js';
+import type { NanoLogger } from '../types.js';
+
+export type PipelineResult = {
+  ttfPath: string;
+  glyphmapPath: string;
+};
+
+/**
+ * Run the font pipeline with given config and paths.
+ * Uses the singleton Pyodide/PathKit instance (initialized on first call).
+ */
+export async function runPipeline(
+  config: PipelineConfig,
+  paths: PipelinePaths,
+  options?: { logger?: NanoLogger; inputHash?: string }
+): Promise<PipelineResult> {
+  const startTime = Date.now();
+  const logger = options?.logger;
+
+  logger?.update(`Building "${config.fontFamily}"…`);
+
+  ensureEmptyDir(paths.tempDir);
+  ensureDir(paths.outputDir);
+
+  const files = (await fsp.readdir(paths.inputDir)).filter((f) =>
+    f.toLowerCase().endsWith('.svg')
+  );
+
+  const glyphMap: NanoGlyphMap = {
+    meta: {
+      fontFamily: config.fontFamily,
+      upm: config.upm,
+      safeZone: config.safeZone,
+      startUnicode: config.startUnicode,
+    },
+    icons: {},
+  };
+
+  let currentUnicode = config.startUnicode;
+
+  for (const file of files) {
+    const iconName = path.parse(file).name;
+    const filePath = path.join(paths.inputDir, file);
+
+    logger?.info(`Processing ${file}`);
+
+    const rawContent = await fsp.readFile(filePath, 'utf-8');
+
+    const validation = validateSvg(rawContent);
+    if (validation.valid === false) {
+      logger?.warn(
+        `Skipping "${config.fontFamily}:${file}": ${validation.reason}`
+      );
+      continue;
+    }
+
+    const preprocessed = preprocessSvg(rawContent);
+    const flattenedSvg = await picoFromFile(filePath, preprocessed);
+    const parsed = parseFlattenedSvg(flattenedSvg);
+
+    const { vx, vy, scale, xOff, yOff, adv } = computePlacement({
+      upm: config.upm,
+      safeZone: config.safeZone,
+      viewBox: parsed.viewBox,
+    });
+
+    const entry: GlyphEntry = { adv, layers: [] };
+
+    for (const p of parsed.paths) {
+      if (shouldSkipPath(p.d, p.fill)) continue;
+
+      const cp = currentUnicode++;
+
+      await writeLayerSvg({
+        tempDir: paths.tempDir,
+        upm: config.upm,
+        adv,
+        vx,
+        vy,
+        scale,
+        xOff,
+        yOff,
+        d: p.d,
+        codepoint: cp,
+      });
+
+      entry.layers.push({ codepoint: cp, color: p.fill || 'black' });
+    }
+
+    if (entry.layers.length > 0) {
+      glyphMap.icons[iconName] = entry;
+    }
+  }
+
+  const glyphmapPath = path.join(
+    paths.outputDir,
+    `${config.fontFamily}.glyphmap.json`
+  );
+
+  if (options?.inputHash) {
+    glyphMap.meta.hash = options.inputHash;
+  }
+  await fsp.writeFile(glyphmapPath, JSON.stringify(glyphMap, null, 2), 'utf8');
+
+  logger?.info(`Compiling TTF…`);
+  const ttfPath = path.join(paths.outputDir, `${config.fontFamily}.ttf`);
+
+  await compileTtfFromGlyphSVGs({
+    glyphDir: paths.tempDir,
+    outTtfPath: ttfPath,
+    fontName: config.fontFamily,
+    upm: config.upm,
+    ascent: config.upm,
+    descent: 0,
+  });
+
+  if (fs.existsSync(paths.tempDir)) {
+    fs.rmSync(paths.tempDir, { recursive: true, force: true });
+  }
+
+  const iconCount = Object.keys(glyphMap.icons).length;
+  const elapsed = Date.now() - startTime;
+  logger?.succeed(
+    `Built ${config.fontFamily}.ttf [${iconCount} icon${
+      iconCount === 1 ? '' : 's'
+    } in ${elapsed}ms]`
+  );
+
+  return { ttfPath, glyphmapPath };
+}