embedded-react 0.3.0 → 0.4.1

package/aot/screenshot-smoke.mjs

@@ -25,24 +25,29 @@
 // Prereq: the linux-aot CMake build must be configurable (SDL2 found). It reuses examples/linux-aot/build;
 // if that isn't configured yet, set CMAKE_TOOLCHAIN_FILE (e.g. a vcpkg toolchain) and it will configure it.
 // Needs a display (SDL video); on a headless box run under a virtual framebuffer.
-import { execFileSync } from 'node:child_process';
-import { existsSync, mkdirSync, readFileSync, rmSync } from 'node:fs';
-import { resolve, dirname } from 'node:path';
-import { fileURLToPath } from 'node:url';
+import {execFileSync} from 'node:child_process';
+import {existsSync, mkdirSync, readFileSync, rmSync} from 'node:fs';
+import {resolve, dirname} from 'node:path';
+import {fileURLToPath} from 'node:url';
 
 const here = dirname(fileURLToPath(import.meta.url)); // bridges/quickjs/js/aot
 const jsDir = resolve(here, '..'); // bridges/quickjs/js
 const repoRoot = resolve(here, '../../../..');
 const exampleDir = resolve(repoRoot, 'examples/linux-aot');
 const buildDir = resolve(exampleDir, 'build');
-const exe = resolve(buildDir, process.platform === 'win32' ? 'embedded-react-desktop-aot.exe' : 'embedded-react-desktop-aot');
+const exe = resolve(
+  buildDir,
+  process.platform === 'win32'
+    ? 'embedded-react-desktop-aot.exe'
+    : 'embedded-react-desktop-aot',
+);
 const tmpDir = resolve(jsDir, 'dist', '.smoke');
 
 // Demos to smoke-test. `screen` (optional) sets ER_AOT_SCREEN_W/H so the responsive thermostat folds to its
 // compact (AOT-compilable) branch. `minColors` is the floor of distinct sampled colours for "rendered".
 const DEMOS = [
-  { name: 'music-player', minColors: 40 },
-  { name: 'thermostat', screen: { w: 240, h: 320 }, minColors: 40 },
+  {name: 'music-player', minColors: 40},
+  {name: 'thermostat', screen: {w: 240, h: 320}, minColors: 40},
 ];
 
 /** Counts distinct colours in an uncompressed 24/32-bpp BMP (sampled) — a quick "is anything drawn?" signal. */
@@ -67,38 +72,46 @@ function bmpDistinctColors(path, step = 4) {
 }
 
 function run(cmd, args, opts = {}) {
-  execFileSync(cmd, args, { stdio: 'pipe', ...opts });
+  execFileSync(cmd, args, {stdio: 'pipe', ...opts});
 }
 
 function ensureConfigured() {
   if (existsSync(resolve(buildDir, 'CMakeCache.txt'))) return;
   console.log('• configuring linux-aot build (first run)…');
   const args = ['-S', exampleDir, '-B', buildDir];
-  if (process.env.CMAKE_TOOLCHAIN_FILE) args.push(`-DCMAKE_TOOLCHAIN_FILE=${process.env.CMAKE_TOOLCHAIN_FILE}`);
+  if (process.env.CMAKE_TOOLCHAIN_FILE)
+    args.push(`-DCMAKE_TOOLCHAIN_FILE=${process.env.CMAKE_TOOLCHAIN_FILE}`);
   if (process.platform === 'win32') args.push('-G', 'MinGW Makefiles');
   run('cmake', args);
 }
 
 let failures = 0;
-mkdirSync(tmpDir, { recursive: true });
+mkdirSync(tmpDir, {recursive: true});
 ensureConfigured();
 
 for (const demo of DEMOS) {
   const shot = resolve(tmpDir, `${demo.name}.bmp`);
   try {
-    rmSync(shot, { force: true });
-    const genEnv = { ...process.env };
+    rmSync(shot, {force: true});
+    const genEnv = {...process.env};
     if (demo.screen) {
       genEnv.ER_AOT_SCREEN_W = String(demo.screen.w);
       genEnv.ER_AOT_SCREEN_H = String(demo.screen.h);
     }
-    run('node', [resolve(here, 'compile.mjs'), demo.name], { cwd: jsDir, env: genEnv }); // → dist/app.gen.{c,h}
+    run('node', [resolve(here, 'compile.mjs'), demo.name], {
+      cwd: jsDir,
+      env: genEnv,
+    }); // → dist/app.gen.{c,h}
     run('cmake', ['--build', buildDir]); // relink the generated C
-    run(exe, [], { cwd: buildDir, env: { ...process.env, ER_AOT_SHOT: shot } }); // render one frame → BMP
+    run(exe, [], {cwd: buildDir, env: {...process.env, ER_AOT_SHOT: shot}}); // render one frame → BMP
 
-    if (!existsSync(shot)) throw new Error('no screenshot written (host crashed before present?)');
+    if (!existsSync(shot))
+      throw new Error('no screenshot written (host crashed before present?)');
     const colors = bmpDistinctColors(shot);
-    if (colors < demo.minColors) throw new Error(`screenshot looks blank (${colors} distinct colours < ${demo.minColors})`);
+    if (colors < demo.minColors)
+      throw new Error(
+        `screenshot looks blank (${colors} distinct colours < ${demo.minColors})`,
+      );
     console.log(`✓ ${demo.name}: rendered (${colors} distinct colours)`);
   } catch (e) {
     failures++;
@@ -106,5 +119,9 @@ for (const demo of DEMOS) {
   }
 }
 
-console.log(failures ? `\n${failures} demo(s) failed the smoke test.` : `\nAll ${DEMOS.length} demos compiled, built, and rendered.`);
+console.log(
+  failures
+    ? `\n${failures} demo(s) failed the smoke test.`
+    : `\nAll ${DEMOS.length} demos compiled, built, and rendered.`,
+);
 process.exit(failures ? 1 : 0);

package/aot/style-map.mjs

@@ -42,13 +42,21 @@ const NAMED_COLORS = {
  * @returns {number} ARGB8888 as an unsigned 32-bit integer.
  */
 export function parseColorValue(s) {
-  if (typeof s !== 'string') throw new Error(`color must be a string, got ${typeof s}`);
+  if (typeof s !== 'string')
+    throw new Error(`color must be a string, got ${typeof s}`);
   const key = s.trim().toLowerCase();
   if (key in NAMED_COLORS) return NAMED_COLORS[key] >>> 0;
   const m = /^#([0-9a-f]{3}|[0-9a-f]{6}|[0-9a-f]{8})$/i.exec(key);
-  if (!m) throw new Error(`unsupported color "${s}" (use #rgb / #rrggbb / #rrggbbaa or a named color)`);
+  if (!m)
+    throw new Error(
+      `unsupported color "${s}" (use #rgb / #rrggbb / #rrggbbaa or a named color)`,
+    );
   let hex = m[1];
-  if (hex.length === 3) hex = hex.split('').map((c) => c + c).join(''); // #rgb → #rrggbb
+  if (hex.length === 3)
+    hex = hex
+      .split('')
+      .map(c => c + c)
+      .join(''); // #rgb → #rrggbb
   let r, g, b, a;
   if (hex.length === 6) {
     a = 0xff;
@@ -62,7 +70,7 @@ export function parseColorValue(s) {
     b = parseInt(hex.slice(4, 6), 16);
     a = parseInt(hex.slice(6, 8), 16);
   }
-  return (((a << 24) | (r << 16) | (g << 8) | b) >>> 0);
+  return ((a << 24) | (r << 16) | (g << 8) | b) >>> 0;
 }
 
 /** Formats an ARGB int as a C unsigned hex literal, e.g. 0xFF0F172Au. */
@@ -91,15 +99,19 @@ const FLEX_DIRECTION = {
   'row-reverse': 'ER_FLEX_ROW_REVERSE',
   'column-reverse': 'ER_FLEX_COL_REVERSE',
 };
-const POSITION = { relative: 'ER_POS_RELATIVE', absolute: 'ER_POS_ABSOLUTE' };
+const POSITION = {relative: 'ER_POS_RELATIVE', absolute: 'ER_POS_ABSOLUTE'};
 
-const enumKey = (table, name) => (v) => {
+const enumKey = (table, name) => v => {
   const c = table[v];
-  if (!c) throw new Error(`${name}: unsupported value "${v}" (one of ${Object.keys(table).join(', ')})`);
+  if (!c)
+    throw new Error(
+      `${name}: unsupported value "${v}" (one of ${Object.keys(table).join(', ')})`,
+    );
   return c;
 };
-const dim = (v) => {
-  if (typeof v !== 'number' || !Number.isFinite(v)) throw new Error(`expected a numeric dimension, got ${JSON.stringify(v)}`);
+const dim = v => {
+  if (typeof v !== 'number' || !Number.isFinite(v))
+    throw new Error(`expected a numeric dimension, got ${JSON.stringify(v)}`);
   return String(Math.round(v));
 };
 
@@ -110,15 +122,18 @@ const dim = (v) => {
  * @param {string} pxField   ERProps pixel field (e.g. 'width').
  * @param {string} pctField  ERProps percentage field (e.g. 'width_pct').
  */
-const pctOrPx = (pxField, pctField) => (v) => {
+const pctOrPx = (pxField, pctField) => v => {
   if (typeof v === 'string' && v.trim().endsWith('%')) {
     const n = parseFloat(v);
-    if (!Number.isFinite(n)) throw new Error(`expected a percentage like '50%', got ${JSON.stringify(v)}`);
+    if (!Number.isFinite(n))
+      throw new Error(
+        `expected a percentage like '50%', got ${JSON.stringify(v)}`,
+      );
     // A valid C float literal needs a decimal point — `50f` is a syntax error, `50.0f` is not.
     const lit = Number.isInteger(n) ? `${n}.0f` : `${n}f`;
-    return [{ field: pctField, expr: lit }];
+    return [{field: pctField, expr: lit}];
   }
-  return [{ field: pxField, expr: dim(v) }];
+  return [{field: pxField, expr: dim(v)}];
 };
 
 /**
@@ -130,61 +145,89 @@ const KEYS = {
   width: pctOrPx('width', 'width_pct'),
   height: pctOrPx('height', 'height_pct'),
   flexBasis: pctOrPx('flex_basis', 'flex_basis_pct'),
-  minWidth: (v) => [{ field: 'min_width', expr: dim(v) }],
-  maxWidth: (v) => [{ field: 'max_width', expr: dim(v) }],
-  minHeight: (v) => [{ field: 'min_height', expr: dim(v) }],
-  maxHeight: (v) => [{ field: 'max_height', expr: dim(v) }],
-  padding: (v) => [{ field: 'padding', expr: dim(v) }],
-  paddingHorizontal: (v) => [{ field: 'padding_horizontal', expr: dim(v) }],
-  paddingVertical: (v) => [{ field: 'padding_vertical', expr: dim(v) }],
-  paddingLeft: (v) => [{ field: 'padding_left', expr: dim(v) }],
-  paddingTop: (v) => [{ field: 'padding_top', expr: dim(v) }],
-  paddingRight: (v) => [{ field: 'padding_right', expr: dim(v) }],
-  paddingBottom: (v) => [{ field: 'padding_bottom', expr: dim(v) }],
-  margin: (v) => [{ field: 'margin', expr: dim(v) }],
-  marginHorizontal: (v) => [{ field: 'margin_horizontal', expr: dim(v) }],
-  marginVertical: (v) => [{ field: 'margin_vertical', expr: dim(v) }],
-  marginLeft: (v) => [{ field: 'margin_left', expr: dim(v) }],
-  marginTop: (v) => [{ field: 'margin_top', expr: dim(v) }],
-  marginRight: (v) => [{ field: 'margin_right', expr: dim(v) }],
-  marginBottom: (v) => [{ field: 'margin_bottom', expr: dim(v) }],
-  gap: (v) => [{ field: 'gap', expr: dim(v) }],
-  rowGap: (v) => [{ field: 'row_gap', expr: dim(v) }],
-  columnGap: (v) => [{ field: 'column_gap', expr: dim(v) }],
-  flexGrow: (v) => [{ field: 'flex_grow', expr: dim(v) }],
-  flexShrink: (v) => [{ field: 'flex_shrink', expr: dim(v) }],
-  flexDirection: (v) => [{ field: 'flex_direction', expr: enumKey(FLEX_DIRECTION, 'flexDirection')(v) }],
-  alignItems: (v) => [{ field: 'align_items', expr: enumKey(ALIGN, 'alignItems')(v) }],
-  alignSelf: (v) => [{ field: 'align_self', expr: enumKey(ALIGN, 'alignSelf')(v) }],
-  justifyContent: (v) => [{ field: 'justify_content', expr: enumKey(JUSTIFY, 'justifyContent')(v) }],
+  minWidth: v => [{field: 'min_width', expr: dim(v)}],
+  maxWidth: v => [{field: 'max_width', expr: dim(v)}],
+  minHeight: v => [{field: 'min_height', expr: dim(v)}],
+  maxHeight: v => [{field: 'max_height', expr: dim(v)}],
+  padding: v => [{field: 'padding', expr: dim(v)}],
+  paddingHorizontal: v => [{field: 'padding_horizontal', expr: dim(v)}],
+  paddingVertical: v => [{field: 'padding_vertical', expr: dim(v)}],
+  paddingLeft: v => [{field: 'padding_left', expr: dim(v)}],
+  paddingTop: v => [{field: 'padding_top', expr: dim(v)}],
+  paddingRight: v => [{field: 'padding_right', expr: dim(v)}],
+  paddingBottom: v => [{field: 'padding_bottom', expr: dim(v)}],
+  margin: v => [{field: 'margin', expr: dim(v)}],
+  marginHorizontal: v => [{field: 'margin_horizontal', expr: dim(v)}],
+  marginVertical: v => [{field: 'margin_vertical', expr: dim(v)}],
+  marginLeft: v => [{field: 'margin_left', expr: dim(v)}],
+  marginTop: v => [{field: 'margin_top', expr: dim(v)}],
+  marginRight: v => [{field: 'margin_right', expr: dim(v)}],
+  marginBottom: v => [{field: 'margin_bottom', expr: dim(v)}],
+  gap: v => [{field: 'gap', expr: dim(v)}],
+  rowGap: v => [{field: 'row_gap', expr: dim(v)}],
+  columnGap: v => [{field: 'column_gap', expr: dim(v)}],
+  flexGrow: v => [{field: 'flex_grow', expr: dim(v)}],
+  flexShrink: v => [{field: 'flex_shrink', expr: dim(v)}],
+  flexDirection: v => [
+    {
+      field: 'flex_direction',
+      expr: enumKey(FLEX_DIRECTION, 'flexDirection')(v),
+    },
+  ],
+  alignItems: v => [
+    {field: 'align_items', expr: enumKey(ALIGN, 'alignItems')(v)},
+  ],
+  alignSelf: v => [{field: 'align_self', expr: enumKey(ALIGN, 'alignSelf')(v)}],
+  justifyContent: v => [
+    {field: 'justify_content', expr: enumKey(JUSTIFY, 'justifyContent')(v)},
+  ],
   // Positioning: `position: 'absolute'` takes a node out of flow; left/top/right/bottom are its anchors.
-  position: (v) => [{ field: 'position', expr: enumKey(POSITION, 'position')(v) }],
-  left: (v) => [{ field: 'left', expr: dim(v) }],
-  top: (v) => [{ field: 'top', expr: dim(v) }],
-  right: (v) => [{ field: 'right', expr: dim(v) }],
-  bottom: (v) => [{ field: 'bottom', expr: dim(v) }],
+  position: v => [{field: 'position', expr: enumKey(POSITION, 'position')(v)}],
+  left: v => [{field: 'left', expr: dim(v)}],
+  top: v => [{field: 'top', expr: dim(v)}],
+  right: v => [{field: 'right', expr: dim(v)}],
+  bottom: v => [{field: 'bottom', expr: dim(v)}],
   // `flex: n` → grow=n, shrink=1, basis=0 (RN semantics; matches native_ui_bridge apply_flex).
-  flex: (v) => {
+  flex: v => {
     const n = Number(v);
-    if (n > 0) return [{ field: 'flex_grow', expr: dim(n) }, { field: 'flex_shrink', expr: '1' }, { field: 'flex_basis', expr: '0' }];
-    if (n === 0) return [{ field: 'flex_grow', expr: '0' }, { field: 'flex_shrink', expr: '0' }];
-    return [{ field: 'flex_grow', expr: '0' }, { field: 'flex_shrink', expr: '1' }];
+    if (n > 0)
+      return [
+        {field: 'flex_grow', expr: dim(n)},
+        {field: 'flex_shrink', expr: '1'},
+        {field: 'flex_basis', expr: '0'},
+      ];
+    if (n === 0)
+      return [
+        {field: 'flex_grow', expr: '0'},
+        {field: 'flex_shrink', expr: '0'},
+      ];
+    return [
+      {field: 'flex_grow', expr: '0'},
+      {field: 'flex_shrink', expr: '1'},
+    ];
   },
 
   // View visual
-  backgroundColor: (v) => [{ field: 'background_color', expr: colorLiteral(v) }],
-  borderRadius: (v) => [{ field: 'border_radius', expr: dim(v) }],
-  borderWidth: (v) => [{ field: 'border_width', expr: dim(v) }],
-  borderColor: (v) => [{ field: 'border_color', expr: colorLiteral(v) }],
-  opacity: (v) => [{ field: 'opacity', expr: String(Math.round(Math.max(0, Math.min(1, Number(v))) * 255)) }],
-  zIndex: (v) => [{ field: 'z_index', expr: dim(v) }],
+  backgroundColor: v => [{field: 'background_color', expr: colorLiteral(v)}],
+  borderRadius: v => [{field: 'border_radius', expr: dim(v)}],
+  borderWidth: v => [{field: 'border_width', expr: dim(v)}],
+  borderColor: v => [{field: 'border_color', expr: colorLiteral(v)}],
+  opacity: v => [
+    {
+      field: 'opacity',
+      expr: String(Math.round(Math.max(0, Math.min(1, Number(v))) * 255)),
+    },
+  ],
+  zIndex: v => [{field: 'z_index', expr: dim(v)}],
 
   // Text
-  color: (v) => [{ field: 'color', expr: colorLiteral(v) }],
-  fontSize: (v) => [{ field: 'font_size', expr: dim(v) }],
-  fontWeight: (v) => [{ field: 'font_weight', expr: v === 'bold' || Number(v) >= 600 ? '1' : '0' }],
-  lineHeight: (v) => [{ field: 'line_height', expr: dim(v) }],
-  letterSpacing: (v) => [{ field: 'letter_spacing', expr: dim(v) }],
+  color: v => [{field: 'color', expr: colorLiteral(v)}],
+  fontSize: v => [{field: 'font_size', expr: dim(v)}],
+  fontWeight: v => [
+    {field: 'font_weight', expr: v === 'bold' || Number(v) >= 600 ? '1' : '0'},
+  ],
+  lineHeight: v => [{field: 'line_height', expr: dim(v)}],
+  letterSpacing: v => [{field: 'letter_spacing', expr: dim(v)}],
 };
 
 /**
@@ -198,7 +241,10 @@ export function lowerStyle(style) {
   for (const [key, value] of Object.entries(style)) {
     if (value === undefined || value === null) continue;
     const fn = KEYS[key];
-    if (!fn) throw new Error(`AOT: unsupported style key "${key}" (not yet lowered to ERProps)`);
+    if (!fn)
+      throw new Error(
+        `AOT: unsupported style key "${key}" (not yet lowered to ERProps)`,
+      );
     out.push(...fn(value));
   }
   return out;
@@ -218,31 +264,61 @@ export const NODE_TYPES = {
 // 'opacity' → scale a 0–1 expression to 0–255; 'color' → a (ternary of) color literal(s). Keys absent
 // here (enums like flexDirection, the `flex` shorthand) can only be static for now.
 const NUM_FIELDS = {
-  width: 'width', height: 'height', minWidth: 'min_width', maxWidth: 'max_width', minHeight: 'min_height', maxHeight: 'max_height',
-  padding: 'padding', paddingHorizontal: 'padding_horizontal', paddingVertical: 'padding_vertical',
-  paddingLeft: 'padding_left', paddingTop: 'padding_top', paddingRight: 'padding_right', paddingBottom: 'padding_bottom',
-  margin: 'margin', marginHorizontal: 'margin_horizontal', marginVertical: 'margin_vertical',
-  marginLeft: 'margin_left', marginTop: 'margin_top', marginRight: 'margin_right', marginBottom: 'margin_bottom',
-  gap: 'gap', rowGap: 'row_gap', columnGap: 'column_gap', flexGrow: 'flex_grow', flexShrink: 'flex_shrink',
-  borderRadius: 'border_radius', borderWidth: 'border_width', zIndex: 'z_index',
-  fontSize: 'font_size', lineHeight: 'line_height', letterSpacing: 'letter_spacing',
+  width: 'width',
+  height: 'height',
+  minWidth: 'min_width',
+  maxWidth: 'max_width',
+  minHeight: 'min_height',
+  maxHeight: 'max_height',
+  padding: 'padding',
+  paddingHorizontal: 'padding_horizontal',
+  paddingVertical: 'padding_vertical',
+  paddingLeft: 'padding_left',
+  paddingTop: 'padding_top',
+  paddingRight: 'padding_right',
+  paddingBottom: 'padding_bottom',
+  margin: 'margin',
+  marginHorizontal: 'margin_horizontal',
+  marginVertical: 'margin_vertical',
+  marginLeft: 'margin_left',
+  marginTop: 'margin_top',
+  marginRight: 'margin_right',
+  marginBottom: 'margin_bottom',
+  gap: 'gap',
+  rowGap: 'row_gap',
+  columnGap: 'column_gap',
+  flexGrow: 'flex_grow',
+  flexShrink: 'flex_shrink',
+  borderRadius: 'border_radius',
+  borderWidth: 'border_width',
+  zIndex: 'z_index',
+  fontSize: 'font_size',
+  lineHeight: 'line_height',
+  letterSpacing: 'letter_spacing',
 };
 
 // Enum style keys that can be state-driven: the value (a string literal or a ternary of them) lowers to the
 // matching ER_* enum constant via its table. Changing one in app_update re-runs layout (props_hash covers it).
 const ENUM_FIELDS = {
-  flexDirection: { field: 'flex_direction', table: FLEX_DIRECTION },
-  alignItems: { field: 'align_items', table: ALIGN },
-  alignSelf: { field: 'align_self', table: ALIGN },
-  justifyContent: { field: 'justify_content', table: JUSTIFY },
-  position: { field: 'position', table: POSITION },
+  flexDirection: {field: 'flex_direction', table: FLEX_DIRECTION},
+  alignItems: {field: 'align_items', table: ALIGN},
+  alignSelf: {field: 'align_self', table: ALIGN},
+  justifyContent: {field: 'justify_content', table: JUSTIFY},
+  position: {field: 'position', table: POSITION},
 };
 
 export const DYN_FIELDS = {
-  ...Object.fromEntries(Object.entries(NUM_FIELDS).map(([k, f]) => [k, { field: f, kind: 'num' }])),
-  ...Object.fromEntries(Object.entries(ENUM_FIELDS).map(([k, m]) => [k, { field: m.field, kind: 'enum', table: m.table }])),
-  backgroundColor: { field: 'background_color', kind: 'color' },
-  color: { field: 'color', kind: 'color' },
-  borderColor: { field: 'border_color', kind: 'color' },
-  opacity: { field: 'opacity', kind: 'opacity' },
+  ...Object.fromEntries(
+    Object.entries(NUM_FIELDS).map(([k, f]) => [k, {field: f, kind: 'num'}]),
+  ),
+  ...Object.fromEntries(
+    Object.entries(ENUM_FIELDS).map(([k, m]) => [
+      k,
+      {field: m.field, kind: 'enum', table: m.table},
+    ]),
+  ),
+  backgroundColor: {field: 'background_color', kind: 'color'},
+  color: {field: 'color', kind: 'color'},
+  borderColor: {field: 'border_color', kind: 'color'},
+  opacity: {field: 'opacity', kind: 'opacity'},
 };

package/assets/bake-font.mjs

@@ -26,7 +26,7 @@
 //   bpp 8 → 1 byte/px, raw coverage
 import fs from 'node:fs';
 import opentype from 'opentype.js';
-import { rasterize } from './rasterize.mjs';
+import {rasterize} from './rasterize.mjs';
 
 /** Default dense glyph range: printable ASCII (0x20..0x7E). */
 export const ASCII_FIRST = 0x20;
@@ -34,14 +34,16 @@ export const ASCII_LAST = 0x7e;
 
 // Named extra-symbol sets selectable from assets.config.js (glyphs: 'common' | 'minimal' | ...).
 const SYMBOLS_MINIMAL = [
-  0x00b0, 0x00b1, 0x00b5, 0x00d7, 0x00f7, 0x2013, 0x2014, 0x2022, 0x2026, 0x2190, 0x2191, 0x2192,
-  0x2193, 0x2713, 0x2717,
+  0x00b0, 0x00b1, 0x00b5, 0x00d7, 0x00f7, 0x2013, 0x2014, 0x2022, 0x2026,
+  0x2190, 0x2191, 0x2192, 0x2193, 0x2713, 0x2717,
 ];
 const SYMBOLS_COMMON = [
-  0x00a2, 0x00a3, 0x00a5, 0x00a7, 0x00a9, 0x00ae, 0x00b0, 0x00b1, 0x00b5, 0x00d7, 0x00f7, 0x2013,
-  0x2014, 0x2018, 0x2019, 0x201c, 0x201d, 0x2020, 0x2021, 0x2022, 0x2026, 0x2030, 0x20ac, 0x2122,
-  0x2190, 0x2191, 0x2192, 0x2193, 0x2194, 0x21b5, 0x2202, 0x2206, 0x221a, 0x221e, 0x2211, 0x2212,
-  0x2248, 0x2260, 0x2264, 0x2265, 0x25a0, 0x25cf, 0x25c6, 0x2605, 0x2606, 0x2713, 0x2717,
+  0x00a2, 0x00a3, 0x00a5, 0x00a7, 0x00a9, 0x00ae, 0x00b0, 0x00b1, 0x00b5,
+  0x00d7, 0x00f7, 0x2013, 0x2014, 0x2018, 0x2019, 0x201c, 0x201d, 0x2020,
+  0x2021, 0x2022, 0x2026, 0x2030, 0x20ac, 0x2122, 0x2190, 0x2191, 0x2192,
+  0x2193, 0x2194, 0x21b5, 0x2202, 0x2206, 0x221a, 0x221e, 0x2211, 0x2212,
+  0x2248, 0x2260, 0x2264, 0x2265, 0x25a0, 0x25cf, 0x25c6, 0x2605, 0x2606,
+  0x2713, 0x2717,
 ];
 const SYMBOLS_GREEK = [];
 for (let c = 0x0391; c <= 0x03a9; c++) if (c !== 0x03a2) SYMBOLS_GREEK.push(c); // uppercase (skip gap)
@@ -51,7 +53,9 @@ const SYMBOL_SETS = {
   minimal: SYMBOLS_MINIMAL,
   common: SYMBOLS_COMMON,
   greek: SYMBOLS_GREEK,
-  'common-greek': [...new Set([...SYMBOLS_COMMON, ...SYMBOLS_GREEK])].sort((a, b) => a - b),
+  'common-greek': [...new Set([...SYMBOLS_COMMON, ...SYMBOLS_GREEK])].sort(
+    (a, b) => a - b,
+  ),
 };
 
 /**
@@ -65,8 +69,13 @@ export function resolveExtras(glyphs) {
   let cps;
   if (Array.isArray(glyphs)) cps = glyphs.slice();
   else if (SYMBOL_SETS[glyphs]) cps = SYMBOL_SETS[glyphs].slice();
-  else throw new Error(`unknown glyph set "${glyphs}" (use 'ascii', a named set, or a codepoint array)`);
-  return [...new Set(cps)].filter((c) => c < ASCII_FIRST || c > ASCII_LAST).sort((a, b) => a - b);
+  else
+    throw new Error(
+      `unknown glyph set "${glyphs}" (use 'ascii', a named set, or a codepoint array)`,
+    );
+  return [...new Set(cps)]
+    .filter(c => c < ASCII_FIRST || c > ASCII_LAST)
+    .sort((a, b) => a - b);
 }
 
 /**
@@ -94,7 +103,8 @@ function packCoverage(cov, w, h, bpp) {
         const col = b * perByte + s;
         if (col >= w) continue;
         const c = cov[row * w + col];
-        const v = bpp === 1 ? (c >= 128 ? 1 : 0) : Math.round((c * maxVal) / 255);
+        const v =
+          bpp === 1 ? (c >= 128 ? 1 : 0) : Math.round((c * maxVal) / 255);
         byte |= v << (8 - bpp - s * bpp); // first pixel in the high bits
       }
       out.push(byte);
@@ -109,15 +119,18 @@ function packCoverage(cov, w, h, bpp) {
  * @returns {{glyph:object, bytes:number[]}|null} null when the font has no glyph for the codepoint.
  */
 function bakeGlyph(font, cp, pixelSize, baseline, scale, bpp) {
-  if (font.charToGlyphIndex(String.fromCodePoint(cp)) === 0 && cp !== 0x20) return null;
+  if (font.charToGlyphIndex(String.fromCodePoint(cp)) === 0 && cp !== 0x20)
+    return null;
   const glyph = font.charToGlyph(String.fromCodePoint(cp));
   const advance = Math.round(glyph.advanceWidth * scale);
   const ss = bpp === 8 ? 8 : 4;
   const steps = Math.max(6, Math.ceil(pixelSize / 3));
-  const r = rasterize(glyph.getPath(0, baseline, pixelSize), { ss, steps });
+  const r = rasterize(glyph.getPath(0, baseline, pixelSize), {ss, steps});
 
   if (r.width > 255 || r.height > 255) {
-    throw new Error(`glyph U+${cp.toString(16)} is ${r.width}x${r.height}px — exceeds the uint8 glyph limit`);
+    throw new Error(
+      `glyph U+${cp.toString(16)} is ${r.width}x${r.height}px — exceeds the uint8 glyph limit`,
+    );
   }
   const glyphRec = {
     bitmapOffset: 0, // filled in by the caller once the running offset is known
@@ -127,8 +140,11 @@ function bakeGlyph(font, cp, pixelSize, baseline, scale, bpp) {
     yOffset: r.yOffset,
     advance: Math.min(advance, 255),
   };
-  const bytes = r.width > 0 && r.height > 0 ? packCoverage(r.coverage, r.width, r.height, bpp) : [];
-  return { glyph: glyphRec, bytes };
+  const bytes =
+    r.width > 0 && r.height > 0
+      ? packCoverage(r.coverage, r.width, r.height, bpp)
+      : [];
+  return {glyph: glyphRec, bytes};
 }
 
 /**
@@ -142,8 +158,9 @@ function bakeGlyph(font, cp, pixelSize, baseline, scale, bpp) {
  * @param {string|Array<number>} [opts.glyphs] Extra glyph coverage beyond ASCII (default 'ascii').
  * @returns {{family:string, sizes:Array<object>}} Baked data ready for the C emitter.
  */
-export function bakeFont({ path, family, sizes, bpp = 4, glyphs = 'ascii' }) {
-  if (![1, 2, 4, 8].includes(bpp)) throw new Error(`bpp must be 1, 2, 4, or 8 (got ${bpp})`);
+export function bakeFont({path, family, sizes, bpp = 4, glyphs = 'ascii'}) {
+  if (![1, 2, 4, 8].includes(bpp))
+    throw new Error(`bpp must be 1, 2, 4, or 8 (got ${bpp})`);
   const font = opentype.parse(fs.readFileSync(path).buffer);
   const extraCps = resolveExtras(glyphs);
 
@@ -157,7 +174,14 @@ export function bakeFont({ path, family, sizes, bpp = 4, glyphs = 'ascii' }) {
     const dense = [];
     for (let cp = ASCII_FIRST; cp <= ASCII_LAST; cp++) {
       const baked1 = bakeGlyph(font, cp, pixelSize, baseline, scale, bpp) || {
-        glyph: { bitmapOffset: 0, width: 0, height: 0, xOffset: 0, yOffset: 0, advance: Math.round(pixelSize / 2) },
+        glyph: {
+          bitmapOffset: 0,
+          width: 0,
+          height: 0,
+          xOffset: 0,
+          yOffset: 0,
+          advance: Math.round(pixelSize / 2),
+        },
         bytes: [],
       };
       baked1.glyph.bitmapOffset = baked1.bytes.length > 0 ? bitmap.length : 0;
@@ -171,7 +195,7 @@ export function bakeFont({ path, family, sizes, bpp = 4, glyphs = 'ascii' }) {
       if (!b) continue; // font has no such glyph
       b.glyph.bitmapOffset = b.bytes.length > 0 ? bitmap.length : 0;
       bitmap.push(...b.bytes);
-      extras.push({ codepoint: cp, info: b.glyph });
+      extras.push({codepoint: cp, info: b.glyph});
     }
 
     baked.push({
@@ -186,5 +210,5 @@ export function bakeFont({ path, family, sizes, bpp = 4, glyphs = 'ascii' }) {
       bitmap,
     });
   }
-  return { family, sizes: baked };
+  return {family, sizes: baked};
 }

package/assets/bake-image.mjs

@@ -18,7 +18,7 @@
 // references by pointer (er_image_load). Pure JS (pngjs) — no native deps, no Python. The engine
 // scales at render time, so bake at whatever source resolution you want to ship.
 import fs from 'node:fs';
-import { PNG } from 'pngjs';
+import {PNG} from 'pngjs';
 
 /**
  * Decodes an image and returns its premultiplied ARGB8888 pixels (row-major, 0xAARRGGBB).
@@ -28,12 +28,14 @@ import { PNG } from 'pngjs';
  * @param {string} opts.name  Asset name an <Image source>/imageName looks up.
  * @returns {{name:string, width:number, height:number, pixels:Uint32Array}}
  */
-export function bakeImage({ path, name }) {
+export function bakeImage({path, name}) {
   if (!/\.png$/i.test(path)) {
-    throw new Error(`image "${path}": only PNG is supported by the baker (convert to PNG, or extend bake-image.mjs)`);
+    throw new Error(
+      `image "${path}": only PNG is supported by the baker (convert to PNG, or extend bake-image.mjs)`,
+    );
   }
   const png = PNG.sync.read(fs.readFileSync(path));
-  const { width, height, data } = png; // data = RGBA, 8-bit, row-major
+  const {width, height, data} = png; // data = RGBA, 8-bit, row-major
   const pixels = new Uint32Array(width * height);
   for (let i = 0; i < width * height; i++) {
     const r = data[i * 4];
@@ -46,5 +48,5 @@ export function bakeImage({ path, name }) {
     const bp = Math.floor((b * a + 127) / 255);
     pixels[i] = ((a << 24) | (rp << 16) | (gp << 8) | bp) >>> 0;
   }
-  return { name, width, height, pixels };
+  return {name, width, height, pixels};
 }