embedded-react 0.3.0 → 0.4.1

package/assets/emit-c.mjs

@@ -52,7 +52,7 @@ function glyphInit(g) {
  * @param {Array<object>} [opts.fonts]   Results from bakeFont().
  * @returns {{c:string, h:string}}
  */
-export function emitAssetsC({ headerName, images = [], fonts = [] }) {
+export function emitAssetsC({headerName, images = [], fonts = []}) {
   const guard = 'ER_' + cIdent(headerName).toUpperCase();
   const h =
     `/* Generated by bridges/quickjs/js/assets — DO NOT EDIT. */\n` +
@@ -66,10 +66,14 @@ export function emitAssetsC({ headerName, images = [], fonts = [] }) {
 
   const lines = [];
   lines.push(`/* Generated by bridges/quickjs/js/assets — DO NOT EDIT. */`);
-  lines.push(`/* Images: premultiplied ARGB8888, referenced by pointer. Fonts: baked BitmapFont per size. */`);
+  lines.push(
+    `/* Images: premultiplied ARGB8888, referenced by pointer. Fonts: baked BitmapFont per size. */`,
+  );
   lines.push(``);
   lines.push(`#include "${headerName}"`);
-  lines.push(`#include "er_scene.h" /* er_image_load, er_font_register, BitmapFont */`);
+  lines.push(
+    `#include "er_scene.h" /* er_image_load, er_font_register, BitmapFont */`,
+  );
   lines.push(`#include <stddef.h>`);
   lines.push(`#include <stdint.h>`);
   lines.push(``);
@@ -77,7 +81,10 @@ export function emitAssetsC({ headerName, images = [], fonts = [] }) {
   // --- Images ---------------------------------------------------------------------------------
   for (const img of images) {
     const id = cIdent(img.name);
-    const hex = Array.from(img.pixels, (p) => '0x' + p.toString(16).toUpperCase().padStart(8, '0') + 'u');
+    const hex = Array.from(
+      img.pixels,
+      p => '0x' + p.toString(16).toUpperCase().padStart(8, '0') + 'u',
+    );
     lines.push(`/* image "${img.name}" — ${img.width}x${img.height} */`);
     lines.push(`static const uint32_t ${id}_px[] = {`);
     lines.push(rows(hex, 8));
@@ -89,10 +96,14 @@ export function emitAssetsC({ headerName, images = [], fonts = [] }) {
   const fontRegistrations = [];
   for (const font of fonts) {
     const famId = cIdent(font.family);
-    lines.push(`/* font "${font.family}" — ${font.sizes.map((s) => `${s.pixelSize}px`).join(', ')} */`);
+    lines.push(
+      `/* font "${font.family}" — ${font.sizes.map(s => `${s.pixelSize}px`).join(', ')} */`,
+    );
     emitFontSizes(lines, font, famId, 'static const '); // file-local: only er_register_assets refers to these
     for (const sz of font.sizes) {
-      fontRegistrations.push(`    er_font_register(${JSON.stringify(font.family)}, &g_font_${famId}_${sz.pixelSize});`);
+      fontRegistrations.push(
+        `    er_font_register(${JSON.stringify(font.family)}, &g_font_${famId}_${sz.pixelSize});`,
+      );
     }
   }
 
@@ -100,7 +111,9 @@ export function emitAssetsC({ headerName, images = [], fonts = [] }) {
   lines.push(`void er_register_assets(void)`);
   lines.push(`{`);
   for (const img of images) {
-    lines.push(`    er_image_load(${JSON.stringify(img.name)}, ${cIdent(img.name)}_px, ${img.width}, ${img.height});`);
+    lines.push(
+      `    er_image_load(${JSON.stringify(img.name)}, ${cIdent(img.name)}_px, ${img.width}, ${img.height});`,
+    );
   }
   for (const reg of fontRegistrations) lines.push(reg);
   if (images.length === 0 && fontRegistrations.length === 0) {
@@ -109,28 +122,38 @@ export function emitAssetsC({ headerName, images = [], fonts = [] }) {
   lines.push(`}`);
   lines.push(``);
 
-  return { c: lines.join('\n'), h };
+  return {c: lines.join('\n'), h};
 }
 
 /** Emits the per-size BitmapFont blocks (bitmap + glyphs + extras + struct) for one font. */
 function emitFontSizes(lines, font, symbol, fontStorage) {
   for (const sz of font.sizes) {
     const prefix = `s_${symbol}_${sz.pixelSize}`;
-    const hex = sz.bitmap.map((b) => '0x' + b.toString(16).toUpperCase().padStart(2, '0'));
-    lines.push(`static const uint8_t ${prefix}_bitmap[${sz.bitmap.length || 1}] = {`);
+    const hex = sz.bitmap.map(
+      b => '0x' + b.toString(16).toUpperCase().padStart(2, '0'),
+    );
+    lines.push(
+      `static const uint8_t ${prefix}_bitmap[${sz.bitmap.length || 1}] = {`,
+    );
     lines.push(sz.bitmap.length ? rows(hex, 16) : '    0x00,');
     lines.push(`};`);
     lines.push(``);
 
-    lines.push(`static const GlyphInfo ${prefix}_glyphs[${sz.dense.length}] = {`);
+    lines.push(
+      `static const GlyphInfo ${prefix}_glyphs[${sz.dense.length}] = {`,
+    );
     for (const g of sz.dense) lines.push(`    ${glyphInit(g)},`);
     lines.push(`};`);
     lines.push(``);
 
     if (sz.extras.length) {
-      lines.push(`static const ExtraGlyph ${prefix}_extras[${sz.extras.length}] = {`);
+      lines.push(
+        `static const ExtraGlyph ${prefix}_extras[${sz.extras.length}] = {`,
+      );
       for (const e of sz.extras) {
-        lines.push(`    { .codepoint = 0x${e.codepoint.toString(16).toUpperCase()}, .info = ${glyphInit(e.info)} },`);
+        lines.push(
+          `    { .codepoint = 0x${e.codepoint.toString(16).toUpperCase()}, .info = ${glyphInit(e.info)} },`,
+        );
       }
       lines.push(`};`);
       lines.push(``);
@@ -139,7 +162,9 @@ function emitFontSizes(lines, font, symbol, fontStorage) {
     lines.push(`${fontStorage}BitmapFont g_font_${symbol}_${sz.pixelSize} = {`);
     lines.push(`    .bitmap       = ${prefix}_bitmap,`);
     lines.push(`    .glyphs       = ${prefix}_glyphs,`);
-    lines.push(`    .extras       = ${sz.extras.length ? `${prefix}_extras` : 'NULL'},`);
+    lines.push(
+      `    .extras       = ${sz.extras.length ? `${prefix}_extras` : 'NULL'},`,
+    );
     lines.push(`    .extras_count = ${sz.extras.length},`);
     lines.push(`    .first        = 0x${sz.first.toString(16).toUpperCase()},`);
     lines.push(`    .last         = 0x${sz.last.toString(16).toUpperCase()},`);
@@ -163,14 +188,18 @@ function emitFontSizes(lines, font, symbol, fontStorage) {
  * @param {string} [opts.sourceName] Source font filename, for the header comment.
  * @returns {string} The .c source text.
  */
-export function emitBuiltinFont({ font, symbol = 'inter', sourceName = '' }) {
-  const sizesStr = font.sizes.map((s) => s.pixelSize).join(',');
+export function emitBuiltinFont({font, symbol = 'inter', sourceName = ''}) {
+  const sizesStr = font.sizes.map(s => s.pixelSize).join(',');
   const bpp = font.sizes[0] ? font.sizes[0].bpp : 4;
   const lines = [];
-  lines.push(`/* AUTO-GENERATED by bridges/quickjs/js/assets/build-builtin-font.mjs — do not edit by hand.`);
+  lines.push(
+    `/* AUTO-GENERATED by bridges/quickjs/js/assets/build-builtin-font.mjs — do not edit by hand.`,
+  );
   lines.push(` * Source : ${sourceName}`);
   lines.push(` * Sizes  : ${sizesStr}  (bpp ${bpp}, family "${font.family}")`);
-  lines.push(` * Regenerate: cd bridges/quickjs/js && npm run build:builtin-font`);
+  lines.push(
+    ` * Regenerate: cd bridges/quickjs/js && npm run build:builtin-font`,
+  );
   lines.push(` */`);
   lines.push(`#include "font_bitmap.h"`);
   lines.push(`#include <stddef.h>`);
@@ -179,9 +208,12 @@ export function emitBuiltinFont({ font, symbol = 'inter', sourceName = '' }) {
   emitFontSizes(lines, font, symbol, 'const '); // file-scope const: referenced by g_<symbol>_sizes
 
   lines.push(`const BitmapFont *const g_${symbol}_sizes[] = {`);
-  for (const sz of font.sizes) lines.push(`    &g_font_${symbol}_${sz.pixelSize},`);
+  for (const sz of font.sizes)
+    lines.push(`    &g_font_${symbol}_${sz.pixelSize},`);
   lines.push(`};`);
-  lines.push(`const size_t g_${symbol}_sizes_count = sizeof(g_${symbol}_sizes) / sizeof(g_${symbol}_sizes[0]);`);
+  lines.push(
+    `const size_t g_${symbol}_sizes_count = sizeof(g_${symbol}_sizes) / sizeof(g_${symbol}_sizes[0]);`,
+  );
   lines.push(``);
   return lines.join('\n');
 }

package/assets/emit-container.mjs

@@ -95,15 +95,17 @@ class Writer {
  * @param {string} opts.qjsTag                 QuickJS release tag the bytecode targets (e.g. "v0.15.0").
  * @returns {Buffer} The container bytes.
  */
-export function emitContainer({ bytecode, assetPack, qjsTag }) {
-  if (!bytecode || !bytecode.length) throw new Error('emitContainer: bytecode is required');
+export function emitContainer({bytecode, assetPack, qjsTag}) {
+  if (!bytecode || !bytecode.length)
+    throw new Error('emitContainer: bytecode is required');
   if (!qjsTag) throw new Error('emitContainer: qjsTag is required');
 
   // Build the body (everything after the crc32 field) first, then prepend magic+version+crc.
   const body = new Writer();
   body.str(qjsTag);
   const sections = [];
-  if (assetPack && assetPack.length) sections.push([SECTION_ASSET_PACK, assetPack]);
+  if (assetPack && assetPack.length)
+    sections.push([SECTION_ASSET_PACK, assetPack]);
   sections.push([SECTION_BYTECODE, bytecode]);
   body.u32(sections.length);
   for (const [type, data] of sections) {

package/assets/emit-pack.mjs

@@ -87,7 +87,7 @@ function writeGlyph(w, g) {
  * @param {Array<object>} [opts.fonts]   Results of bakeFont().
  * @returns {Buffer} The pack bytes.
  */
-export function emitAssetPack({ images = [], fonts = [] }) {
+export function emitAssetPack({images = [], fonts = []}) {
   const w = new Writer();
   w.bytes(Buffer.from('ERPK', 'ascii'));
   w.u32(VERSION);
@@ -100,7 +100,13 @@ export function emitAssetPack({ images = [], fonts = [] }) {
     w.u32(img.width);
     w.u32(img.height);
     // pixels is a Uint32Array (premultiplied ARGB words); copy its LE bytes verbatim.
-    w.bytes(Buffer.from(img.pixels.buffer, img.pixels.byteOffset, img.pixels.byteLength));
+    w.bytes(
+      Buffer.from(
+        img.pixels.buffer,
+        img.pixels.byteOffset,
+        img.pixels.byteLength,
+      ),
+    );
   }
 
   for (const font of fonts) {

package/assets/index.mjs

@@ -19,10 +19,10 @@
 // after bundling; the example firmware compiles the .c and calls er_register_assets() at boot.
 import fs from 'node:fs';
 import path from 'node:path';
-import { bakeImage } from './bake-image.mjs';
-import { bakeFont } from './bake-font.mjs';
-import { emitAssetsC } from './emit-c.mjs';
-import { emitAssetPack } from './emit-pack.mjs';
+import {bakeImage} from './bake-image.mjs';
+import {bakeFont} from './bake-font.mjs';
+import {emitAssetsC} from './emit-c.mjs';
+import {emitAssetPack} from './emit-pack.mjs';
 
 /**
  * Bakes the given assets and writes assets.generated.{c,h} into outDir.
@@ -34,21 +34,25 @@ import { emitAssetPack } from './emit-pack.mjs';
  * @param {string} opts.outDir   Directory to write the generated files into.
  * @returns {{cPath:string, hPath:string, images:number, fonts:number}}
  */
-export function bakeAssets({ images = [], fonts = [], outDir }) {
-  const bakedImages = images.map((i) => bakeImage(i));
-  const bakedFonts = fonts.map((f) => bakeFont(f));
+export function bakeAssets({images = [], fonts = [], outDir}) {
+  const bakedImages = images.map(i => bakeImage(i));
+  const bakedFonts = fonts.map(f => bakeFont(f));
 
   const headerName = 'assets.generated.h';
-  const { c, h } = emitAssetsC({ headerName, images: bakedImages, fonts: bakedFonts });
+  const {c, h} = emitAssetsC({
+    headerName,
+    images: bakedImages,
+    fonts: bakedFonts,
+  });
 
-  fs.mkdirSync(outDir, { recursive: true });
+  fs.mkdirSync(outDir, {recursive: true});
   const cPath = path.join(outDir, 'assets.generated.c');
   const hPath = path.join(outDir, headerName);
   fs.writeFileSync(cPath, c);
   fs.writeFileSync(hPath, h);
 
   const fontSizes = bakedFonts.reduce((n, f) => n + f.sizes.length, 0);
-  return { cPath, hPath, images: bakedImages.length, fonts: fontSizes };
+  return {cPath, hPath, images: bakedImages.length, fonts: fontSizes};
 }
 
 /**
@@ -61,12 +65,17 @@ export function bakeAssets({ images = [], fonts = [], outDir }) {
  * @param {string} opts.outPath  Path to write the .pack file.
  * @returns {{path:string, bytes:number, images:number, fonts:number}}
  */
-export function bakeAssetPack({ images = [], fonts = [], outPath }) {
-  const bakedImages = images.map((i) => bakeImage(i));
-  const bakedFonts = fonts.map((f) => bakeFont(f));
-  const pack = emitAssetPack({ images: bakedImages, fonts: bakedFonts });
-  fs.mkdirSync(path.dirname(outPath), { recursive: true });
+export function bakeAssetPack({images = [], fonts = [], outPath}) {
+  const bakedImages = images.map(i => bakeImage(i));
+  const bakedFonts = fonts.map(f => bakeFont(f));
+  const pack = emitAssetPack({images: bakedImages, fonts: bakedFonts});
+  fs.mkdirSync(path.dirname(outPath), {recursive: true});
   fs.writeFileSync(outPath, pack);
   const fontSizes = bakedFonts.reduce((n, f) => n + f.sizes.length, 0);
-  return { path: outPath, bytes: pack.length, images: bakedImages.length, fonts: fontSizes };
+  return {
+    path: outPath,
+    bytes: pack.length,
+    images: bakedImages.length,
+    fonts: fontSizes,
+  };
 }

package/assets/rasterize.mjs

@@ -40,11 +40,11 @@ function flattenCommands(commands, steps) {
   for (const c of commands) {
     if (c.type === 'M') {
       if (cur && cur.length > 1) contours.push(cur);
-      cur = [{ x: c.x, y: c.y }];
+      cur = [{x: c.x, y: c.y}];
       cx = sx = c.x;
       cy = sy = c.y;
     } else if (c.type === 'L') {
-      cur.push({ x: c.x, y: c.y });
+      cur.push({x: c.x, y: c.y});
       cx = c.x;
       cy = c.y;
     } else if (c.type === 'Q') {
@@ -63,15 +63,23 @@ function flattenCommands(commands, steps) {
         const t = i / steps;
         const mt = 1 - t;
         cur.push({
-          x: mt * mt * mt * cx + 3 * mt * mt * t * c.x1 + 3 * mt * t * t * c.x2 + t * t * t * c.x,
-          y: mt * mt * mt * cy + 3 * mt * mt * t * c.y1 + 3 * mt * t * t * c.y2 + t * t * t * c.y,
+          x:
+            mt * mt * mt * cx +
+            3 * mt * mt * t * c.x1 +
+            3 * mt * t * t * c.x2 +
+            t * t * t * c.x,
+          y:
+            mt * mt * mt * cy +
+            3 * mt * mt * t * c.y1 +
+            3 * mt * t * t * c.y2 +
+            t * t * t * c.y,
         });
       }
       cx = c.x;
       cy = c.y;
     } else if (c.type === 'Z') {
       if (cur) {
-        cur.push({ x: sx, y: sy }); // close the contour
+        cur.push({x: sx, y: sy}); // close the contour
         if (cur.length > 1) contours.push(cur);
         cur = null;
       }
@@ -109,7 +117,13 @@ export function rasterize(path, opts = {}) {
     }
   }
   if (!Number.isFinite(minX)) {
-    return { width: 0, height: 0, xOffset: 0, yOffset: 0, coverage: new Uint8Array(0) };
+    return {
+      width: 0,
+      height: 0,
+      xOffset: 0,
+      yOffset: 0,
+      coverage: new Uint8Array(0),
+    };
   }
 
   const x0 = Math.floor(minX);
@@ -117,7 +131,13 @@ export function rasterize(path, opts = {}) {
   const width = Math.ceil(maxX) - x0;
   const height = Math.ceil(maxY) - y0;
   if (width <= 0 || height <= 0) {
-    return { width: 0, height: 0, xOffset: 0, yOffset: 0, coverage: new Uint8Array(0) };
+    return {
+      width: 0,
+      height: 0,
+      xOffset: 0,
+      yOffset: 0,
+      coverage: new Uint8Array(0),
+    };
   }
 
   // Non-horizontal edges, normalized so ylo < yhi; dir is the winding contribution.
@@ -127,8 +147,22 @@ export function rasterize(path, opts = {}) {
       const a = ct[i];
       const b = ct[i + 1];
       if (a.y === b.y) continue;
-      if (a.y < b.y) edges.push({ ylo: a.y, yhi: b.y, x: a.x, dxdy: (b.x - a.x) / (b.y - a.y), dir: 1 });
-      else edges.push({ ylo: b.y, yhi: a.y, x: b.x, dxdy: (a.x - b.x) / (a.y - b.y), dir: -1 });
+      if (a.y < b.y)
+        edges.push({
+          ylo: a.y,
+          yhi: b.y,
+          x: a.x,
+          dxdy: (b.x - a.x) / (b.y - a.y),
+          dir: 1,
+        });
+      else
+        edges.push({
+          ylo: b.y,
+          yhi: a.y,
+          x: b.x,
+          dxdy: (a.x - b.x) / (a.y - b.y),
+          dir: -1,
+        });
     }
   }
 
@@ -139,7 +173,7 @@ export function rasterize(path, opts = {}) {
     const xs = [];
     for (const e of edges) {
       if (sampleY >= e.ylo && sampleY < e.yhi) {
-        xs.push({ x: e.x + (sampleY - e.ylo) * e.dxdy, dir: e.dir });
+        xs.push({x: e.x + (sampleY - e.ylo) * e.dxdy, dir: e.dir});
       }
     }
     if (xs.length < 2) continue;
@@ -165,5 +199,5 @@ export function rasterize(path, opts = {}) {
   for (let i = 0; i < coverage.length; i++) {
     coverage[i] = Math.round((counts[i] * 255) / maxCov);
   }
-  return { width, height, xOffset: x0, yOffset: y0, coverage };
+  return {width, height, xOffset: x0, yOffset: y0, coverage};
 }

package/assets/svg-loader.mjs

@@ -0,0 +1,81 @@
+/*
+ * Copyright 2026 Cory Lamming
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+// esbuild loader for `import logo from './logo.svg'`. Two outcomes, decided at bake time:
+//   - VECTOR: the SVG is fully representable as the engine's op-tape — bake it and INLINE a
+//     {kind:'vector', ops, paints, gradients, width, height} artifact (small numeric data) into the bundle.
+//   - RASTER: the SVG uses features the vector baker can't represent (text, mask, filter, use,
+//     pattern, …). We warn, rasterize the whole SVG via resvg to a PNG, register that PNG through the
+//     bundler's normal image pipeline (a small `addRasterAsset(name, pngPath)` callback), and inline a
+//     {kind:'raster', name, width, height} artifact. A <Svg source> renders kind:'vector' as a vector node
+//     and kind:'raster' as an image node (host-config), so the fallback is transparent to the app.
+// Shared by every Flow A bundler so the .svg handling lives in one place.
+import {readFileSync} from 'node:fs';
+import {basename} from 'node:path';
+import {svgToVector, svgToRaster, writeRasterPng} from './bake-svg.mjs';
+
+const assetName = p => basename(p).replace(/\.[^.]+$/, '');
+
+/**
+ * Registers a `.svg` onLoad on an esbuild build.
+ *
+ * @param {import('esbuild').PluginBuild} build  The esbuild build passed to a plugin's setup().
+ * @param {(name:string, pngPath:string)=>void} [addRasterAsset]  Registers a rasterized-SVG PNG into the
+ *        bundler's image collection (same mechanism as `import x from './x.png'`). When omitted, an SVG that
+ *        needs raster fallback is baked as a (lossy) vector and a warning notes the dropped content.
+ */
+export function registerSvgVectorLoader(build, addRasterAsset) {
+  build.onLoad({filter: /\.svg$/i}, async args => {
+    try {
+      const svg = readFileSync(args.path, 'utf8');
+      const {dropped = [], ...vec} = await svgToVector(svg);
+      if (dropped.length) {
+        const feats = dropped.join(', ');
+        if (addRasterAsset) {
+          console.warn(
+            `embedded-react: ${basename(args.path)} uses unsupported SVG feature(s) [${feats}] — rasterizing ` +
+              `it as a fallback image. (Raster loses scalability and costs RAM; simplify the SVG to keep it a ` +
+              `live vector.)`,
+          );
+          const {width, height, png} = await svgToRaster(svg);
+          const name = assetName(args.path);
+          addRasterAsset(name, writeRasterPng(name, png));
+          return {
+            contents: `module.exports = ${JSON.stringify({kind: 'raster', name, width, height})};`,
+            loader: 'js',
+          };
+        }
+        console.warn(
+          `embedded-react: ${basename(args.path)} uses unsupported SVG feature(s) [${feats}] and this build has ` +
+            `no raster fallback — that content will NOT render. Simplify the SVG, or import it via a bundler that ` +
+            `supports the image pipeline.`,
+        );
+      }
+      return {
+        contents: `module.exports = ${JSON.stringify({kind: 'vector', ...vec})};`,
+        loader: 'js',
+      };
+    } catch (e) {
+      return {
+        errors: [
+          {
+            text: `embedded-react: failed to bake SVG ${args.path}: ${e.message}`,
+          },
+        ],
+      };
+    }
+  });
+}

package/build.mjs

@@ -26,11 +26,12 @@
 //   npm run build -- marine-dash  # a specific demo by folder name
 // Outputs are always dist/app.bundle.js + dist/assets.generated.{c,h} — the single "active" app the
 // example hosts pick up.
-import { build } from 'esbuild';
-import { fileURLToPath, pathToFileURL } from 'node:url';
-import { dirname, resolve, basename } from 'node:path';
-import { existsSync, readdirSync, readFileSync } from 'node:fs';
-import { bakeAssets } from './assets/index.mjs';
+import {build} from 'esbuild';
+import {fileURLToPath, pathToFileURL} from 'node:url';
+import {dirname, resolve, basename} from 'node:path';
+import {existsSync, readdirSync, readFileSync} from 'node:fs';
+import {bakeAssets} from './assets/index.mjs';
+import {registerSvgVectorLoader} from './assets/svg-loader.mjs';
 
 const here = dirname(fileURLToPath(import.meta.url)); // bridges/quickjs/js
 const repoRoot = resolve(here, '../../..');
@@ -46,9 +47,9 @@ const entry = resolve(demoDir, 'index.jsx');
 
 if (!existsSync(entry)) {
   const available = existsSync(demosDir)
-    ? readdirSync(demosDir, { withFileTypes: true })
-        .filter((d) => d.isDirectory())
-        .map((d) => d.name)
+    ? readdirSync(demosDir, {withFileTypes: true})
+        .filter(d => d.isDirectory())
+        .map(d => d.name)
     : [];
   console.error(`Demo "${demo}" not found (expected ${entry}).`);
   console.error(`Available demos: ${available.join(', ') || '(none)'}`);
@@ -64,16 +65,23 @@ const fonts = new Map(); // family -> path
 const assetPlugin = {
   name: 'embedded-react-assets',
   setup(build) {
-    build.onLoad({ filter: /\.(png|jpe?g|webp|gif|bmp)$/i }, (args) => {
+    build.onLoad({filter: /\.(png|jpe?g|webp|gif|bmp)$/i}, args => {
       const name = basename(args.path).replace(/\.[^.]+$/, '');
       images.set(name, args.path);
-      return { contents: `module.exports = ${JSON.stringify(name)};`, loader: 'js' };
+      return {
+        contents: `module.exports = ${JSON.stringify(name)};`,
+        loader: 'js',
+      };
     });
-    build.onLoad({ filter: /\.(ttf|otf)$/i }, (args) => {
+    build.onLoad({filter: /\.(ttf|otf)$/i}, args => {
       const family = basename(args.path).replace(/\.[^.]+$/, '');
       fonts.set(family, args.path);
-      return { contents: `module.exports = ${JSON.stringify(family)};`, loader: 'js' };
+      return {
+        contents: `module.exports = ${JSON.stringify(family)};`,
+        loader: 'js',
+      };
     });
+    registerSvgVectorLoader(build, (name, p) => images.set(name, p));
   },
 };
 
@@ -90,11 +98,11 @@ await build({
   // them: map the bare `embedded-react` import to the library source and let the demo's bare deps
   // (react, react-reconciler) resolve from this package's node_modules. (The library's own internal
   // imports still resolve relatively / from node_modules as before.)
-  alias: { 'embedded-react': libEntry },
+  alias: {'embedded-react': libEntry},
   nodePaths: [nodeModules],
   plugins: [assetPlugin],
   // Production React: smaller and avoids dev-only warning machinery that needs more shims.
-  define: { 'process.env.NODE_ENV': '"production"' },
+  define: {'process.env.NODE_ENV': '"production"'},
   legalComments: 'none',
   logLevel: 'info',
 });
@@ -107,7 +115,11 @@ console.log(`Bundled demo "${demo}" -> dist/app.bundle.js`);
 // and will snap to the nearest baked size at runtime; pin them via assets.config.js if needed.
 const bundleSrc = readFileSync(bundlePath, 'utf8');
 const discoveredSizes = [
-  ...new Set([...bundleSrc.matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map((m) => Math.round(Number(m[1])))),
+  ...new Set(
+    [...bundleSrc.matchAll(/\bfontSize\s*:\s*(\d+(?:\.\d+)?)/g)].map(m =>
+      Math.round(Number(m[1])),
+    ),
+  ),
 ].sort((a, b) => a - b);
 
 // Optional per-demo overrides: demos/<demo>/assets.config.js
@@ -121,14 +133,25 @@ const fontConfig = config.fonts || {};
 
 const fontJobs = [...fonts.entries()].map(([family, path]) => {
   const fc = fontConfig[family] || {};
-  const sizes = fc.sizes && fc.sizes.length ? fc.sizes : discoveredSizes.length ? discoveredSizes : [16];
-  return { path, family, sizes, bpp: fc.bpp ?? 4, glyphs: fc.glyphs ?? 'ascii' };
+  const sizes =
+    fc.sizes && fc.sizes.length
+      ? fc.sizes
+      : discoveredSizes.length
+        ? discoveredSizes
+        : [16];
+  return {path, family, sizes, bpp: fc.bpp ?? 4, glyphs: fc.glyphs ?? 'ascii'};
 });
-const imageJobs = [...images.entries()].map(([name, path]) => ({ path, name }));
+const imageJobs = [...images.entries()].map(([name, path]) => ({path, name}));
 
-const summary = bakeAssets({ images: imageJobs, fonts: fontJobs, outDir: distDir });
+const summary = bakeAssets({
+  images: imageJobs,
+  fonts: fontJobs,
+  outDir: distDir,
+});
 const fontDesc = fontJobs.length
-  ? fontJobs.map((f) => `${f.family}@[${f.sizes.join(',')}]x${f.bpp}bpp`).join(', ')
+  ? fontJobs
+      .map(f => `${f.family}@[${f.sizes.join(',')}]x${f.bpp}bpp`)
+      .join(', ')
   : 'none';
 console.log(
   `Baked ${summary.images} image(s), ${summary.fonts} font size(s) -> dist/assets.generated.c\n` +